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

1 个答案: