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

简介: 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,源码和模型


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

目录
相关文章
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的高校体育运动会比赛系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的高校体育运动会比赛系统附带文章和源代码部署视频讲解等
71 5
|
7月前
|
JavaScript 前端开发 小程序
JavaScript获取当前url路径
JavaScript获取当前url路径
|
3月前
|
JavaScript
Vue3基础(19)___vite.config.js中配置路径别名
本文介绍了如何在Vue 3的Vite配置文件`vite.config.js`中设置路径别名,以及如何在页面中使用这些别名导入模块。
147 0
Vue3基础(19)___vite.config.js中配置路径别名
|
7月前
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
204 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学校运动会信息管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学校运动会信息管理系统附带文章源码部署视频讲解等
53 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的学校运动会信息管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的学校运动会信息管理系统附带文章和源代码部署视频讲解等
44 2
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的一家运动鞋店的产品推广网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的一家运动鞋店的产品推广网站附带文章和源代码部署视频讲解等
44 1
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的运动器械购物商城附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的运动器械购物商城附带文章和源代码部署视频讲解等
36 1
若依修改,改若依首页,若依修改了路由不出现如何解决,修改路由必须在permission.js中的白名单添加新的路由,修改了路由,不出现,解决方法是在白名单中添加对应的路径:
若依修改,改若依首页,若依修改了路由不出现如何解决,修改路由必须在permission.js中的白名单添加新的路由,修改了路由,不出现,解决方法是在白名单中添加对应的路径:
若依修改-------控制若依重定向的路径,控制路径重定向的写法路径在,在permission.js文件中控制重定向
若依修改-------控制若依重定向的路径,控制路径重定向的写法路径在,在permission.js文件中控制重定向