Computer Graphics & Visualization @ufrj.br
renderer.domElement
THREE = require("three")
renderer = new THREE.WebGLRenderer ({canvas:html`<canvas width=640 height=480>`})
camera = {
const 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;
}
}
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.
