three.js - 如何在三个 JS 中更改多个视图的相机位置

Question

我尝试在按钮单击中更改相机视图（例如：前视图、左视图、右视图、后视图、底视图和顶视图）。我通过更改每个视图的相机位置来实现，我担心如果相机位置或网格位置发生变化会怎样。我已将网格位置指定给初始视图中的相机位置，并且网格从场景中消失了。

那么是否有任何替代方法可以在不硬编码相机位置的情况下实现这一目标。

请帮我解决这个问题。

这是小提琴https://jsfiddle.net/8L10qkzt/1/和我的一段代码

var camera, scene, renderer;
        var views;
        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
            camera.position.z = 1;

            scene = new THREE.Scene();

            var geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
            var material = new THREE.MeshNormalMaterial();

            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;

            setTimeout(() => {

                controls.enableDamping = false;
                controls.reset();

            }, 5000);

            document.querySelector('#frontView').addEventListener('click', () => {
                console.log("frontview");
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 1;
                scene.add(mesh);
                controls.update();
                render();
            });

            document.querySelector('#sideView').addEventListener('click', () => {
                console.log("Side View");

                camera.position.x = 1;
                camera.position.y = 1;
                camera.position.z = 1;

                scene.add(mesh);
                controls.update();
                render();
            });

            document.querySelector('#backView').addEventListener('click', () => {
                console.log("Back View");

            });


        }
        function render() {
            for (var ii = 0; ii < views; ++ii) {

                var view = views[ii];
                var camera = view.camera;

                view.updateCamera(camera, scene, mouseX, mouseY);

                var left = Math.floor(windowWidth * view.left);
                var top = Math.floor(windowHeight * view.top);
                var width = Math.floor(windowWidth * view.width);
                var height = Math.floor(windowHeight * view.height);

                renderer.setViewport(left, top, width, height);
                renderer.setScissor(left, top, width, height);
                renderer.setScissorTest(true);
                renderer.setClearColor(view.background);

                camera.aspect = width / height;
                camera.updateProjectionMatrix();

                renderer.render(scene, camera);

            }
        }
        function animate() {
            render();
            requestAnimationFrame(animate);
            renderer.render(scene, camera);

        }

标签： three.js