π
π
π
π
Azure Mixed Reality Docs
Searchβ¦
Azure Mixed Reality Curriculum
What is the Metaverse?
Unity Lessons
WebXR Lessons
3D on the Web
Concepts
Project
How to create a basic 3D scene?
BabylonJS Scene
ThreeJS Scene
AFrame Scene
How to create a globe visualization with ThreeJS
Lighting your scene
3D Performance
What could go wrong?
Resources
WebXR Device APIs
A-Frame
Three.js
Babylon.js
WebXR Meetups
Resources
Unreal Engine Lessons
Artificial Intelligence(AI) Lessons
Exercises
FAQ
Glossary
How to contribute?
Powered By
GitBook
How to create a globe visualization with ThreeJS
Checkout the github repo:
https://github.com/Yonet/WebXRWorkshop
β
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
.
Previous
AFrame Scene
Next
Lighting your scene
Last modified
1yr ago
Export as PDF
Copy link
Contents
Texture and Bump map
Exercise: