Assistant professor in the Universitat de Girona.
In Fundació Visualització per a la Transparència (ViT).
In Master’s Degree in Visual Tools to Empower Citizens.
renderer.domElement
// Continuously updates
{
while (true) {
if(form.rotation === "Yes"){
object.rotation.x += 0.01;
object.rotation.z += 0.01;
}
renderer.render(scene, camera);
yield null;
}
}
height = 600
object = {
let material;
switch(form.option3){
case "Mesh normal":
material = new THREE.MeshNormalMaterial();
break;
case "Basic":
material = new THREE.MeshBasicMaterial( { color: form.color} );
break;
case "Phong":
material = new THREE.MeshPhongMaterial( { color: form.color} );
break;
case "Lambert":
material = new THREE.MeshLambertMaterial( { color: form.color} );
break;
default:
material = new THREE.MeshBasicMaterial( { color: form.color} );
break;
}
let geometry;
switch(form.object){
case "Cube":
geometry = new THREE.BoxGeometry(5, 5, 5);
break;
case "Knot Thorus":
geometry = new THREE.TorusKnotBufferGeometry( 5, 1, 100, 16 );
break;
default:
geometry = new THREE.BoxGeometry(5, 5, 5);
break;
}
const cube = new THREE.Mesh(geometry, material);
return cube;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
scene.add(object);
const dirLight = new THREE.DirectionalLight( 0xffffff, form.light_pow );
dirLight.position.set( - 0, 40, 50 );
dirLight.castShadow = true;
scene.add( dirLight );
return scene;
}
camera = {
const fov = form.cam_fov;
const aspect = width / height;
const near = 1;
const far = 1000;
let camera;
if(form.cam_type === "Perspective"){
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
}else{
camera = new THREE.OrthographicCamera(-10*aspect, 10*aspect, 10, -10, near, far);
}
camera.position.set(20, 20, -20)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
return 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.
