Three.js将图像放在相机前

Question

我试图为一个项目制作一个飞行模拟器，我试图在我的相机前面放置一个驾驶舱图像，这是用FirstPersonControls控制的，我试过很多事情，但我不能使它工作。

这是我到目前为止所得到的：

我在：Codepen Project

中运行了这个

这是我尝试放置图片的地方。

    function onTextureLoad(texture) {
    console.log(texture);
    var geometry = new THREE.PlaneGeometry(2, 2, 0);
    var material = new THREE.MeshBasicMaterial({
     map: texture, transparent: true, opacity: 1 
    });

    var geometryco = new THREE.PlaneGeometry(100,100,100,100);
    var cockpit = new THREE.Mesh(geometryco, material);
    cockpit.position.set(0,20,0);

    scene.add(cockpit);

    render();
  }

任何帮助将不胜感激

Answer 1

另一个选择是将驾驶舱放在img标签中，该标签位于渲染器的画布前面：

HTML：

<img src="https://i.imgur.com/VfF0ada.png" style="position:absolute; width:100%; height:100%"/>

JS：

renderer = new THREE.WebGLRenderer({});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

https://codepen.io/prisoner849/pen/qYgKvz?editors=0010

Answer 2

让它成为相机的孩子，让它们一起移动。

camera.add( cockpit )
scene.add( camera )