javascript - threejs 立方体相机没有像我预期的那样反射

Question

我正在尝试创建一个在所有方面都镜像的对象。它几乎可以正常工作，但我不确定我在这里做错了什么。我只能看到某些 Angular 部分反射，并且反射的范围比被反射的物体(大象)大得多。这是代码:

<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>

这是我看到的图片，如果有帮助的话: https://dl.dropboxusercontent.com/u/55574623/Screenshot%202015-02-07%2023.38.56.png

非常感谢任何帮助，谢谢。

Answer 1

我不确定您是否已经找到答案，但我今天也在为完全相同的事情苦苦挣扎(这就是我遇到您的问题的原因)。

问题

立方体相机在任意方向拍摄一张照片，为 Material 制作envMap。但是地板是 Y 位置 0 上的一个平面，因此它永远不会在任何方向上被捕获。

解决方案

从具有反射的对象中心(或刚好在地板上方)拍摄立方体快照 (updateCubeMap)。

var cubeCamera = new THREE.CubeCamera(1, 20000, 1024);
cubeCamera.position.set(0, 130, 0); /* Actual solution */
scene.add(cubeCamera);