我试图创建一个四面镜像的对象。它几乎可以工作,但我不确定我在这里做错了什么。我只能看到某些角度的部分反射,并且反射比反射的物体(大象)大得多。这是代码:
<script>
/*
written by dstarr
*/
var controls, camera, scene, renderer, animmesh, mirrorCube, mirrorCubeCamera;
var clock = new THREE.Clock();
function init() {
// args 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 );
//container.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) {
//skinning = true for every material;
//material[0].skinning = true;
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() {
// move the CubeCamera to the position of the object that has a reflective surface, "take a picture" in each direction
// and apply it to the surface. Need to hide surface before and after so that it does not "get in the way" of the camera
mirrorCube.visible = false;
mirrorCubeCamera.updateCubeMap(renderer, scene);
mirrorCube.visible = true;
var delta = 10 * clock.getDelta();
//console.log(clock.getDelta());
//console.log(delta);
//console.log('camera.position');
//console.log(camera.position);
if (animmesh) {
THREE.AnimationHandler.update(delta);
}
renderer.render(scene, camera);
camera.lookAt(new THREE.Vector3(0,-80,100));
}
init();
animate();
</script>
&#13;
以下是我看到的有用的图片: https://dl.dropboxusercontent.com/u/55574623/Screenshot%202015-02-07%2023.38.56.png
非常感谢任何帮助,谢谢。
答案 0 :(得分:0)
我不确定你是否已经找到了答案,但我今天也在努力解决同样的问题(这就是为什么我碰到你的问题)。
<强>问题强>
立方体相机在任何方向拍摄照片以制作材质的envMap。但是地板是Y位置0上的平面,所以它永远不会被任何方向捕获。
<强>解决方案强>
使用反射(或在地板上方)从对象的中心拍摄立方体快照(updateCubeMap)。
var cubeCamera = new THREE.CubeCamera(1, 20000, 1024);
cubeCamera.position.set(0, 130, 0); /* Actual solution */
scene.add(cubeCamera);