reflection - 三个 js 镜像没有反射(reflect)所有网格

Question

目标 :

在三个js中模拟反射地板(like this)。

创意 :

通过将不透明度设置为 0.5 使地板半透明。

在其下方放置一个镜子以反射其上方的网格。

预期输出 :

能够通过地板镜子看到房子的反射。

获得输出 :

不反射(reflect)作为房屋一部分的网格。

相反，只反射天空盒，也只在某些角度反射。

截图:

镜子完全反射天空盒 - http://prntscr.com/6yn52y

部分反射天空盒的镜子 - http://prntscr.com/6yn5f7

镜子不反射任何东西 - http://prntscr.com/6yn5qy

问题 :

为什么房子的其他网格没有通过镜子反射？

为什么镜子在相机的某些方向没有反射？

附代码 :

.......
.......
function getReflectiveFloorMesh(floorMesh) {

        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;

        floorMirror = new THREE.Mirror( renderer, firstPerson.camera,
                    { clipBias: 0.003,
                    textureWidth: WIDTH,
                    textureHeight: HEIGHT,
                    color: 0x889999 } );

        var mirrorMesh = floorMesh.clone();

        mirrorMesh.position.y -= 10;            // Placing the mirror just below the actual translucent floor; Fixme: To be tuned
        mirrorMesh.material = floorMirror.material;

        mirrorMesh.material.side = THREE.BackSide;  // Fixme: Normals were flipped. How to decide on normals?
        mirrorMesh.material.needsUpdate = true;

        mirrorMesh.add(floorMirror);

        return mirrorMesh;

    }

    function getSkybox() {
        var urlPrefix = "/img/skybox/sunset/";
        var urls = [urlPrefix + "px.png", urlPrefix + "nx.png",
            urlPrefix + "py.png", urlPrefix + "ny.png",
            urlPrefix + "pz.png", urlPrefix + "nz.png"];
        var textureCube = THREE.ImageUtils.loadTextureCube(urls);

        // init the cube shadder
        var shader = THREE.ShaderLib["cube"];
        shader.uniforms["tCube"].value = textureCube;
        var material = new THREE.ShaderMaterial({
            fragmentShader: shader.fragmentShader,
            vertexShader: shader.vertexShader,
            uniforms: shader.uniforms,
            side: THREE.BackSide
        });

        // build the skybox Mesh
        var skyboxMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1, null, true), material);

        return skyboxMesh;
    }

    function setupScene(model, floor) {
        scene.add(model); // Adding the house which contains translucent floor
        scene.add(getSkybox()); // Adding Skybox
        scene.add(getReflectiveFloorMesh(floor)); // Adds mirror just below floor

        scope.animate();
    }
....
....
this.animate = function () {

    // Render the mirrors
    if(floorMirror)
        floorMirror.render();

    renderer.render(scene, firstPerson.camera);
};

Answer 1

您必须将镜子附加到网格 之前 做任何改造。
所以代码将是:

floorMirror = new THREE.Mirror( ... );

var mirrorMesh = floorMesh.clone();

    mirrorMesh.add(floorMirror); // attach first!
    mirrorMesh.position.y -= 10; 
    ...

但这里的另一个问题是您正在克隆 mirrorMesh来自 floorMesh ，它已经(可能)被转换了。

在创建时，镜像对象与具有平面几何体(默认为“垂直”)的常规网格具有相同的默认变换矩阵。

当您将镜子连接到地板(或任何水平网格)时，矩阵与网格不匹配，这就是为什么您看不到反射，或者只能从某个角度看到反射。

因此，始终将镜子连接到 非变形平面网格 , 在应用转换(平移或旋转)之前。