Published
Edited
Sep 24, 2020
1 fork
1 star
intersectedObject = {
// this is still a bit hacky, we need a reference for the last intersected object
if(this) {
this.object.material.emissive.setHex( 0x000000 )
}
if(intersects[0]){
intersects[0].object.material.emissive.setHex( 0xff0000 )
return intersects[0]
}
}
intersects = {
// theta is changing, so is the camera. we can remove theta here if the camera is stationary
theta;
raycaster.setFromCamera( mouse, camera );
return raycaster.intersectObjects( scene.children )
}
mouse = Generators.observe(notify => {
const mouse = new THREE.Vector2()
const mousemoved = event => {
console.log(event)
mouse.x = ( event.layerX / width ) * 2 - 1,
mouse.y = - ( event.layerY / height ) * 2 + 1
notify(mouse);
}
canvas.addEventListener("mousemove", mousemoved);
return () => window.removeEventListener("mousemove", mousemoved);
})
theta = {
let i = 0;
while (true) {
yield i+=0.1;
}
}
animation = {
let radius = 500;
camera.position.x = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
camera.position.y = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
camera.position.z = radius * Math.cos( THREE.MathUtils.degToRad( theta ) );
camera.lookAt( scene.position );
camera.updateMatrixWorld();
renderer.render(scene, camera);
}
raycaster = new THREE.Raycaster()
camera = {
const aspect = width / height;
const frustumSize = 1000;
const camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
return camera;
}
light = {
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 1 ).normalize();
invalidation.then(() => scene.remove(light));
scene.add(light);
return light;
}
height = width/2
THREE = {
const THREE = window.THREE = await require('three@0.120.1/build/three.min.js');
return THREE;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
