Question

目标：

以三个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

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

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

但另一个问题是，您正在从mirrorMesh克隆floorMesh，braintree.setup(GFormVATVars.br_client_token, "paypal", { container: "paypal-container", singleUse: false, onPaymentMethodReceived: function (obj) { $(".gform_next_button").show(); $("span#br_pp_message").html('<img height="15" width="15" src="'+GFormVATVars.spinner_gif+'"/>'); $.post(GFormVATVars.ajaxurl,{action: 'process_br_pp_payment_token',token: obj.nonce,security: GFormVATVars.security},function(response) { $("span#br_pp_message").html(response); }); return; } });已经（可能）已经转化。

在创建时，镜像对象具有与具有平面几何的常规网格相同的默认变换矩阵（默认情况下为＆＃39;垂直＆＃39;）。

当您将镜子安装到地板（或任何水平网格）时，矩阵与网格不匹配，这就是您不能看到反射的原因，或者只是从一定的角度。

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

Answer 2

点子：

＆＃34; 通过将不透明度设置为0.5来使地板保持半透明。在它下面放一个镜子以反映它上面的网格＆＃34;。

我建议采用另一种方式，将地板固定在顶部并添加镜子，然后改变镜子的alpha值，我认为半透明地板有问题限制镜子投影通过alpha ..

如果您将镜子从半透明地板下面移动到一个空白场景中，只是附加了立方体或球体几何体，基本材料是否会按预期反射？

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

三个镜子不反映所有网格

2 个答案: