如何在三个js中使用按钮单击来将极限度相机位置旋转到左，右，上，下模式？

Question

我确定这个问题已经被重复了很多次，但是，我找不到针对自己特定问题的任何答案！

我创建了3D画布WebGLRenderer ， PerspectiveCamera ， OrbitControls 。 我的相机位置设置为0、10、500 The circular camera rotation around a central point in three js 。 我用三角函数计算。 我不旋转网格。 我创建了4个方向按钮Left ， Right ， Top ， Bottom 。 例如，如果我单击left button camera to rotate left side 30 degrees 。 我的左右手都很好。 我的上下角度旋转不正确。 我的具体问题是1st left/right particular degree rotate after top/bottom单击旋转顶部/底部方向以及对象x轴也旋转1st left/right particular degree rotate after top/bottom旋转。 我检查了console.log x的值是否不变。 在我的代码下面。 任何人都对此有想法。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>3D</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://threejs.org/build/three.min.js"></script> <script src="js/Detector.js"></script> <script src="js/projector.js"></script> <script src="js/crypto-js.js"></script> <script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script> </head> <body> <button id="left" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-left"></span></button> <button id="right" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-right"></span></button> <button id="up" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-up"></span></button> <button id="down" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-down"></span></button> <div class="row"> <div id="drawCanvas3D"></div> </div> <script> var canvas3D; var camera3D; var scene3D; var renderer3D; var angle = 0; var radius = 500; var rotateRange = 0.53; var rotateUpDownRange = 0.51; canvas3D = document.getElementById("drawCanvas3D"); var angle = 45; var width = window.innerWidth; var height = window.innerHeight; var near = 1; var far = 10000; camera3D = new THREE.PerspectiveCamera(angle, width / height, near, far); camera3D.position.set(0, 10, 500); scene3D = new THREE.Scene(); if (Detector.webgl) renderer3D = new THREE.WebGLRenderer({ antialias: true }); else renderer3D = new THREE.CanvasRenderer(); /* Floor */ var geometry = new THREE.PlaneGeometry(10000, 10000, 10, 10); var material = new THREE.MeshBasicMaterial({ color: 0x444444 }); var floor = new THREE.Mesh(geometry, material); floor.material.side = THREE.DoubleSide; floor.position.set(0, 0, 0); floor.rotation.x = Math.PI / 2; floor.castShadow = true; scene3D.add(floor); renderer3D.setClearColor(0x81aff9); renderer3D.setSize(width, height); canvas3D.appendChild(renderer3D.domElement); controls = new THREE.OrbitControls(camera3D, renderer3D.domElement); canvas3D.appendChild(renderer3D.domElement); controls.rotateSpeed = 1; controls.zoomSpeed = 1.2; var boxGeometry = new THREE.CubeGeometry(50, 50, 50); //width, height, depth var boxMaterial = new THREE.MeshNormalMaterial({color:0xf49542, side:THREE.DoubleSide }); var squareThreeD = new THREE.Mesh(boxGeometry, boxMaterial); squareThreeD.position.set(0, 25, 0); //squareThreeD.position.set(middlePointX, (height/2),middlePointY); scene3D.add(squareThreeD); var leftMode = document.getElementById('left'); leftMode.addEventListener('click', onLeftButtonClick); var rightMode = document.getElementById('right'); rightMode.addEventListener('click', onRightButtonClick); var upMode = document.getElementById('up'); upMode .addEventListener('click', onUpButtonClick); var downMode = document.getElementById('down'); downMode .addEventListener('click', onDownButtonClick); function onLeftButtonClick(){ var x = camera3D.position.x, y = camera3D.position.y, z = camera3D.position.z; camera3D.position.x = x * Math.cos(rotateRange) + z * Math.sin(rotateRange); camera3D.position.z = z * Math.cos(rotateRange) - x * Math.sin(rotateRange); } function onRightButtonClick(){ var x = camera3D.position.x, y = camera3D.position.y, z = camera3D.position.z; camera3D.position.x = x * Math.cos(rotateRange) - z * Math.sin(rotateRange); camera3D.position.z = z * Math.cos(rotateRange) + x * Math.sin(rotateRange); } function onUpButtonClick(){ console.log('up mode'); document.getElementById('down').disabled = false; var x = camera3D.position.x, y = camera3D.position.y, z = camera3D.position.z; camera3D.position.y = y * Math.cos(rotateUpDownRange) + z * Math.sin(rotateUpDownRange); camera3D.position.z = z * Math.cos(rotateUpDownRange) - y * Math.sin(rotateUpDownRange); console.log(camera3D.position.x, camera3D.position.y, camera3D.position.z); } function onDownButtonClick(){ console.log('down mode'); document.getElementById('up').disabled = false; var x = camera3D.position.x, y =camera3D.position.y, z =camera3D.position.z; camera3D.position.y = y * Math.cos(rotateUpDownRange) - z * Math.sin(rotateUpDownRange); camera3D.position.z = z * Math.cos(rotateUpDownRange) + y * Math.sin(rotateUpDownRange); console.log(camera3D.position.x, camera3D.position.y, camera3D.position.z); } var axesHelper = new THREE.AxesHelper(100); scene3D.add(axesHelper); animate3D(); function animate3D() { requestAnimationFrame(animate3D); controls.update(); console.log(camera3D.position.x, camera3D.position.y, camera3D.position.z) render3D(); } function render3D() { renderer3D.render(scene3D, camera3D); } </script> </body> </html>

Answer 1

您是否尝试过设置此属性值以限制移动，而不是执行已做的事情？

controls.minDistance = 20.0; 
controls.maxDistance = 50.0;
controls.maxPolarAngle = Math.PI;
controls.minPolarAngle=0;

如何在三个js中使用按钮单击来将极限度相机位置旋转到左，右，上，下模式？

问题描述

1 个解决方案

解决方案1
0 2018-05-07 11:42:57

如何在三个js中使用按钮单击来将极限度相机位置旋转到左，右，上，下模式？

问题描述

1 个解决方案

解决方案1 0 2018-05-07 11:42:57

解决方案1
0 2018-05-07 11:42:57