I'm currently experimenting with creating an object that reflects on all sides. Although I've made progress, I seem to be encountering some issues. At certain angles, I can only see partial reflections and the scale of the reflection is much larger than the actual object (an elephant in this case). Here's the code snippet:
<script>
/*
written by dstarr
*/
var controls, camera, scene, renderer, animmesh, mirrorCube, mirrorCubeCamera;
var clock = new THREE.Clock();
function init() {
// arguments for constructor are field of view, aspect ratio, near plane, far plane
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 10000);
camera.position.set(-568, 694,48);
camera.up.set(-1,0 ,1);
controls = new THREE.OrbitControls(camera);
scene = new THREE.Scene();
scene.add(camera);
// FLOOR
var floorTexture = new THREE.ImageUtils.loadTexture('../../assets/checkerboard.jpg');
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(10, 10);
var floorMaterial = new THREE.MeshBasicMaterial({map: floorTexture, side:THREE.BackSide });
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.z = 20;
floor.rotation.x = Math.PI; // 180 degrees
scene.add(floor);
// mirror code
var boxGeom = new THREE.BoxGeometry(300, 10, 300, 1, 1, 1);
mirrorCubeCamera = new THREE.CubeCamera(0.1, 10000, 500);
scene.add(mirrorCubeCamera);
var mirrorCubeMaterial = new THREE.MeshBasicMaterial({envMap: mirrorCubeCamera.renderTarget});
mirrorCube = new THREE.Mesh(boxGeom, mirrorCubeMaterial);
mirrorCube.position.set(100,-450,200);
//mirrorCube.rotation.z = Math.PI / 2;
mirrorCubeCamera.position = mirrorCube.position;
scene.add(mirrorCube);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth * .9, window.innerHeight * .9);
document.body.appendChild(renderer.domElement);
var loader = new THREE.JSONLoader();
loader.load("../../assets/model-threejs.json", function (model, material) {
console.log('hiiii model: ');
console.log(model);
console.log('hiiii loaded material: ');
console.log(material);
createScene(model, material);
});
}
function createScene(model, material) {
var tgaLoader = new THREE.TGALoader();
console.log('hii tgaLoader' + tgaLoader);
tgaLoader.load("../../assets/ELEPHANT_DIFF_SPEC.tga", function(texture) {
var hexColor = "#848081";
animmesh = new THREE.SkinnedMesh(model, new THREE.MeshBasicMaterial({color: hexColor, skinning: true, map: texture}));
animmesh.position.set(0,610,0);
scene.add(animmesh);
var animation = new THREE.Animation(animmesh, model.animation);
animation.play();
});
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mirrorCube.visible = false;
mirrorCubeCamera.updateCubeMap(renderer, scene);
mirrorCube.visible = true;
var delta = 10 * clock.getDelta();
if (animmesh) {
THREE.AnimationHandler.update(delta);
}
renderer.render(scene, camera);
camera.lookAt(new THREE.Vector3(0,-80,100));
}
init();
animate();
</script>For reference, here's a screenshot of what I'm observing:
Your assistance would be greatly valued. Thank you.