mardi 14 avril 2015

Three.js Simulate Floor Reflection

Objective :


I want to simulate a reflective floor (like this) in three.js


Also, I don't want to duplicate the house and make a transparent floor as that increases the size of the model.


I tried setting up a cubeCamera and rendered its output to floor but it always shows black.



mirrorCamera = new THREE.CubeCamera(0.01, 1000, 512);
mirrorCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add(mirrorCamera);

var mirrorFloorMaterial = new THREE.MeshLambertMaterial(
{
map: floorTexture,
reflectivity: .8,
side: THREE.DoubleSide,
envMap: mirrorCamera.renderTarget
});

mirrorFloor = new THREE.Mesh(cubeGeom, mirrorFloorMaterial);

mirrorFloor.doubleSided = true;
mirrorCamera.position = mirrorFloor.position;

scene.add(mirrorFloor);
......
......
//in render()

mirrorFloor.visible = false;
mirrorCamera.updateCubeMap(renderer, scene);
mirrorFloor.visible = true;

renderer.render(scene, firstPerson.camera);


Questions:


1) Why do I always see black in place of floor and not what cubeCamera should have rendered?


2) Can anyone suggest a neat way to simulate floor reflections?


Thanks in advance.






Aucun commentaire:

Enregistrer un commentaire