好的,我会尽量简洁。我对数学不是很好,对你来说似乎很明显的东西对我来说很可能是火箭科学。
我正在使用 Three.js w/CSS3DRenderer 创建一个虚拟画廊空间。
我需要第一人称视 Angular ,比如 FPS 游戏。
我已经成功地让相机向前、向后、向左和向右移动。
但是,当我去旋转相机时,我得到了结果
相机正在旋转其局部轴,但我需要的是 viewport
,而不是相机,旋转,像
所以我需要的是让相机围绕一个枢轴点/矢量运行,然后使用 Object3d.lookAt()
重新聚焦
我知道我可以通过将相机作为另一个对象的子对象来解决我的问题,然后旋转对象的轴。但是,我宁愿自己做数学。
简而言之,我想了解如何围绕另一个矢量点旋转一个矢量点,以及如何以数学方式表示这种关系。
我愿意 不是 想利用脚本,例如,three.js pointer_lock 控件,来完成工作。我想弄脏实际的数学。
任何建议或教程链接将不胜感激!!!
最佳答案
下面是一个相机围绕一个盒子旋转的例子。
它的工作原理是应用旋转矩阵总是围绕原点旋转对象。这与仅修改 rotation
不同。属性,如您所见,它围绕自己的中心旋转对象。这里的技巧是将相机从原点移动 200 个单位,这样当我们应用旋转矩阵时,它会围绕原点旋转一圈。
由于盒子位于原点,这将围绕盒子旋转相机。然后lookAt
用于将相机指向盒子。
如果您想了解更多,这里有一个关于这个主题的低级解释:http://webglfundamentals.org/webgl/lessons/webgl-scene-graph.html
var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);
var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshBasicMaterial({color: '#f00'});
var box = new THREE.Mesh(geometry, material);
scene.add(box);
// important, otherwise the camera will spin on the spot.
camera.position.z = 200;
var period = 5; // rotation time in seconds
var clock = new THREE.Clock();
var matrix = new THREE.Matrix4(); // Pre-allocate empty matrix for performance. Don't want to make one of these every frame.
render();
function render() {
requestAnimationFrame(render);
if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
// This stuff in here is just for auto-resizing.
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
// Create a generic rotation matrix that will rotate an object
// The math here just makes it rotate every 'period' seconds.
matrix.makeRotationY(clock.getDelta() * 2 * Math.PI / period);
// Apply matrix like this to rotate the camera.
camera.position.applyMatrix4(matrix);
// Make camera look at the box.
camera.lookAt(box.position);
// Render.
renderer.render(scene, camera);
}
html, body, #canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script>
<canvas id="canvas"></canvas>
关于javascript - Three.js - 如何围绕 Vector3 点旋转相机?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37370246/