Рендеринг в текстуру в a-frame - PullRequest
Новая
       5

Рендеринг в текстуру в a-frame

0 голосов
/ 26 июня 2018

Я пытаюсь реализовать нечто очень похожее на это ...

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: рендеринг с камеры в основной сцене на карту текстуры с квадратами в отдельной внеэкранной сцене, затем наведение на нее ортографической камеры и рендеринг вида этой камеры втекстурная карта обратно в основную сцену.Я догадываюсь, что есть какой-то шаблонный код, который я забыл или я делаю неправильно.

Заранее спасибо!

1 Ответ

0 голосов
/ 27 декабря 2018

Я не уверен, что это то, что вы ищете, но, возможно, этот ответ до AFrame: Как отрендерить камеру в текстуру может помочь.Вкратце, он показывает, как использовать компонент, который создает средство визуализации для дополнительной камеры, на которое можно ссылаться как material для объекта.

...