如何在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>。