jeudi 12 mars 2020

three.js reflector (mirror) clipping object when HDRi background is set

I have scene with elements size over 500 units and i want to create mirror effect for them. to Reach descripted effect i used Reflector library from three.js webgl_mirror example.

I placed mirror on ground and most of meshes disappears or showing only small parts of surface when i set background hdri without its displayes normally. I builded other scene for tests and it looks like this unexpected effect begins when distance between mirror and obiect is over around 75 units (sometimes its less i dont know what its depends).

Image to preview on that effect

Is there any possibility that i could increase range of this clipping box size for that mirror? (i really want to avoid of scaling my actual created scene)

What i already tryed:

-changing my perspective camera far and near distances. - no effect

-manipulate paramets for clipBias and recursion or even increasing texture size. -no effect

-adding multiple lights around elements. -no effect

code that i used for experiment:

sceneSetup = () => {
    //initialize
    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;

    this.scene = new THREE.Scene();
    let helperScene = this.scene;

    this.camera = new THREE.PerspectiveCamera(60, width / height, 1, 500);
    this.camera.position.z = 200;
    this.controls = new OrbitControls(this.camera, document.body);

    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(width, height);
    this.mount.appendChild(this.renderer.domElement); //render to container (React staff)

///Load HDR map

    new RGBELoader()
      .setDataType(THREE.UnsignedByteType)
      .load(HdrFile, function(texture) {
        var envMap = pmremGenerator.fromEquirectangular(texture).texture;

        helperScene.background = envMap; // comment to see issue
        helperScene.environment = envMap;

        texture.dispose();
        pmremGenerator.dispose();
      });

    var pmremGenerator = new THREE.PMREMGenerator(this.renderer);
    pmremGenerator.compileEquirectangularShader();

//create ground mirror
    let geometry = new THREE.PlaneBufferGeometry(200, 200);
    let groundMirror = new Reflector(geometry, {
      clipBias: 0,
      textureWidth: 1024,
      textureHeight: 1024,
      color: 0x889999,
      recursion: 1
    });
    groundMirror .position.z = -20;
    groundMirror .rotation.x = Math.PI * -0.5;
//change groundMirror .position.y to -104 and evrything looks fine; 
    groundMirror .position.y = -105; 
    this.scene.add(groundMirror );

};

addCustomSceneObjects = () => {
//create cube for reflect
    const geometry = new THREE.BoxGeometry(50, 50, 50);
    const material = new THREE.MeshPhongMaterial({
      color: 0x156289,
      emissive: 0x072534,
      side: THREE.DoubleSide,
      depthTest: true,
      depthWrite: true
    });
    this.cube = new THREE.Mesh(geometry, material);
    this.cube.position.y = 0;
    this.scene.add(this.cube);

//radding lights
    const lights = [];
    lights[0] = new THREE.PointLight(0xffffff, 1, 0);
    lights[1] = new THREE.PointLight(0xffffff, 1, 0);
    lights[2] = new THREE.PointLight(0xffffff, 1, 0);

    lights[0].position.set(0, 200, 0);
    lights[1].position.set(100, 200, 100);
    lights[2].position.set(-100, -200, -100);

    this.scene.add(lights[0]);
    this.scene.add(lights[1]);
    this.scene.add(lights[2]);
  };

  startAnimationLoop = () => {
//rotate cube
    this.cube.rotation.x += 0.01;
    this.cube.rotation.y += 0.01;

    this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
    this.renderer.render(this.scene, this.camera);
  };





Aucun commentaire:

Enregistrer un commentaire