时间戳

首页 > 解决方案 > 三.js 将图像放在摄像头前

javascript - 三.js 将图像放在摄像头前

问题描述

我正在尝试为一个项目制作飞行模拟器，并且我正在尝试将驾驶舱图像放在我的相机前，该相机由 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();
  }

任何帮助，将不胜感激

标签： javascript3dthree.js

解决方案

另一种选择是将驾驶舱放在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

推荐阅读