Data Visualization Engineer
md`# Train`
{
var scene,
camera,
renderer,
controls,
train,
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(-5, 5, 7);
}
function createGeometries () {
const nose = new Three.CylinderBufferGeometry(0.75, 0.75, 3, 12);
const cabin = new Three.BoxBufferGeometry( 2, 2.25, 1.5 );
const chimney = new Three.CylinderBufferGeometry(0.3, 0.1, 0.5);
// we can reuse a single cylinder geometry for all 4 wheels
const wheel = new Three.CylinderBufferGeometry( 0.4, 0.4, 1.75, 16 );
wheel.rotateX( Math.PI / 2 );
return {
nose,
cabin,
chimney,
wheel
}
}
function createMaterials () {
const body = new Three.MeshStandardMaterial( {
color: 0xff3333, // red
flatShading: true,
} );
// just as with textures, we need to put colors into linear color space
body.color.convertSRGBToLinear();
const detail = new Three.MeshStandardMaterial( {
color: 0x333333, // darkgrey
flatShading: true,
} );
detail.color.convertSRGBToLinear();
return {
body,
detail,
};
}
function createMeshes () {
train = new Three.Group();
scene.add(train);
const materials = createMaterials();
const geometries = createGeometries();
const nose = new Three.Mesh( geometries.nose, materials.body );
nose.rotation.z = Math.PI / 2;
nose.position.x = -1;
const cabin = new Three.Mesh( geometries.cabin, materials.body );
cabin.position.set( 1.5, 0.4, 0 );
const chimney = new Three.Mesh( geometries.chimney, materials.detail );
chimney.position.set( -2, 0.9, 0 );
const smallWheelRear = new Three.Mesh( geometries.wheel, materials.detail );
smallWheelRear.position.set( 0, -0.5, 0 );
const smallWheelCenter = smallWheelRear.clone();
smallWheelCenter.position.x = -1;
const smallWheelFront = smallWheelRear.clone();
smallWheelFront.position.x = -2;
const bigWheel = smallWheelRear.clone();
bigWheel.scale.set( 2, 2, 1.25 );
bigWheel.position.set( 1.5, -0.1, 0 );
train.add(
nose,
cabin,
chimney,
smallWheelRear,
smallWheelCenter,
smallWheelFront,
bigWheel
)
}
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 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
// train.position.x -= 0.01;
}
function render() {
renderer.render(scene, camera);
}
function init () {
scene = new Three.Scene();
scene.background = new Three.Color( 'skyblue' );
createCamera();
createRenderer();
createControls();
createLights();
createMeshes();
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.
