如何在三个js中使用按钮点击来设置极限度相机位置旋转左，右，上，下模式？
如何在三个js中使用按钮点击来设置极限度相机位置旋转左，右，上，下模式？
提问于 2018-04-10 15:16:06
我确信这个问题已经被重复了很多次，然而，我找不到任何关于我的具体问题的答案！
我创建了3D画布WebGLRenderer，PerspectiveCamera，OrbitControls。我的相机位置设置为0，10,500。The circular camera rotation around a central point in three js。我用的是三角计算。我不旋转网格。我创建了四个方向的按钮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>
回答 1
Stack Overflow用户
发布于 2018-05-07 19:42:58
您是否尝试将此属性值设置为限制移动，而不是执行您所做的操作？？
controls.minDistance = 20.0;
controls.maxDistance = 50.0;
controls.maxPolarAngle = Math.PI;
controls.minPolarAngle=0;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49747592
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号