Computer Graphics & Visualization @ufrj.br
mutable labSize = [1,3,3]
// Thickness of the walls w.r.t. cell
thickness = 0.1
//
// A mesh showing a cheery message.
//
youWin = {
let geom = textGeometry("You win!")
let mesh = new THREE.Mesh (geom,new THREE.MeshStandardMaterial({color: 0xff0000 }))
let {center,radius} = geom.boundingSphere;
let s = 1/radius
mesh.position.set(-center.x*s,-center.y*s,-center.z*s);
mesh.scale.set (s,s,s);
return mesh;
}
//
// The scene
//
scene = {
let scene = new THREE.Scene();
scene.background = new THREE.Color(0xCCCCCC);
scene.add(cubes)
scene.add(lights)
return scene
}
// Starts the interaction
start = {
let path = labyrinth.longestPath;
camera.gridCoords = path[0];
labyrinth.checkFlags[path[0]].visible = true;
camera.position.set (...boxPos(...camera.gridCoords));
camera.quaternion.identity()
renderer.render(scene,camera)
}
// Quaternions for the 4 3d rotations
rotations = {
let halfTurn = Math.PI/2;
let rot = (dx,dy) => new THREE.Quaternion().setFromEuler(new THREE.Euler(dx*halfTurn,dy*halfTurn,0));
return {
left: rot(0,1),
right: rot (0,-1),
up: rot (1,0),
down : rot (-1,0)
}
}
// {
// let canvas = DOM.canvas(800,600)
// let renderer = new THREE.WebGLRenderer ({canvas, antialias:true});
// let material = new THREE.MeshStandardMaterial ( 0x1111ff );
// let path = labyrinth.longestPath;
// let curve = new THREE.Curve();
// curve.getPoint = function (t) {
// let i = t * (path.length-1)
THREE = require('three@0.119.1')
import {textGeometry} from '@esperanc/3d-fonts'
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.
