dimanche 26 avril 2015

three js mirror not reflecting all meshes

Objective:

  • To simulate a reflective floor in three js.

Idea:

  • Make the floor translucent by setting opacity to 0.5.
  • Place a Mirror below it to reflect the meshes above it.

Expected Output:

  • To be able to see reflections of the house via the floor mirror.

Obtained Output:

  • Doesn't reflect the meshes which is part of the house.
  • Instead, reflects only the skybox and that too only in certain angles.

Screenshots:

Questions:

  • Why aren't the other meshes of the house reflected through the mirror?
  • Why is the mirror not reflecting in certain orientations of the camera?

Code Attached:

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





Aucun commentaire:

Enregistrer un commentaire