三js立方体相机没有像我预期的那样反射

threejs cube camera not reflecting as I expected

本文关键字:反射 立方体 js 相机      更新时间:2023-09-26

我正在尝试创建一个四面镜像的对象。这几乎奏效了,但我不确定我在这里做错了什么。我只能在特定角度看到部分反射,反射的范围比被反射的物体(大象)大得多。这是代码:

<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

非常感谢您的帮助,谢谢。

我不确定你是否已经找到了答案,但我今天也遇到了同样的问题(这就是我遇到你这个问题的原因)。

问题

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

解决方案

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

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