渲染到帧内的纹理答案

【问题标题】：Rendering to texture within a-frame渲染到帧内的纹理
【发布时间】：2018-12-28 03:38:53
【问题描述】：

我正在尝试实现与此非常相似的东西......

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

... 作为一个框架组件。然而，我在四边形上得到的只是一个空白的白色，它应该是“监控”这个额外的相机。进入 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示例中的模型，从主场景中的相机渲染到单独的屏幕外场景中的四边形纹理贴图，然后将正交相机指向它，并将相机的视图渲染到主场景中的纹理贴图。我有一种预感，我只是忘记了一些样板代码，或者我做错了。

提前致谢！

【问题讨论】：

您无需致电requestAnimationFrame。每帧调用一次 tick 方法。您可以拨打render

标签： three.js aframe

【解决方案1】：

我不确定这是否是您要查找的内容，但 this answer 到 AFrame: How to render a camera to a texture 可能会有所帮助。简而言之，它展示了如何使用为辅助相机创建渲染器的组件，可以将其引用为 material 用于对象。

【讨论】：