samedi 21 mars 2015

Mirror reflection quirks in ThreeJS

(Disclaimer: first post on SO. I've searched SO and elsewhere for an answer to this, but while mirrors and reflections do come up, I haven't found anything related to my particular issue.)


Problematic Mirror


This is my first scene in ThreeJS and most of it is based on the official examples (super helpful!). As you can see, for whatever reason the mirror reflection is black/fragmented from most angles, so it only displays a proper reflection under a very narrow range. (Explore other angles to see what I'm talking about.)


Relevant code:



// MIRROR

verticalMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.003, textureWidth: 1024, textureHeight: 1024, color:0x889999 } );

var verticalMirrorMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 300, 300 ), verticalMirror.material );
verticalMirrorMesh.add( verticalMirror );
verticalMirrorMesh.position.y = 100;
verticalMirrorMesh.position.z = -500;
scene.add( verticalMirrorMesh );


And in the render function:



function render()
{
renderer.render( scene, camera );
verticalMirror.renderWithMirror( verticalMirror );
}


I've tried messing with the texture settings and the clipbias to no avail, and the whole code is mostly based on The ThreeJS reference example for Mirror.


Any and all help would be greatly appreciated - thank you!






Aucun commentaire:

Enregistrer un commentaire