我确定这个问题多次重复，但我找不到任何特定问题的答案！
我创建了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轴也旋转。我检查了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>
答案 0 :(得分：0)
您是否曾尝试将此属性值设置为限制移动而不是执行您已完成的操作？
controls.minDistance = 20.0;
controls.maxDistance = 50.0;
controls.maxPolarAngle = Math.PI;
controls.minPolarAngle=0;