I have successfully implemented a rotating 3D globe using three.js with the code provided below.
HTML
<canvas id="canvas"></canvas>
JS
let camera;
let renderer;
function main()
{
const canvas = document.querySelector('#canvas');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;
scene.add(camera);
renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true,});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.autoClear = false;
renderer.setClearColor(0x00000, 0.0);
// create earthgeometry
const earthgeometry = new THREE.SphereGeometry(0.6,32,32);
const eatrhmaterial = new THREE.MeshPhongMaterial({
roughness : 1,
metalness:0,
map: THREE.ImageUtils.loadTexture('texture/earthmap1k.jpg'),
bumpMap: THREE.ImageUtils.loadTexture('texture/earthbump.jpg'),
bumpScale: 0.3,
});
const earthmesh = new THREE.Mesh(earthgeometry,eatrhmaterial);
scene.add(earthmesh);
// set ambientlight
const ambientlight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientlight);
// set point light
const pointerlight = new THREE.PointLight(0xffffff,0.9);
// set light position
pointerlight.position.set(5,3,5);
scene.add(pointerlight);
const animate = () =>{
requestAnimationFrame(animate);
earthmesh.rotation.y += 0.0015;
render();
}
const render = () => {
renderer.render(scene,camera);
}
animate();
}
window.onload = main;
Now I am looking to add an image avatar that will be attached to the globe and rotate along with it. You can see the desired effect in this reference image:
I need assistance on how to achieve this effect in three.js. Any help or guidance is appreciated. Thank you!
If you want to test with my globe images, you can download them here: ( )