Three.js模拟沿着路径进行运动，模拟飞机飞行，并保持运动方向

1，介绍

该示例使用的是 r95版本Three.js库。

主要实现功能：加载飞机模型，初始化任意轨迹线路，沿着轨迹进行运动并保持方向。

效果图如下：

 ​​​2，主要说明

曲线通过三维样条曲线曲线类THREE.CatmullRomCurve3创建,然后从样条曲线通过曲线的方法.getPoints()获取曲线上一系列的顶点坐标，得到顶点坐标就可以通过顶点坐标结合threejs帧动画来控制网格模型沿着曲线轨迹移动

function motion() {
	// 通过类CatmullRomCurve3创建一个3D样条曲线
	curve = new THREE.CatmullRomCurve3([
		new THREE.Vector3(-1000, -5000, -5000),
		new THREE.Vector3(1000, 0, 0),
		new THREE.Vector3(800, 5000, 5000),
		new THREE.Vector3(-500, 0, 10000)
	]);
	// 样条曲线均匀分割100分，返回51个顶点坐标
	var points = curve.getPoints(100);
	// 控制台查看返回的顶点坐标
	// console.log('points', points);
	var geometry = new THREE.Geometry();
	// 把从曲线轨迹上获得的顶点坐标赋值给几何体
	geometry.vertices = points
	var material = new THREE.LineBasicMaterial({
		color: 0x4488ff
	});
	var line = new THREE.Line(geometry, material);
	scene.add(line)

	// 通过Threejs的帧动画相关API播放网格模型沿着曲线做动画运动
	// 声明一个数组用于存储时间序列
	let arr = []
	for (let i = 0; i < 101; i++) {
		arr.push(i)
	}
	// 生成一个时间序列
	var times = new Float32Array(arr);

	var posArr = []
	points.forEach(elem => {
		posArr.push(elem.x, elem.y, elem.z)
	});
	// 创建一个和时间序列相对应的位置坐标系列
	var values = new Float32Array(posArr);
	// 创建一个帧动画的关键帧数据，曲线上的位置序列对应一个时间序列
	var posTrack = new THREE.KeyframeTrack('.position', times, values);
	let duration = 101;
	let clip = new THREE.AnimationClip("default", duration, [posTrack]);
	mixer = new THREE.AnimationMixer(mesh);
	let AnimationAction = mixer.clipAction(clip);
	AnimationAction.play();
}

实时获取曲线上的点，并修改运动位置和方向

function changeLookAt(t) {
	// 当前点在线条上的位置
	var position = curve.getPointAt(t);
	mesh.position.copy(position);
	
	// 返回一个点t在曲线上位置向量的法线向量
	const tangent = curve.getTangentAt(t);
	// 位置向量和切线向量相加即为所需朝向的点向量
	const lookAtVec = tangent.add(position);
	mesh.lookAt(lookAtVec);
}

 随时间实时改变物体位置和朝向

 3，源码和模型

需要学习案例、模型或者其他源码，请进入博客首页查看其他文章或者留言

联系我微信：1171053128

​