scene = {
const scene = new THREE.Scene();
scene.add(cube);
const light = new THREE.AmbientLight(0xc0c0c0);
scene.add(light);
const dLight1 = new THREE.DirectionalLight(0xff0000, 4);
dLight1.position.set(10, 2, 3);
scene.add(dLight1);
const dLight2 = new THREE.DirectionalLight(0x00cc66, 2);
dLight2.position.set(4, 8, 6);
scene.add(dLight2);
const dLight3 = new THREE.DirectionalLight(0x0000ff, 2);
dLight3.position.set(-5, -5, -5);
scene.add(dLight3);
// Add some light vectors to the scene to help understand where they are positioned.
scene.add(new THREE.DirectionalLightHelper(dLight1));
scene.add(new THREE.DirectionalLightHelper(dLight2));
scene.add(new THREE.DirectionalLightHelper(dLight3));
return scene;
}
cube = {
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial();
const cubeMesh = new THREE.Mesh(geometry, material);
// Create a wireframe for the cube
const wireframe = new THREE.EdgesGeometry(geometry);
const wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
const wireframeMesh = new THREE.LineSegments(wireframe, wireframeMaterial);
// Add wireframe as a child of the cube mesh so they move together
cubeMesh.add(wireframeMesh);
return cubeMesh;
}
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.
