在 Three.js Globe 上添加图像头像时出现问题

Question

我正在使用 Three.js 准备一个 3D 地球仪，并且我已经使用以下代码实现了旋转地球仪。

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;

现在我想添加一些图像头像，它也会与地球仪相连并随地球仪旋转。参考：https://zinannadeem.sirv.com/Images/globe.gif（我要找的）

我正在寻求帮助，如何在 Three.js 地球仪上添加一些图像头像，该地球仪将随地球仪本身旋转？

如果你想用我的地球图像进行测试，你可以在这里获取（https://zinannadeem.sirv.com/Images/earthmap1k.jpghttps://zinannadeem.sirv.com/Images/earthbump.jpg）

Answer 1

只需使用材质创建平面几何体并将头像图像指定为材质上的地图参数（就像对地球所做的那样）。然后将平面 (globe.attach(avatarMesh)) 连接到地球仪并将其放置在正确的位置。要使头像图像始终显示在相机上，请使用lookAt函数。

avatarMesh.lookAt(camera.position)