The avatar for @grantcuster
Grant Custer
Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him.
Published
three.js tutorials
Edited
Aug 4, 2018
2 forks
38 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
camera = {
// Initial camera set-up
let aspect_ratio = width / viz_height;
let camera = new THREE.PerspectiveCamera(fov, aspect_ratio, near_plane, far_plane);
// Setting the camera position. These are the values you'll update to pan and zoom based on mouse input.
camera.position.set(0, camera_y, camera_z );
return camera;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pointsMaterial = new THREE.PointsMaterial({
size: point_size,
sizeAttenuation: sizeAttenuation,
vertexColors: THREE.VertexColors,
map: circle_sprite,
transparent: true
})
Insert cell
Insert cell
fov_height = {
let half_fov = fov/2;
let half_fov_radians = toRadians(half_fov);
let half_fov_height = Math.tan(half_fov_radians) * camera_z;
return half_fov_height * 2;
}
Insert cell
Insert cell
mutable scale = viz_height / fov_height
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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