如何在Three.js中使用相机作为纹理图像 [英] How to use camera as texture image in Three.js

问题描述

在three.js中，我正在尝试创建一个纹理，其图像是从相机中查看的当前场景。使用CubeCamera创建类似的效果已有详细记录;我使用CubeCamera创建了一个场景示例来说明我的目标：

In three.js, I am trying to create a texture whose image is the current scene as viewed from a Camera. Using a CubeCamera to create a similar effect is well-documented; and with CubeCamera I have created an example of a scene to illustrate my goal at:

http://stemkoski.github.com/Three.js/Camera-Texture-Almost.html

但是，我想使用常规相机（而不是CubeCamera）作为纹理。我怎么能这样做？

However, I would like to use a regular Camera (rather than a CubeCamera) as the texture. How could I do this?

推荐答案

理想情况下这可行。

初始值：

renderTarget = new THREE.WebGLRenderTarget( 512, 512, { format: THREE.RGBFormat } );

var planelikeGeometry = new THREE.CubeGeometry( 400, 200, 200 );
var plane = new THREE.Mesh( planelikeGeometry, new THREE.MeshBasicMaterial( { map: renderTarget } ) );
plane.position.set(0,100,-500);
scene.add(plane);

渲染：

renderer.render( scene, topCamera, renderTarget, true );
renderer.render( scene, topCamera );

它几乎可以，但我们有一些未完成的业务与y翻转纹理在这里破坏党。

And it almost does, but we have some unfinished business with y-flipped textures that ruins the party here.

所以目前最好的解决方案是使用中间四边形来翻转纹理（也保存一个渲染）：

So the best solution at the moment is to use the intermediry quad for flipping the texture (also saves a render):

http://mrdoob.github.com/three.js/ examples / webgl_rtt.html

这篇关于如何在Three.js中使用相机作为纹理图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！