如何在A-Frame中实现动态反射

Question

我有一个 A-Frame 场景，它由一个水平面、一些灯光和一个播放视频的垂直面组成。我正在尝试在水平面上实现反射，以便反射其上方的垂直面。我打算在反射表面上设置降低的不透明度。如何在 A-Frame 中做到这一点？

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>.

如何在A-Frame中实现动态反射

How to implement dynamic reflections in A-Frame

aframe