domElement = {
let controlPanel = {
cameraControls: {
cloudRotationSpeed: 0.001,
},
surfaceControls: {
bumpScale: 0.02,
viewClouds: true,
reverseColor: false,
},
lightControls: {
pointLight: true,
ambientLight: false
}
};
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 500);
camera.position.z = 2.5;
const renderer = new THREE.WebGLRenderer({antialias: true});
const canvas = renderer.domElement;
renderer.setSize(width, height);
renderer.render(scene, camera);
// orbit controls
const controls = new THREE.OrbitControls(camera, canvas);
controls.enablePan = false;
controls.maxDistance = 5;
controls.minDistance = 1.5;
// add light - directional, ambient
const lights = addLight();
lights.map(light => scene.add(light));
// add meshes - start, cloud, globe
const meshes = await addMeshes();
const cloud = meshes[1];
meshes.map(mesh => scene.add(mesh));
addGUI(lights, meshes, controlPanel);
function render() {
stats.update();
requestAnimationFrame( render );
cloud.rotation.y -= controlPanel.cameraControls.cloudRotationSpeed;
renderer.render(scene, camera);
}
render();
return canvas;
}
loader = new THREE.TextureLoader();
height = 500
Stats = require('stats-js')
dat = require('dat.gui');
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.
