Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
deck.gl | population density map of South Koreathree.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 | FontLoaderthree.js | Camera animationthree.js | GLTFLoaderthree.js | OrbitControls
three.js | Physics basic
renderer.domElement
{
b1,
createBox(Math.random(), Math.random(), Math.random(), {
x: (Math.random() - 0.5) * 3,
y: 3,
z: (Math.random() - 0.5) * 3
});
}
{
b2,
createSphere(Math.random() * 0.5, {
x: (Math.random() - 0.5) * 3,
y: 3,
z: (Math.random() - 0.5) * 3
});
}
{
b3, reset();
}
reset = () => {
for (const object of objectsToUpdate) {
// Remove body
// object.body.removeEventListener("collide", playHitSound);
world.removeBody(object.body);
// Remove mesh
scene.remove(object.mesh);
}
objectsToUpdate.splice(0, objectsToUpdate.length);
}
{
let oldElapsedTime = 0;
const clock = new THREE.Clock();
while (true) {
// Time
const elapsedTime = clock.getElapsedTime();
// const deltaTime = clock.getDelta();
const deltaTime = elapsedTime - oldElapsedTime;
oldElapsedTime = elapsedTime;
// Update physics world
// -> (time step (1/60 => 60 fps), how much time passed, how much iterations the world can apply)
world.step(1 / 60, deltaTime, 3);
for (const object of objectsToUpdate) {
object.mesh.position.copy(object.body.position);
object.mesh.quaternion.copy(object.body.quaternion);
}
renderer.render(scene, camera);
yield null;
}
}
objectsToUpdate = []
sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
sphereMaterial = new THREE.MeshStandardMaterial({
color: 0x049ef4,
metalness: 0.3,
roughness: 0.4
})
createSphere = (radius, position) => {
// Three.js mesh
const mesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
mesh.castShadow = true;
mesh.scale.set(radius, radius, radius);
mesh.position.copy(position);
scene.add(mesh);
// Cannon.js body
const shape = new CANNON.Sphere(radius);
const body = new CANNON.Body({
mass: 1,
position: new CANNON.Vec3(0, 3, 0),
shape,
material: defaultMaterial
});
body.position.copy(position);
// body.addEventListener("collide", playHitSound);
world.addBody(body);
// Save in objects to update
objectsToUpdate.push({ mesh, body });
}
boxGeometry = new THREE.BoxGeometry(1, 1, 1);
boxMaterial = new THREE.MeshStandardMaterial({
color: 0x049ef4,
metalness: 0.3,
roughness: 0.4
})
createBox = (width, height, depth, position) => {
// Three.js
const mesh = new THREE.Mesh(boxGeometry, boxMaterial);
mesh.castShadow = true;
mesh.scale.set(width, height, depth);
mesh.position.copy(position);
scene.add(mesh);
// Cannon.js
const shape = new CANNON.Box(
new CANNON.Vec3(width * 0.5, height * 0.5, depth * 0.5)
);
const body = new CANNON.Body({
mass: 1,
position: new CANNON.Vec3(0, 3, 0),
shape,
material: defaultMaterial
});
body.position.copy(position);
// body.addEventListener("collide", playHitSound);
world.addBody(body);
// Save in objects to update
objectsToUpdate.push({ mesh, body });
}
floor = {
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(10, 10),
new THREE.MeshStandardMaterial({
color: "#222222",
metalness: 0.3,
roughness: 0.4
})
);
floor.receiveShadow = true;
floor.rotation.x = -Math.PI * 0.5;
return floor;
}
defaultMaterial = {
const defaultMaterial = new CANNON.Material("default");
const defaultContactMaterial = new CANNON.ContactMaterial(
defaultMaterial,
defaultMaterial,
{
friection: 0.1,
restitution: 0.7
}
);
world.defaultContactMaterial = defaultContactMaterial;
return defaultMaterial;
}
floorBody = {
const floorShape = new CANNON.Plane(); // infinate plane, everything below nothing
const floorBody = new CANNON.Body();
floorBody.mass = 0; // object is static and won't move (can be omitted)
floorBody.addShape(floorShape);
floorBody.quaternion.setFromAxisAngle(
new CANNON.Vec3(-1, 0, 0),
Math.PI * 0.5
); // rotation (-Math.PI*0.5 not working)
world.addBody(floorBody);
return floorBody;
}
world = {
const world = new CANNON.World();
world.broadphase = new CANNON.SAPBroadphase(world);
world.allowSleep = true;
world.gravity.set(0, -9.82, 0);
return world;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.