So, the best and easiest solution (based on my mistakes and research - maybe you can find an even simpler solution) - use PathControls; you can find the library here: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/PathControls.js
This simple solution is based on the book: Learning Three.js: "3D JavaScript Library for WebGL"; It’s very good to learn something from Three, and I recommend that you read it; First we add PathControls.js to our document:
<script src="js/PathControls.js"></script>
then we will add some variables before the init () function:
var controls;
var clock = new THREE.Clock();
var pathControls;
Now we need to do some work 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 );
Finally, you need these 3 lines in your animate () function so that the camera really moves with time:
var delta = clock.getDelta();
THREE.AnimationHandler.update(delta);
pathControls.update(delta);
( , 5 , : ):
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;
}
, / , , ( , ):
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