ThreeJS 3D Globe Earthquake PlotEquirectangular Background, Reflectivity/Refractiion (Scene Background)
ThreeJS Equirectangular Background (Inside of Sphere Geometry)
Also listed in…
Sketches
update = ({ meshes, lights }) => {
meshes.cube.rotation.x += 0.01;
meshes.cube.rotation.y -= 0.01;
// lights.ambientLight.position.y += 1;
// lights.mainLight.position.y += 1;
}
function defaultMesh(scene) {
const shinyMaterial = new THREE.MeshPhongMaterial( {
color: 0x333333,
shininess: 1,
metalness: 1
});
const metalMaterial = new THREE.MeshStandardMaterial({
color: "#333333",
metalness: 1,
shininess: 1,
roughness: 0.4
});
const backgroundImageMaterial = new THREE.MeshBasicMaterial({
map: reflectionMap
});
const geometry = new THREE.BoxBufferGeometry( 2, 2, Math.random()*3 );
const cube = new THREE.Mesh( geometry, reflectiveMaterial );
cube.name = "Center Cube";
const nonreflectiveCube = new THREE.Mesh( geometry, shinyMaterial );
nonreflectiveCube.position.y -= 5;
nonreflectiveCube.position.x += 3;
nonreflectiveCube.position.z += 2;
const sphereGeometry = new THREE.SphereBufferGeometry( 200, 32, 32 );
sphereGeometry.scale( -1, 1, 1);
const sphere = new THREE.Mesh( sphereGeometry, backgroundImageMaterial );
scene.add(cube);
scene.add(nonreflectiveCube);
scene.add(sphere);
return {cube, nonreflectiveCube};
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
