The avatar for @helloeujin
Youjin Shin | 신유진
Data Visualization Specialist | Previously @WashingtonPost @WallStreetJournal @MITSenseableCity
Public
3D
Edited
Feb 20, 2023
4 stars
2
3D
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 | FontLoader
three.js | Camera animation
three.js | GLTFLoaderthree.js | OrbitControls
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
lights = {
let group = new THREE.Group();
let hlight = new THREE.HemisphereLight(0xffffff, 0x888888);
let dlight = new THREE.DirectionalLight( 0xffffff, 0.56 );
dlight.position.set( 3, 3, 3 ).normalize();
let dlight2 = new THREE.DirectionalLight( 0xffffff, 0.56 )
dlight2.position.set( -2, -2, -2 ).normalize();
group.add( hlight, dlight, dlight2 );
return group;
}
Insert cell
Insert cell
Insert cell
function moveXRot(to) {
let pos = { val: cameraXRotation.rotation.x }; // current position
let tween = new TWEEN.Tween( pos )
.to( { val: to } , tweenTime)
.easing(tweenType)
.onUpdate(() => cameraXRotation.rotation.x = pos.val)
.delay( delayTime )
.start();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cameraZRotation = {
const cameraZRotation = new THREE.Group();
cameraZRotation.add(cameraXPosition);
return cameraZRotation;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
tweenType = TWEEN.Easing.Quadratic.Out; // TWEEN.Easing.Linear.None, TWEEN.Easing.Quadratic.Out
Insert cell
delayTime = 0
Insert cell
tweenTime = 1000
Insert cell
Insert cell
Insert cell

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.
Learn more