Public
Edited
Feb 6, 2023
2 stars
ThreeJS 3D Globe Earthquake PlotThreeJS Equirectangular Background (Inside of Sphere Geometry)
Equirectangular Background, Reflectivity/Refractiion (Scene Background)
Also listed in…
Sketches
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
threeScene({
width,
height,
visibility,
cam: { z: 180 },
update
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function* threeScene({
width,
height, // dimmensions
visibility = (e) => e, // for preventing updates when not visible
update, // update function, if not present, scene will be static
init, // init function, called with all base object for additional scene setup
cam = {}, // camera setup
addMeshes = defaultMesh, // adds meshes to scene
addLights = defaultLights, // adds lights to scene
createControls = defaultControls // setup controls
// backgroundColor = 0x8FBCD4 // bg color
}) {
const camera = cam.setup
? cam.setup({ width, height })
: defaultCamera({ ...cam, width, height });
const controls = createControls({ camera, element: renderer.domElement });

invalidation.then(() => (controls.dispose(), renderer.dispose()));

const lights = addLights(scene);
const meshes = addMeshes(scene);

if (init) {
init({ scene, renderer, camera, controls, lights, meshes });
}

if (update) {
while (true) {
update({ scene, renderer, camera, controls, lights, meshes });
renderer.render(scene, camera);
yield visibility(renderer.domElement);
}
} else {
controls.addEventListener("change", () => renderer.render(scene, camera));
renderer.render(scene, camera);
yield visibility(renderer.domElement);
}
}
Insert cell
createScene = function(color) {
const scene = new THREE.Scene();
scene.background = reflectionMap;
return scene;
}
Insert cell
reflectionMap = {
const textureLoader = new THREE.TextureLoader();
const backgroundImage = textureLoader.load(defaultBackgroundImage);
backgroundImage.mapping = THREE.EquirectangularReflectionMapping;
backgroundImage.encoding = THREE.sRGBEncoding;

return backgroundImage;
}
Insert cell
refractionMap = {
const textureLoader = new THREE.TextureLoader();
const backgroundImage = textureLoader.load(defaultBackgroundImage);
backgroundImage.mapping = THREE.EquirectangularRefractionMapping;
backgroundImage.encoding = THREE.sRGBEncoding;

return backgroundImage;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function defaultMesh(scene) {
const sphereGeometry = new THREE.IcosahedronGeometry( 20, 15 );
const sphereMesh = new THREE.Mesh( sphereGeometry, defaultSphereMaterial );
sphereMesh.name = "Center Sphere";
scene.add( sphereMesh );

const mirrorGeometry = new THREE.BoxBufferGeometry( 30, 30, 3 );
const mirror = new THREE.Mesh( mirrorGeometry, defaultCubeMaterial );
mirror.position.y = -50;
mirror.name = "Mirror";
scene.add(mirror);

const cubeGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
const cube = new THREE.Mesh( cubeGeometry, defaultCubeMaterial );
cube.position.y = 80;
cube.name = "Cube";
scene.add(cube);

// const refractionSphere = new THREE.IcosahedronGeometry( 15, 15);
// const refractiveSphere = new THREE.Mesh( refractionSphere, refractiveMaterial );
// refractiveSphere.position.x = 50;
// scene.add(refractiveSphere);
return { sphereMesh, mirror, cube };
}
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