Question

我正在尝试实现与此类似的东西...

https://stemkoski.github.io/Three.js/Camera-Texture.html

...作为a框架组件。但是，我在四边形上只得到一个空白白色，应该是“监视”这台额外的相机。进入VR模式时变为黑色。

这是我的代码：

AFRAME.registerComponent('viewfinder', {
schema:{
    //
},
init:function(){
    this.renderer = new THREE.WebGLRenderer({antialias:true});
    this.renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild(this.renderer.domElement);

    this.dronecamera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    this.dronecamera.position.z=5;
    this.monitorbuffercam = new THREE.OrthographicCamera(window.innerWidth/-2, window.innerWidth/2, window.innerHeight/2, window.innerHeight/-2, -10000, 10000);
    this.monitorbuffercam.position.z=1;

    this.buffertexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { format: THREE.RGBFormat });
    this.monitortexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { format: THREE.RGBFormat });

    this.bufferscene = new THREE.Scene();
    var ambientlight = new THREE.AmbientLight(0xffffff);
    this.bufferscene.add(ambientlight);
    var bufferplaneG = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight);
    var bufferplaneM = new THREE.MeshBasicMaterial({map:this.buffertexture});
    this.bufferplane = new THREE.Mesh(bufferplaneG, bufferplaneM);
    this.bufferscene.add(this.bufferplane);
    this.bufferscene.add(this.monitorbuffercam);
    this.el.sceneEl.object3D.add(this.dronecamera);

    this.monitorplaneG = new THREE.PlaneGeometry(10, 10);
    this.monitorplaneM = new THREE.MeshBasicMaterial({map:this.monitortexture});
    this.monitor = new THREE.Mesh(this.monitorplaneG, this.monitorplaneM);
    this.el.setObject3D('monitor', this.monitor);
},

tick:function(){

    var r = this.renderer;
    var s = this.el.sceneEl.object3D;
    var bs = this.bufferscene;
    var dc = this.dronecamera;
    var bt = this.buffertexturee;
    var mbc = this.monitorbuffercam;
    var mt = this.monitortexture;
    requestAnimationFrame(draw);
    function draw(){
        r.render(s, dc, bt, true);
        r.render(bs, mbc, mt, true);

    }
}

}）;

任何帮助将不胜感激。我尝试遵循three.js示例中的模型，从主场景中的摄影机渲染到单独的屏幕外场景中的四边形纹理贴图，然后将正交摄影机指向它，并将该摄影机的视图渲染为回到主场景中的纹理贴图。我有一种直觉，就是我忘记了一些样板代码，或者我做错了。

谢谢！

Answer 1

我不确定您要寻找的内容是什么，但是也许this answer到AFrame: How to render a camera to a texture会有帮助。简而言之，它显示了如何使用为辅助相机创建渲染器的组件，该组件可被称为对象的material。

在A帧内渲染为纹理

1 个答案: