如何沿简单路径移动相机 [英] How to move camera along a simple path

问题描述

如何沿简单路径(由顶点/点数组创建)移动相机?我需要自动移动它，而不是像在第一人称射击游戏中那样通过键盘/鼠标事件?

How can I move the camera along a simple path (created by an array of vertices/points)? I need to move it automatically, not by keyboard/mouse events, like in a first person shoter game?

寻找这个例子:http://threejs.org/examples/webgl_geometry_extrude_splines.html它真的很好(也很复杂)，但作为一个刚开始学习 Three.js 的人，我需要一些简单的东西

Looked for this example: http://threejs.org/examples/webgl_geometry_extrude_splines.html and it's realy good (and complex), but I need something simple, as a person who is just starting to learn Three.js

推荐答案

所以，最好和最简单的解决方案(基于我的错误和研究——也许你可以找到更简单的解决方案)是使用 PathControls；你可以在这里找到这个库:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/PathControls.js

So, the best and simplest solution (based on my errors and researches - maybe you can find even a simpler solution) is to use PathControls; you can find the library here: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/PathControls.js

这个简单的解决方案基于这本书:Learning Three.js: "The JavaScript 3D Library for WebGL";在三上学点东西非常好，推荐大家阅读；首先，我们将 PathControls.js 添加到我们的文档中:

This simple solution is based on the book: Learning Three.js: "The JavaScript 3D Library for WebGL"; it's very good to learn something on Three and I recommend you to read it; First we add the PathControls.js to our document:

<script src="js/PathControls.js"></script>

然后我们添加一些变量，在 init() 函数之前:

then we add some variables, before out init() function:

var controls;
var clock = new THREE.Clock();
var pathControls;

现在我们需要在我们的 init() 函数上做一些工作，在创建场景、相机、灯光等之后:

now we need some work to do on our init() function, after creating the scene, camera, lights, etc:

controls = new function () {
this.numberOfPoints = 5;
this.segments = 64;
this.radius = 3;
this.radiusSegments = 5;
this.closed = false;
this.points = getPoints();

//you can take out this last one: it shows you the path on which the camera is moving
generatePoints(this.points, this.segments, this.radius, this.radiusSegments, this.closed);
}
pathControls = new THREE.PathControls(camera);

// configure the controller
pathControls.duration = 70

//speed, so you will not have the dash effect on a curve
pathControls.useConstantSpeed = true;
pathControls.lookSpeed = 0.1;
pathControls.lookVertical = true;
pathControls.lookHorizontal = true;
pathControls.verticalAngleMap = {srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ]};
pathControls.horizontalAngleMap = {srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ]};
pathControls.lon = 300;
pathControls.lat = 40;

// add the path
controls.points.forEach(function(e) {
  pathControls.waypoints.push([e.x, e.y, e.z]) });

// when done configuring init the control
pathControls.init();

// add the animationParent to the scene and start the animation
scene.add(pathControls.animationParent);
pathControls.animation.play(true, 0 );

最后，您需要在 animate() 函数中使用这 3 行代码，以便相机实际上会根据时间移动:

Lastly you need this 3 lines in you animate() function so the camera actually will move based on time:

var delta = clock.getDelta();
THREE.AnimationHandler.update(delta);
pathControls.update(delta);

关于支持函数(我有一个只是一个 5 点的数组，但你可以使用越来越复杂的:这取决于你):

As regards the support functions (I have this one that is just an array on 5 points, but you can use many more and more complex: it's up to you):

function getPoints() {
    var points = [];
    points.push(new THREE.Vector3(0, 20, 0));
    points.push(new THREE.Vector3(100, 25, 0));
    points.push(new THREE.Vector3(100, 20, 100));
    points.push(new THREE.Vector3(0, 25, 100));
    points.push(new THREE.Vector3(0, 20, 0));
    return points;
}

这些是在您选择的路径上显示/绘制管子的功能，以便您可以看到相机的实际移动方式(整个代码不需要):

And those are the functions to show/draw a tube on the path you picked so you can see how actually the camera is moving (not needed for the whole code to work):

function generatePoints(points, segments, radius, radiusSegments, closed) {
  var tube = new THREE.TubeGeometry(new THREE.SplineCurve3(points), segments, radius, radiusSegments, false, closed);
  var tubeMesh = createMesh(tube);
  scene.add(tubeMesh);
}

function createMesh(geom) {
  mesh = THREE.SceneUtils.createMultiMaterialObject( geom, [
    new THREE.MeshLambertMaterial({color: 0x00ff00, transparent: true}),
    new THREE.MeshBasicMaterial({color: 0x000000, opacity: 0.3, wireframe: true, transparent: true})]);
 return mesh;
}

希望对某人有用；对于整个代码，您可以在这里找到它:https://github.com/MarcinKwiatkowski1988/learningThreeJs/blob/master/movingCameraOnPath/myTry1_simply.html

Hope it will be useful to someone; for the whole code, you'll find it here: https://github.com/MarcinKwiatkowski1988/learningThreeJs/blob/master/movingCameraOnPath/myTry1_simply.html

这篇关于如何沿简单路径移动相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！