Data Visualization Engineer
md`# Table`
{
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, 13);
}
function createGeometries () {
const top = new Three.BoxBufferGeometry( 4, 0.1, 4 );
const leg = new Three.CylinderBufferGeometry( 0.15, 0.10, 2.5, 4 )
return {
top,
leg
};
}
function createMaterials () {
const wood = new Three.MeshStandardMaterial({
map:loader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
});
return {
wood
};
}
function createLights () {
const ambientLight = new Three.HemisphereLight(
0xddeeff, // sky color
0x202020, // ground color
3, // intensity
);
const mainLight = new Three.DirectionalLight( 0xffffff, 5 );
mainLight.position.set( 10, 10, 10 );
scene.add( ambientLight, mainLight );
}
function createTable () {
const table = new Three.Group();
scene.add(table);
const geometries = createGeometries();
const materials = createMaterials();
const top = new Three.Mesh( geometries.top, materials.wood );
top.position.y = 1.3;
const leg1 = new Three.Mesh( geometries.leg, materials.wood );
leg1.position.set(1.7, 0, 1.7)
leg1.rotation.y = -Math.PI / 4;
const leg2 = leg1.clone();
leg2.position.set(-1.7, 0, 1.7);
const leg3 = leg1.clone();
leg3.position.set(-1.7, 0, -1.7)
const leg4 = leg1.clone();
leg4.position.set(1.7, 0, -1.7)
table.add(
top,
leg1,
leg2,
leg3,
leg4
)
}
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
}
function render() {
renderer.render(scene, camera);
}
function init () {
scene = new Three.Scene();
scene.background = new Three.Color( 'skyblue' );
createCamera();
createRenderer();
createControls();
createLights();
createTable();
renderer.setAnimationLoop(() => {
update();
render();
});
}
function onWindowResize() {
camera.setAnimationLoop = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
init();
window.addEventListener('resize', onWindowResize);
yield renderer.domElement;
}
loader = new Three.TextureLoader()
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.
