{
const scene = new THREE.Scene()
const canvasHeight = 600
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, canvasHeight)
renderer.setPixelRatio(devicePixelRatio)
renderer.setClearColor(0xffffff)
const camera = new THREE.PerspectiveCamera(60, width/canvasHeight, 0.1, height * 2)
camera.position.x = 228
camera.position.y = 240
camera.position.z = 150
camera.lookAt(new THREE.Vector3(width/2, 0, height/2))
const controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
invalidation.then(() => (controls.dispose(), renderer.dispose()))
controls.addEventListener("change", () => {
mutable debug = camera.position
renderer.render(scene, camera)
})
const light = new THREE.AmbientLight(0xcccccc)
scene.add(light)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(1, 1, 1)
scene.add(directionalLight)
const group = new THREE.Group()
scene.add(group)
group.translateX(-width * .5)
group.translateZ(-height * .5)
const shape = new THREE.Shape()
for(let i = 0; i <= 6; i ++) {
const angle = Math.PI / 3 * i + Math.PI / 2
const x = Math.cos(angle) * 14
const y = Math.sin(angle) * 14
if(i===0) shape.moveTo(x, y)
else shape.lineTo(x, y)
}
bins.forEach(bin => {
const material = new THREE.MeshStandardMaterial({
color: ycolor(bin.length)
})
const geometry = new THREE.ExtrudeGeometry(shape, { depth: 1, bevelEnabled: false, metalness: 1 })
const mesh = new THREE.Mesh(geometry, material)
mesh.geometry.scale(1, 1, y(bin.length))
mesh.position.set(bin.x, y(bin.length), bin.y)
mesh.rotation.x = Math.PI/2
group.add(mesh)
})
const shape2 = new THREE.Shape()
for(let i = 0; i <= 6; i ++) {
const angle = Math.PI / 3 * i + Math.PI / 2
const x = Math.cos(angle) * 7
const y = Math.sin(angle) * 7
if(i===0) shape2.moveTo(x, y)
else shape2.lineTo(x, y)
}
bins2.forEach(bin => {
const material = new THREE.MeshStandardMaterial({
color: ycolor(bin.length)
})
const geometry = new THREE.ExtrudeGeometry(shape2, { depth: 1, bevelEnabled: false })
const mesh = new THREE.Mesh(geometry, material)
mesh.geometry.scale(1, 1, y(bin.length))
mesh.position.set(bin.x, y(bin.length), bin.y-0.1)
mesh.rotation.x = Math.PI/2
group.add(mesh)
})
while(true) {
controls.update()
mutable debug = camera.position
renderer.render(scene, camera)
yield renderer.domElement
}
}