如何在A帧中实现动态反射

Question

我有一个A帧场景，包括一个水平面，一些灯光和一个正在播放视频的垂直平面。我正试图在水平面上实现反射，使得它上面的垂直平面被反射。我打算在反射表面上设置减少的不透明度。 A框架中如何做到这一点？

Answer 1

我写mirror组成部分，这里是我的代码：

<script> 
AFRAME.registerComponent('mirror', { 
schema:{ 
    renderothermirror:{default:true}, 
}, 
init: function() { 
    var scene = this.el.sceneEl; 
    scene.addEventListener('render-target-loaded',this.OnRenderLoaded.bind(this)); 
}, 
OnRenderLoaded: function() 
{ 
    var mirrorObj = this.el.getOrCreateObject3D('mesh',THREE.Mesh); 
    var cameraEl = document.querySelector('a-entity[camera]') 
    if(!cameraEl) 
    { 
     cameraEl = document.querySelector('a-camera'); 
    } 
    var camera = cameraEl.components.camera.camera; 
    var scene = this.el.sceneEl; 
    this.renderer = scene.renderer; 
    this.mirror = new THREE.Mirror(this.renderer, camera, { clipBias: 0.003, textureWidth: window.innerWidth, textureHeight: window.innerHeight, color: 0x777777 }); 
    mirrorObj.material =this.mirror.material; 
    mirrorObj.add(this.mirror); 
}, 
tick: function() { 
    if(!this.data.renderothermirror) 
     { 
      this.mirror.render(); 
     } 
    else 
     { 
      var mirrors = []; 
      var mirrorEls = document.querySelectorAll("a-entity[mirror]"); 
      for(var i=0;i<mirrorEls.length;i++) 
      { 
       if(mirrorEls[i]!=this.el) 
       { 
        mirrors.push(mirrorEls[i].components.mirror.mirror); 
       } 
      } 
      if(mirrors.length === 0) 
      { 
       this.mirror.render(); 
      } 
      for(var i = 0; i<mirrors.length;i++) 
      { 
       this.mirror.renderWithMirror(mirrors[i]); 
      } 
     } 
} 
}); 
</script> 

你还需要使用Mirror.js，你可以在这里找到：Mirror.js

的mirror组件只需连接到您的飞机。例如<a-plane mirror>。