如何在三个 JS 中更改按钮单击中的多个视图 [英] How to change multiple views in button click in Three JS

问题描述

我正在尝试通过更改相机位置来更改按钮单击中的多个视图(例如:前视图、侧视图和后视图).我已经尝试过这种方式，但无法实现对象的后视图.请帮助我解决这个问题.我已经提到了小提琴链接 https://jsfiddle.net/8L10qkzt/1/

I'm trying to change multiple views (say : Front View, Side View and Back View) in button click by changing the camera position. I have tried that way but can't able to achieve the back view of the object.Kindly help me out with the issue. I have mentioned the fiddle link 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);

        }

推荐答案

我已经更新了您的代码并进行了一些更改.首先，为了方便调试摄像头的位置，添加下面的helper有利于调试.

I've updated your code with some changes. First, it's good for debugging to add the following helper in order to easily verify the position of the camera.

scene.add( new THREE.AxesHelper() );

接下来，返回视图"按钮的事件处理程序如下所示:

Next, the event handler for the "back view" button looks like so:

 console.log("Back View");
 camera.position.x = 0;
 camera.position.y = 0;
 camera.position.z = - 1;
 controls.update();

如您所见，没有必要再次调用 render()，因为您已经有了一个正在进行的动画循环.

As you can see, it's not necessary to call render() again since you already have an ongoing animation loop.

提示:通过将一系列材料应用于您的盒子网格，可以更轻松地区分立方体的不同侧面.

Hint: By applying an array of materials to your box mesh, it's easier to distinct the different sides of your cube.

https://jsfiddle.net/zejLa143/1/

three.js R108

这篇关于如何在三个 JS 中更改按钮单击中的多个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！