Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
deck.gl | population density map of South Koreathree.js | Physics basicthree.js | Shader (galaxy)three.js | Shader patternsthree.js | Shader (Sea)three.js | Shader basicdeck.gl | LineLayer + Tooltipdeck.gl | TripsLayer + Animationdeck.gl | HexagonLayer + Camera Animationthree.js | Camera animationthree.js | GLTFLoaderthree.js | OrbitControls
three.js | FontLoader
{
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});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
renderer.setClearColor(0xffffff);
return renderer;
}
scene = {
// scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);
// // axes helper
// const axesHelper = new THREE.AxesHelper(1);
// scene.add(axesHelper);
// font loader
const textGeometry = new THREE.TextGeometry("Hello Donuts", {
font: font,
size: 0.5,
height: 0.2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
textGeometry.center();
const text = new THREE.Mesh(textGeometry, material);
scene.add(text);
// donuts
for (let i = 0; i < 300; i++) {
const donut = new THREE.Mesh(donutGeometry, material);
donut.position.x = (Math.random() - 0.5) * 10;
donut.position.y = (Math.random() - 0.5) * 10;
donut.position.z = (Math.random() - 0.5) * 10;
donut.rotation.x = Math.random() * Math.PI;
donut.rotation.y = Math.random() * Math.PI;
const scale = Math.random() * 0.5;
donut.scale.set(scale, scale, scale);
scene.add(donut);
}
return scene;
}
// fov, aspect, near, far
camera = {
const camera = new THREE.PerspectiveCamera(
75,
width / height,
0.1,
120
);
camera.position.set(1, 1, 2)
return camera
}
font = await new THREE.FontLoader().parse(thisFont);
thisFont = await FileAttachment("helvetiker_regular.typeface.json").json()
material = new THREE.MeshMatcapMaterial({matcap: matcapTexture});
matcapTexture = {
const matcapTexture = new THREE.Texture(await FileAttachment("8.png").image());
matcapTexture.needsUpdate = true;
return matcapTexture;
}
donutGeometry = new THREE.TorusBufferGeometry(0.3, 0.2, 20, 45);
THREE = {
// const THREE = window.THREE = await require('three');
// await require('three/examples/js/controls/OrbitControls.js').catch(() => {});
// await require('three/examples/js/loaders/GLTFLoader.js').catch(() => {});
// return 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(() => {});
await require('three@0.130.0/examples/jsm/loaders/FontLoader.js').catch(() => {});
await require('three@0.130.0/examples/jsm/geometries/TextGeometry.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.
