Computer Graphics & Visualization @ufrj.br
Published
Edited
May 22, 2021
1 fork
Importers
renderer.domElement
T = 1 / 3
T2 = 2 * T
textureImage = {
let [w, h] = [512, 512];
let ctx = DOM.context2d(w, h);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, T * w, T * h);
ctx.fillStyle = "red";
ctx.fillRect(0, T * h, T * w, T * h);
ctx.fillStyle = "green";
ctx.fillRect(T * w, 0, T * w, T * h);
ctx.fillStyle = "magenta";
ctx.fillRect(T * w, T * h, T * w, T * h);
ctx.fillStyle = "cyan";
ctx.fillRect(T2 * w, 0, T * w, T * h);
ctx.fillStyle = "yellow";
ctx.fillRect(T2 * w, T * h, T * w, T * h);
ctx.fillStyle = 'black';
ctx.font = "30px sans-serif";
ctx.fillText("top", 15, 30);
ctx.fillText("bottom", 15, 30 + T * h);
ctx.fillText("left", 15 + T * w, 30);
ctx.fillText("right", 15 + T * w, 30 + T * h);
ctx.fillText("front", 15 + T2 * w, 30);
ctx.fillText("back", 15 + T2 * w, 30 + T * h);
return ctx.canvas;
}
texture = new THREE.CanvasTexture(textureImage)
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, 5);
return camera;
}
cube = {
let geometry = texCubeGeometry;
let material = new THREE.MeshStandardMaterial({
color: 0xffffff,
map: texture
});
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.
