2012-07-04 12 views
5

In three.js, sto cercando di creare una texture la cui immagine è la scena corrente vista da una fotocamera. L'uso di una CubeCamera per creare un effetto simile è ben documentato; e con CubeCamera ho creato un esempio di una scena per illustrare il mio obiettivo a:Come utilizzare la fotocamera come immagine texture in Three.js

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

Tuttavia, vorrei usare una normale fotocamera (piuttosto che un CubeCamera) come texture. Come potrei farlo?

+2

Hai esaminato l'esempio di render-to-texture di Three.js? http://mrdoob.github.com/three.js/examples/webgl_rtt.html – WestLangley

risposta

5

Idealmente questo dovrebbe funzionare.

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); 

Render:

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

E lo fa quasi, ma abbiamo qualche affare in sospeso con texture y-capovolto che rovina la festa qui.

Quindi la soluzione migliore al momento è quello di utilizzare il quad intermediry per lanciare la texture (salva anche un rendering):

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

3

Sulla base di esempio e suggerimenti di mrdoob, ho creato un esempio di lavoro con commenti molto dettagliati, disponibili presso:

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

parte della mia serie di tutorial di stile serie Three.js di esempi a

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

+0

È stato più bello quando sono stati installati i "TrackballControls", potresti apprezzare ancora una volta la ricorsione :) – mrdoob

+0

Sta accadendo qualcosa di brutto in Safari 5.1 .7 e Firefox 13.0.1 - sulla mia macchina, almeno. (Funziona OK in 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

Questo è piuttosto strano ... Non ho idea del perché questo potrebbe sta succedendo ... qualche altro mio tutorial su Three.js su http://stemkoski.github.com/Three.js/ produce effetti simili? –

Problemi correlati