设定巡航行动轨迹
- 引入three.path
- 初始化坐标点
- animate 执行行动轨迹动画
- 参考博客
我们写3D时，常常会有按照一定轨迹去浏览模型，
所以,我们要先确认行动轨迹，渲染出行动轨迹以后，再让人物按照行动轨迹去移动
引入three.path
cnpm i three.path
// 绘制路径，相较于tubeGeometry，贴图的效果展现得更好
import { PathGeometry, PathPointList } from "three.path";
初始化坐标点
1.设定关键点
这些关键点，可以通过
点击模型事件，获取世界坐标点，快捷的确认点的位置
//漫游路径参数
let pointArr = [
[-8978.959517900606, 45.881342118136104, 1947.554962778966],
[13093.059569307103, 45.881343841552734, 1947.554962778966],
[13293.059569307103, 45.881343841552734, 1947.554962778966],
[13293.059569307103, 45.881343841552734, 1747.554962778966],
[13293.059569307103, 45.881343841552734, -1927.1468571561695],
[13293.059569307103, 45.881343841552734, -2127.1468571561695],
[13093.059569307103, 45.881343841552734, -2127.1468571561695],
[-8698.372139134899, 45.881343841552734, -2127.1468571561695],
[-8898.372139134899, 45.881343841552734, -2127.1468571561695],
[-8898.372139134899, 45.881343841552734, -2327.1468571561695],
[-8898.372139134899, 45.881343841552734, -5454.887204286608],
[-8898.372139134899, 45.881343841552734, -5654.887204286608],
[-8698.372139134899, 45.881343841552734, -5654.887204286608],
[13164.994912910091, 45.881343841552734, -5654.887204286608],
[13364.994912910091, 45.881343841552734, -5654.887204286608],
[13364.994912910091, 45.881343841552734, -5854.887204286608],
[13319.501150018768, 45.881343841552734, -9088.742337004702],
[13319.501150018768, 45.881343841552734, -9288.742337004702],
[13119.501150018768, 45.881343841552734, -9288.742337004702],
[-9286.076169289825, 45.881343841552734, -9288.742337004702],
[-9486.076169289825, 45.881343841552734, -9288.742337004702],
[-9486.076169289825, 45.881343841552734, -9088.742337004702],
[-9486.076169289825, 45.881343841552734, 4684.565209431695],
[-9486.076169289825, 45.881343841552734, 4984.565209431695],
[-9286.076169289825, 45.881343841552734, 4984.565209431695],
[12897.021265345924, 45.881343841552734, 4984.565209431695],
[13097.021265345924, 45.881343841552734, 4984.565209431695],
[13097.021265345924, 45.881343841552734, 5689.140945882991],
];
2.初始化路径漫游–坐标
可以通过创建圆点，直观的看出点的位置
//路径漫游 -- 坐标
initPathPoints() {
// 将数组转为坐标数组
let points = [];
// 每3个元素组成一个坐标
for (let i = 0; i < pointArr.length; i++) {
// 将数组中的三个元素，分别作为坐标的x, y, z
points.push(new THREE.Vector3(pointArr[i][0], pointArr[i][1], pointArr[i][2]));
//创建圆点
// const geo = new THREE.SphereGeometry(50);
// const mat = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// const mesh = new THREE.Mesh(geo, mat);
// mesh.position.set(pointArr[i][0], pointArr[i][1], pointArr[i][2]);
// mesh.name = i;
// scene.add(mesh);
}
// 生成一条不闭合曲线 pathCurve 全局定义的参数
pathCurve = new THREE.CatmullRomCurve3(points);
},
- 绘制路径到场景里
//绘制路径到场景下
async renderPath() {
// 金色箭头的png作为材质
const arrow = await new THREE.TextureLoader().loadAsync(require("../../assets/images/3ddashboard/3dworkshop/jiantou2.png"));
// 贴图在水平方向上允许重复
arrow.wrapS = THREE.RepeatWrapping;
// 向异性
arrow.anisotropy = renderer.capabilities.getMaxAnisotropy();
// 创建一个合适的材质
const material = new THREE.MeshPhongMaterial({
map: arrow,
transparent: true, //透明度
depthWrite: false,
blending: THREE.AdditiveBlending,
});
// 确定一个向上的向量
const up = new THREE.Vector3(0, 1000, 0);
// region 引入three.path包
// 创建路径点的集合
pathPoints = new PathPointList();
// 设置集合属性
pathPoints.set(pathCurve.getPoints(1000), 0.5, 2, up, false);
// 创建路径几何体
const geometry = new PathGeometry();
// 更新几何体的属性
geometry.update(pathPoints, {
width: 200,
arrow: false,
});
// 创建路径的网格模型
pathToShow = new THREE.Mesh(geometry, material);
pathToShow.name = "path";
// 添加到场景
scene.add(pathToShow);
// endregion 引入three.path包
// 在每一帧渲染的时候，更新贴图沿x轴的偏移量，形成uv动画效果
this.registerRenderFunc("walk-way", () => {
arrow.offset.x -= 0.02;
});
},
/**
* 注册渲染中执行的方法
* @param name 设定函数名称
* @param func 函数方法体
*/
registerRenderFunc(name, func) {
renderFunc[name] = func;
},
animate 执行行动轨迹动画
// 执行行动轨迹移动动画
if (renderFunc["walk-way"]) {
renderFunc["walk-way"](delta);
}
参考博客
博客
