CODEWITHSUNDEEP
reflectionthree.js
prahadeesh
prahadeesh

Reputation: 323

three js mirror not reflecting all meshes

Objective:

Idea:

Expected Output:

Obtained Output:

Screenshots:

Questions:

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

Upvotes: 4

Views: 1715

Answers (2)

Slayvin
Slayvin

Reputation: 111

You have to attach the mirror to the mesh before doing any transformation. So the code would be:

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

var mirrorMesh = floorMesh.clone();

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

But another problem here is that you are cloning mirrorMesh from floorMesh, which has already been (probably) transformed.

At creation, a mirror object has the same default transform matrix as a regular Mesh with plane geometry (which is by default 'vertical').

When you attach the mirror to a floor (or any horizontal mesh), the matrix doesn't match with the mesh one and that's why you don't see the reflections, or only from a certain angle.

So, always attach a mirror to a non-transformed plane mesh, before you apply your transformations (translations or rotations).

Upvotes: 1

Careen
Careen

Reputation: 567

Idea:

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

I suggest another way, make floor as solid add mirror on top and change the alpha of the mirror instead, I think you have issues with the translucent floor restricting the mirror projection through the alpha..

If you move the mirror over from under the translucent floor or into an empty scene with just a cube or sphere geometry attached basic material does it reflect as expected?

You may need 2 mirrors, one for the room assuming you want polished floor boards and one for outside general reflection

Upvotes: 0

Related Questions