I have an A-Frame scene consisting of a horizontal plane, some lights and a vertical plane on which a video is playing. I am trying to achieve reflections on the horizontal plane such that the vertical plane above it is reflected. I intend to set reduced opacity on the reflective surface. How can one do this in A-Frame?
2 Answers
I write a mirror component, here is my code:
<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>
You also need to use Mirror.js, you can find it here:Mirror.js
Just attach the mirror component to your planes. e.g. <a-plane mirror>.
2 Comments
robswain
After discussion with Craig.Li I've changed the tick function slightly to handle the case of
renderothermirror: true and only having one mirror: var mirrorEls = document.querySelectorAll("a-entity[mirror]"); if(!this.data.renderothermirror || mirrorEls.length === 1)
supertobi
The link to Mirror.js is dead. And a simple complete example would be grate.
I've created a component for these kinds of live dynamic reflections. It has a special "floor" mode. Available here:
https://github.com/kylebakerio/a-dynamic-reflection
