mainLight = {
const light = new THREE.DirectionalLight(0xffffff, 3.0);
light.position.set(10, 10, 10);
return light;
}
{
let scene,
height=400;
// create a Scene
scene = new THREE.Scene();
// Set the background color
scene.background = new THREE.Color('#00DDDC');
scene.add(mainLight,ambientLight)
scene.add(cubeGroup);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.3;
controls.rotateSpeed = 0.1;
invalidation.then(() => {
console.log('invalidated')
renderer.setAnimationLoop( null );
controls.dispose();
renderer.dispose();
});
renderer.setAnimationLoop(() => {
update(mutable i++);
render(scene);
controls.update()
})
yield renderer.domElement
}
mutable i = 1
function update() {
/*********** PUT ANIMATION LOGIC HERE **********/
cubeGroup.rotation.x += 0.001;
cubeGroup.rotation.y += 0.001;
cubeGroup.rotation.z += 0.001;
/***********************************************/
}
function render(scene) {
renderer.render(scene, camera);
}
renderer = {
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
return renderer;
}
cubeGroup = {
const group = new THREE.Group();
group.add(cubeMesh);
return group;
}
cubeMesh = {
const cubeMesh = new THREE.Mesh( cubeGeometry, cubeMaterial );
return cubeMesh;
}
cubeMaterial ={
const cube = new THREE.MeshStandardMaterial({
color: '#F8CE3B',
flatShading: true
});
cube.color.convertSRGBToLinear();
return cube;
}
cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
ambientLight = {
const light = new THREE.HemisphereLight(0xddeeff, 0x202020, 9);
return light;
}
height = 400
fov = 25
aspect = width / height
near = 0.1
far = 1000
camera = {
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-4, 2, 4);
return camera;
}
THREE = {
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
return window.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.
