VUE2+THREE.JS 设定巡航行动轨迹

我们写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);
},

3. 绘制路径到场景里
   

//绘制路径到场景下
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);
}

参考博客

博客