Question

我的场景元素大小超过500个单位，我想为其创建镜像效果。为了达到描述的效果，我使用了three.js webgl_mirror example中的Reflector库。

我在地面上放置了镜子，大多数网格消失了，或者只显示了表面的一小部分。当我设置背景hdr却没有正常显示时。我建立了另一个场景进行测试，当镜子和对象之间的距离超过约75个单位时，这种意外效果似乎开始出现（有时它的数量较少，我不知道它的依赖性）。

Image to preview on that effect

我是否有可能为该镜子增加该裁剪盒尺寸的范围？（我真的想避免缩放我实际创建的场景）

我已经尝试过的方法：

-远距离更改我的透视相机。 -没有效果

-操纵clipBias和递归甚至增加纹理大小的参数。 -没有效果

-在元素周围添加多个灯光。 -没有效果

我用于实验的

代码：

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);
  };

设置HDRi背景时，Three.js反射器（镜像）剪切对象

0 个答案: