三个 js 镜像不反映所有网格

Question

Objective:

用三个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, 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

想法：

"通过将不透明度设置为 0.5 使地板半透明。在其下方放置一个镜子以反射其上方的网格"。

我建议另一种方法，将地板设为实心，在顶部添加镜子并改为更改镜子的 alpha，我认为您在半透明地板限制通过 alpha 的镜像投影方面存在问题..

如果您将镜子从半透明地板下面移到一个只有立方体或球体几何体的空场景中，基本 material 它是否按预期反射？

您可能需要 2 面镜子，假设您想要抛光地板，一面用于房间，另一面用于外部一般反射

Answer 2

在进行任何转换之前，您必须先将镜子附加到网格。所以代码将是：

floorMirror = new THREE.Mirror( ... ); var mirrorMesh = floorMesh.clone(); mirrorMesh.add(floorMirror); // attach first! mirrorMesh.position.y -= 10; ...

但这里的另一个问题是您正在从 floorMesh 克隆 mirrorMesh，它已经（可能）被转换。

创建时，镜像对象具有与具有平面几何形状的常规网格（默认为 'vertical'）相同的默认变换矩阵。

当您将镜子连接到地板（或任何水平网格）时，矩阵与网格不匹配，这就是您看不到反射或仅从某个角度看不到反射的原因。

因此，在应用变换（平移或旋转）之前，请始终将镜子附加到未变换的平面网格。

三个 js 镜像不反映所有网格

three js mirror not reflecting all meshes

reflection

three.js