Azure Mixed Reality Docs
Search…
How to create a globe visualization with ThreeJS
- npm install dependencies
- Add a sphere geometry
- Add light
1
//light
2
const light = new HemisphereLight(0xffffff, 0xbbbbff, 1);
3
light.position.set(0.5, 1, 0.25);
4
scene.add(light);
Copied!
Texture and Bump map
Checkout the example below to see how bump map creates more realistic results.
Bumpmap skin example
three.js examples
- Add Texture Loader and bump and texture maps
1
// Material
2
const texture = new TextureLoader().load("assets/images/globe/earthmap4k.jpg");
3
const bumpMap = new TextureLoader().load("assets/images/globe/earthbump4k.jpg");
4
const material = new MeshPhongMaterial({
5
// color: 0xffff00 * Math.random(),
6
specular: 0x222222,
7
shininess: 25,
8
bumpMap: bumpMap,
9
bumpScale: 10,
10
map: texture,
11
});
Copied!
Exercise:
- 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 1yr ago
Export as PDF
Copy link