使用three.js模拟电视摄像机的静态图像

如何解决使用three.js模拟电视摄像机的静态图像

我们已经实现了投影电视摄像机在屏幕上看到的东西。

但是我们有一个问题。在整个场景中移动时，屏幕中的投影也会移动。我们希望电视摄像机看到的屏幕内有静态图像。 （电视摄像机没有移动，它处于静态位置，只有用户使用鼠标和箭头键移动）。

模拟电视摄像机所见内容的代码如下：

const cameraRenderTarget = new WebGLCubeRenderTarget( 512,512,{
   format: RGBFormat,generateMipmaps: true,minFilter: LinearMipmapLinearFilter,encoding: sRGBEncoding
});

const tvCamera = new CubeCamera(50,1000,cameraRenderTarget);
const cameraMesh = scene.getObjectByName(cameraNames[i]); // one of the cameras in the television set
const cameraTargetMesh = scene.getObjectByName(camerasTarget); // table in the television set
let position = new Vector3();
let positionLookAt = new Vector3();

updatePosition(cameraMesh,position); // get the position of one of the cameras in the television set
updatePosition(cameraTargetMesh,positionLookAt); // get the position of the table in the television set

tvCamera.position.copy(position);
tvCamera.lookAt(positionLookAt);

scene.add(tvCamera);
tvCamera.update(renderer,scene);

创建屏幕以显示电视摄像机正在观看的内容：

const planeMaterial = new MeshPhongMaterial({ emissive: 0xffffff,envMap: camera.renderTarget});
const plane = new PlaneGeometry(78,45);
const screenMesh = new Mesh(plane,planeMaterial);

screenMesh.position.set(tvPosition.x,tvPosition.y,tvPosition.z + 2);
screenMesh.rotateX(0.2);
screenMesh.rotateY(screenMesh.rotation.y - 0.3);
screenMesh.rotateZ(screenMesh.rotation.z + 0.06);

scene.add(screenMesh);

渲染功能代码：

render() {
    if(!renderer.autoClear) {
        renderer.clear();
    }

    controls.enableDamping = true;
    controls.dampingFactor = 1;
    controls.enableZoom = true;

    screenMesh.visible = false;
    tvCamera.update(renderer,scene);
    screenMesh.visible = true;
    

    renderer.render(scene,mainCamera);
}

我试图插入图像以帮助您了解电视机和屏幕，但是我不允许这样做。

也许我们使用的相机类型（CubeCamera）不正确，这就是投影电视相机的图像在用户在场景上移动的同时移动的原因。

请帮忙吗？预先感谢。