反射 – 三个js镜子不反映所有网格

目的：

>以三个js模拟反射地板(like this).

理念：

>通过将不透明度设置为0.5使地板保持半透明.
>在它下面放一个镜子,以反映它上面的网格.

预期产出：

>能够通过落地镜看到房子的倒影.

获得的输出：

>不反映作为房子一部分的网格.
>相反,只反映天空盒,而且只在某些角度反射.

截图：

>完全镜面反射天空盒 – 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,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);
};

解决方法

在进行任何转换之前,您必须将镜像附加到网格.
所以代码是：

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

var mirrorMesh = floorMesh.clone();

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

但另一个问题是你从floorMesh克隆了mirrorMesh,它已经(可能)被转换了.

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

将镜子连接到地板(或任何水平网格)时,矩阵与网格不匹配,这就是您没有看到反射的原因,或者只是从某个角度看到的.

因此,在应用变换(平移或旋转)之前,始终将镜像附加到非变换平面网格.