Data Visualization Engineer
md`# ThreeJS skeleton`
{
var scene,
camera,
renderer,
cubeMesh,
controls,
height = 380;
function createControls () {
controls = new Three.OrbitControls(camera, renderer.domElement);
}
function createCamera () {
const fov = 35; // Field of View. In DEGREES [1, 179]
const aspect = width / height;
const near = 0.1; // the near clipping plane
const far = 100; // the far clipping plane
camera = new Three.PerspectiveCamera( fov, aspect, near, far );
camera.position.set(-4, 4, 10);
}
function createGeometries () {
const cubeGeometry = new Three.BoxBufferGeometry( 2, 2, 2 );
return {
cubeGeometry
};
}
function createMaterials () {
const cubeMaterial = new Three.MeshStandardMaterial({
color: 0x800080
});
return {
cubeMaterial
};
}
function createLights () {
const ambientLight = new Three.HemisphereLight(
0xddeeff, // sky color
0x202020, // ground color
5, // intensity
);
const mainLight = new Three.DirectionalLight( 0xffffff, 5 );
mainLight.position.set( 10, 10, 10 );
scene.add( ambientLight, mainLight );
}
function createObjects () {
const geometries = createGeometries();
const materials = createMaterials();
// create a Mesh containing the geometry and material
const mesh = new Three.Mesh( geometries.cubeGeometry, materials.cubeMaterial );
// add the mesh to the scene
scene.add( mesh );
return {
mesh
};
}
function createRenderer () {
// create the renderer
renderer = new Three.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
}
function update() {
// Animation logic
cubeMesh.rotation.z += 0.01;
cubeMesh.rotation.x += 0.01;
cubeMesh.rotation.y += 0.01;
}
function render() {
renderer.render(scene, camera);
}
function init () {
scene = new Three.Scene();
scene.background = new Three.Color( 'skyblue' );
createCamera();
createRenderer();
createControls();
createLights();
cubeMesh = createObjects().mesh;
renderer.setAnimationLoop(() => {
update();
render();
});
}
function onWindowResize() {
camera.setAnimationLoop = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
init();
window.addEventListener('resize', onWindowResize);
yield renderer.domElement;
}
Three = {
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
return window.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.
