Reflector looks black when added within a Group

Questions
,
1

Hi all. I’m replacing a Mesh with a Reflector, but the Reflector appears black. I’ve tried adding the Reflector individually and it just works fine. Here is how I do it.

const addMirrorLook = ( object, node ) => {

  if ( node.material.name === 'Espejo' ) {
    const nodeGeo = node.geometry.clone();

    const options = {
      textureWidth: window.innerWidth * window.devicePixelRatio,
      textureHeight: window.innerHeight * window.devicePixelRatio
    };

    const mirror = new Reflector( nodeGeo, options );

    object.children[ 0 ].children[ 3 ] = mirror;

  }

};

black-mirror
black-mirror940×817 132 KB

2

This is no the correct way of adding an object to a scene/object hierarchy. Always use Object3D.add().

3 
object.children[ 0 ].children[ 3 ].removeFromParent();
object.children[ 0 ].add( mirror );

Hi @mugen87. Thanks for pointing this out to me. I’ve fixed the code to the correct way. Though the mirror is still black.

4

Do you mind demonstrating the issue with a live example somehow?

5

It is very hard for me to demonstrate this with a live example, this takes belongs on a big project :frowning:

6

I don’t see this approach as being viable. What would be the best way to make a flat mirror with Three.js?

7

Any chances to modify the official example to demonstrate the issue?

https://threejs.org/examples/webgl_mirror