2012-07-04 22 views
5

three.jsでは、カメラから見たときの画像が現在のシーンであるテクスチャを作成しようとしています。 CubeCameraを使用して同様の効果を作成する方法については十分に文書化されています。そしてCubeCameraと私はで私の目標を説明するために、シーンの例を作成しました:Three.jsでカメラをテクスチャ画像として使用する方法

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

しかし、私は、テクスチャとして、通常のカメラ(というよりもCubeCamera)を使用したいと思います。どうすればこのことができますか?

+2

Three.jsレンダリングとテクスチャの例を見ましたか? http://mrdoob.github.com/three.js/examples/webgl_rtt.html – WestLangley

答えて

5

理想的にはこれが機能します。

INIT:

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-裏返しテクスチャといくつかの未完の仕事を持っています。

だから、現時点での最善の解決策は、テクスチャを反転させるためintermediryクワッドを使用することです(またレンダリングセーブ):

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

3

mrdoobの例や提案に基づいて、私は作業例を作成しました

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

01の例のチュートリアルスタイルThree.jsシリーズの私のシリーズの一部:で利用できる非常に詳細なコメント付き

http://stemkoski.github.com/Three.js/

+0

'TrackballControls'がうまくいけばよかったですが、再帰をもう少し理解できました:) – mrdoob

+0

Safari 5.1で何か問題が起こっています.7とFirefox 13.0.1 - 私のマシンでは、少なくとも。 (Chrome 20.0.1132.47で正常に動作します)Mac OS X Lion 10.7.4、AMD Radeon HD 6750M 512 MB Screenshot:http://imgur.com/nfPEi – WestLangley

+0

これはかなり奇妙です...起こっていることは... http://stemkoski.github.com/Three.js/の他のThree.jsチュートリアルでも同様の効果が得られますか? –

関連する問題