Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
{
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
renderer.render(scene, camera);
return renderer.domElement;
}
renderer = {
// const renderer = new THREE.WebGLRenderer({ antialias: true });
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
renderer.setClearColor(0xffffff);
// renderer.setClearColor(0x111111);
return renderer;
}
scene = {
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(1);
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
const directLight = new THREE.DirectionalLight(0xffffff, 0.72);
directLight.position.set(300, 300, 300);
scene.add(avocado);
// scene.add(axesHelper);
scene.add(ambientLight);
scene.add(directLight);
return scene;
}
camera = {
const fov = 45;
const aspect = width/height;
const near = 0.01;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(2, .6, 2);
// camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
height = 500
avocado = {
const gltfLoader = new THREE.GLTFLoader();
const blob = await FileAttachment("Avocado.glb").blob();
const url = URL.createObjectURL(blob);
const gltf = await new Promise(resolve => gltfLoader.load(url, gltf => resolve(gltf)));
const avocado = gltf.scene.children[0];
avocado.position.y = -.53;
avocado.scale.set(19, 19, 19);
return avocado;
}
////////////////////////////////////// In Javascript
// let loader = new GLTFLoader();
// let autocar;
// loader.load('assets/auto-car.glb', (gltf) => {
// autocar = gltf.scene;
// autocar.rotation.y = Math.PI;
// autocar.position.y = 0.001;
// autocar.visible = true;
// autocar.scale.set(0.985, 0.985, 0.985);
// scene.add(autocar);
// }
// );
TWEEN = await require('tween.js')
THREE = {
// const THREE = window.THREE = await require('three');
const THREE = window.THREE = await require('three@0.105.1/build/three.min.js');
await require('three@0.105.1/examples/js/controls/OrbitControls.js').catch(() => {});
await require('three@0.105.1/examples/js/loaders/GLTFLoader.js').catch(() => {});
// await require('three/examples/js/controls/OrbitControls.js').catch(() => {});
// await require('three/examples/js/loaders/GLTFLoader.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.
