How to create a globe visualization with ThreeJS
- npm install dependencies
- Add a sphere geometry
- Add light
//light
const light = new HemisphereLight(0xffffff, 0xbbbbff, 1);
light.position.set(0.5, 1, 0.25);
scene.add(light);
Checkout the example below to see how bump map creates more realistic results.
Bumpmap skin example
- Add Texture Loader and bump and texture maps
// Material
const texture = new TextureLoader().load("assets/images/globe/earthmap4k.jpg");
const bumpMap = new TextureLoader().load("assets/images/globe/earthbump4k.jpg");
const material = new MeshPhongMaterial({
// color: 0xffff00 * Math.random(),
specular: 0x222222,
shininess: 25,
bumpMap: bumpMap,
bumpScale: 10,
map: texture,
});
- Create another sphere slightly bigger than the earth mesh and call it clouds.
- Assign MeshPhongMaterial and add the properties: {opacity:0.8, transparent: true}
- Load and assign earhclouds4k.png from the assets folder. Assign the texture as map of clouds material.
- Set the position of the clouds same as the earth mesh.
- Add animation slightly faster than earth.
To see how to map real time tweet location data to your globe using web sockets, check out Tweet Migration project.
Last modified 2yr ago