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,源码和模型
需要学习案例、模型或者其他源码,请进入博客首页查看其他文章或者留言