Computer Graphics & Visualization @ufrj.br
renderer.domElement
THREE = require ("three@0.119.1")
renderer = new THREE.WebGLRenderer ({canvas:html`<canvas width=640 height=480>`})
camera = {
let camera = new THREE.PerspectiveCamera(70, 4/3, 0.1, 100);
camera.position.set (0,0,2)
return camera;
}
cube = {
let geometry = new THREE.BoxGeometry(1,1,1)
let material = new THREE.MeshStandardMaterial({color: 0xff0000 });
return new THREE.Mesh(geometry,material);
}
light = {
let light = new THREE.DirectionalLight (0xffffff, 1);
light.position.set(1,1,10)
return light
}
scene = {
let scene = new THREE.Scene();
scene.background = new THREE.Color(0xCCCCCC);
scene.add(cube)
scene.add(light)
return scene
}
{
let xangle = 0, yangle = 0;
for (let frame = 0; ; frame++) {
xangle += 0.5*Math.PI/180;
yangle += 0.7*Math.PI/180;
cube.rotation.set(xangle,yangle,0);
renderer.render(scene,camera);
yield frame; // Observable way of creating an animation...
}
}
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.
