Three.js将图像放置在镜头前

Question

我正在尝试为一个项目制作一个飞行模拟器，并且试图在我的相机前放置一个座舱图像，该图像由FirstPersonControls控制，我已经尝试了很多方法，但是我无法使其正常工作。

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

我在一个Codepen项目中运行了它

这是我要放置图像的地方。

    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 )