THREEJS:在摄影机位置集中混淆了0和0.1(规格化值)

在这里,在摄像机的位置,我正在更新摄像头。向上以及照相机。看到中心。当我使用(0,0200)设置相机位置时,对象显示为倾斜位置。但当我使用位置(0,0.1200)时,它显示在正确的位置。他们背后的原因是什么,我很困惑。 https://jsfiddle.net/wq1h4om7/1/

 var paintingBoard = new THREE.Scene(); // like screen
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); // view like eye
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        paintingBoard.background = new THREE.Color('white');
        // Place camera on z axis
        camera.position.set(0, 0, 200);
        // Place camera on x axis
        //  camera.position.set(0, 0, 10);
        //  camera.up = new THREE.Vector3(-1, 0, 0);
        // camera.lookAt(new THREE.Vector3(0, 0, 0));
        // console.log(camera.lookAt);

        // Place camera on y axis
        // camera.position.set(0,30,0);
        //   camera.up = new THREE.Vector3(5, 0, 0);
        //   camera.lookAt(new THREE.Vector3(0, 0, 0));
        const size1 = 50;
        const size2 = 25;
        geometry = new THREE.CubeGeometry(size1, size1, size1);
        geometry2 = new THREE.CubeGeometry(size2, size2, size2);

        //  material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

        mesh = new THREE.Mesh(geometry, [
            new THREE.MeshBasicMaterial({ color: 0xf50a0a }),
            new THREE.MeshBasicMaterial({ color: 0xf5f50a }),
            new THREE.MeshBasicMaterial({ color: 0x64f50a }),
            new THREE.MeshBasicMaterial({ color: 0x11ed86 }),
            new THREE.MeshBasicMaterial({ color: 0x1115ed }),
            new THREE.MeshBasicMaterial({ color: 0xed11d7 })
        ]);
        mesh2 = new THREE.Mesh(geometry2, [
            new THREE.MeshBasicMaterial({ color: 0xf50a0a }),
            new THREE.MeshBasicMaterial({ color: 0xf5f50a }),
            new THREE.MeshBasicMaterial({ color: 0x64f50a }),
            new THREE.MeshBasicMaterial({ color: 0x11ed86 }),
            new THREE.MeshBasicMaterial({ color: 0xed11d7 }),
            new THREE.MeshBasicMaterial({ color: 0x1115ed })
        ]);
        mesh2.position.set(0, 0, 70);
        paintingBoard.add(mesh);
        paintingBoard.add(mesh2);
        var controls;
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        function render(event) {
            controls.update();
        };
        //    controls.addEventListener('change', render);
        var animate = function () {
            requestAnimationFrame(animate);
            renderer.render(paintingBoard, camera);
        };
        animate();
        render();
        $('#pan').on('click', function (e) {
            controls.enablePan = true;
            controls.enableRotate = false;
            controls.mouseButtons = { LEFT: THREE.MOUSE.RIGHT, MIDDLE: THREE.MOUSE.MIDDLE, RIGHT: THREE.MOUSE.RIGHT };
        });
        $('#zoom').on('click', function (e) {
            controls.enablePan = false;
            controls.enableRotate = false;
            controls.mouseButtons = { LEFT: THREE.MOUSE.LEFT, MIDDLE: THREE.MOUSE.MIDDLE, RIGHT: THREE.MOUSE.RIGHT };
        });
        $('#rotate').on('click', function (e) {
            controls.enablePan = false;
            controls.enableRotate = true;
            controls.mouseButtons = { LEFT: THREE.MOUSE.LEFT, MIDDLE: THREE.MOUSE.MIDDLE, RIGHT: THREE.MOUSE.RIGHT };
        });
        $('#x-up').on('click', function (e) {
            // Place camera on x axis
            // up used for rotate the camera
            camera.up = new THREE.Vector3(1, 0, 0);
            // lookAt used for set the center position
            // where from start to look the camera 
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            // we already set position  like camera.position.set(0, 0, 200);
            // so once rotate the camera first look at the center point. on that point object not visible so have to set the camera position 
            camera.position.set(-200, 0, 0);
            // camera.position.set(-105, 0.0001, 0);
            render();
        });
        $('#y-up').on('click', function (e) {
            // Place camera on y axis
            camera.up = new THREE.Vector3(0, 1, 0);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            camera.position.set(0, 200, 0);
            // camera.position.set(0, -105, 0);
            render();
        });
        $('#z-up').on('click', function (e) {
            // Place camera on y axis
            camera.up = new THREE.Vector3(0, 0, 1);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            camera.position.set(0, 0, 200);
            // camera.position.set(0, 0.0001, -105);
            render();
        });