threejs模拟车辆行驶转弯（车头转向）
受疫情影响，开学不成，于是乎找了个公司实习。略微学过一点cesium，但是领导要求我使用three.js搭建一个智慧园区，我…
好在是实习生，每天不用做什么事情，只需要看看网上教程就行了。边学边总结，关于three.js的官方资源不是特别多，一些好的例子也不多，只能慢慢找慢慢摸索。
我也一边学习一边记录一下我的学习过程，如果能帮到后来的人就更好了，也算是做了一点点贡献了，话不多说，开始！
模拟车辆，首先得有车辆，然后车辆得动。问题来了，车辆怎么动？于是我查了一下，找到了这篇文章，代码效果如下。
这是我的最终结果图：
<br><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个three.js文件_WebGL三维场景</title>
<style>
body {
margin: 0;
overflow: hidden; //隐藏body窗口区域滚动条
}
</style>
<!--引入three.js三维引擎-->
<!-- <script src="./3D/example/three.min.js"></script> -->
<script src="https://threejs.org/build/three.js"></script>
<!--引入轨道控件OrbitControls.js-->
<script src="./3D/example/OrbitControls.js"></script>
</head>
<body>
<script>
/**
* 创建场景对象
*/
var scene = new THREE.Scene();
/**
* 创建一个设置重复纹理的管道
*/
var curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(-80, -40, 0),
new THREE.Vector3(-70, 40, 0),
new THREE.Vector3(70, 40, 0),
new THREE.Vector3(80, -40, 0)
],false/*是否闭合*/);
var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('run.jpg');
// 设置阵列模式为 RepeatWrapping
texture.wrapS = THREE.RepeatWrapping
texture.wrapT=THREE.RepeatWrapping
// 设置x方向的偏移(沿着管道路径方向)，y方向默认1
//等价texture.repeat= new THREE.Vector2(20,1)
texture.repeat.x = 20;
var tubeMaterial = new THREE.MeshPhongMaterial({
map: texture,
transparent: true,
});
var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
scene.add(tube)
/**
* 创建一个半透明管道
*/
var tubeGeometry2 = new THREE.TubeGeometry(curve, 100, 2, 50, false);
var tubeMaterial2 = new THREE.MeshPhongMaterial({
color: 0x4488ff,
transparent: true,
opacity: 0.3,
});
var tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);
scene.add(tube2)
scene.add(new THREE.AxesHelper(300))
//小人box
//geometryP = new THREE.CircleGeometry( 5, 32 );
geometryP = new THREE.SphereGeometry(5,16,16);
console.log('geometryP',geometryP);
var materialP = new THREE.MeshBasicMaterial( { color: 0xff0000 ,side:THREE.DoubleSide} );
circleP = new THREE.Mesh( geometryP, materialP );
scene.add( circleP );
geometryP.rotateY(Math.PI/2);
circleP.position.set(-80, -40, 0);
console.log(circleP);
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x888888);
scene.add(ambient);
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 100; //三维场景缩放系数
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
// renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
var progress=0;
// 渲染函数
function render() {
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render);
// 使用加减法可以设置不同的运动方向
// 设置纹理偏移
texture.offset.x -= 0.06
if(progress>1.0){
return; //停留在管道末端,否则会一直跑到起点 循环再跑
}
progress += 0.0009;
console.log(progress);
if(curve){
let point = curve.getPoint(progress);
if(point&&point.x){
circleP.position.set(point.x,point.y,point.z);
}
}
}
render();
var controls = new THREE.OrbitControls(camera); //创建控件对象
</script>
</body>
</html>
可以看到，大致的思路就是：
1、先创建一个 var curve = new THREE.CatmullRomCurve3，在这个curve里定义几个控制点（包括起点和终点）。
2、用这个curve创建一个管道并且分段
var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);
可以看出把这个管道分了100段并且不闭合。
3、创建一个球（我们的汽车）， geometryP = new THREE.SphereGeometry(5,16,16); ,
circleP.position.set(-80, -40, 0);并且把球的位置设为我们curve的起点（是不是能猜出一点点了！！！）
4、没错！就是要将我们的球的位置，换成一段一段的管道的位置！
if(progress>1.0){
return; //停留在管道末端,否则会一直跑到起点 循环再跑
}
progress += 0.0009;
console.log(progress);
if(curve){
let point = curve.getPoint(progress);
if(point&&point.x){
circleP.position.set(point.x,point.y,point.z);
}
}
}
到这里原理就讲完了，我们就能做出这个球沿着这个管道运动的效果。
但是！！！
但是！！！
但是！！！
如果换成立方体或者是一个模型，一个有头尾的形状，就会发现，在拐弯时，车头是不动的，只是物体在不停的平移，这非常的不真实！
那么该怎么办？
我也是找了很久才从一个大神的消防车的代码中找到端倪
代码中这样写道：
//移动汽车
WTBS.prototype.moveCar = function (carObj,pointpath,moveTime, callBack) {
var _this = this;
function move(index) {
→→→→→→→ carObj.lookAt(pointpath[index].end);→
var unittime = Math.sqrt((pointpath[index].end.x - carObj.position.x) * (pointpath[index].end.x - carObj.position.x) + (pointpath[index].end.z - carObj.position.z) * (pointpath[index].end.z - carObj.position.z)) * 2 / _this.animationParam.select_V;
有一个carObj.lookAt(pointpath[index].end);，我就在想难道物体也可以设置这个lookAt？
试了一下，果然是可以的！于是乎在我的代码中这样写道：
if (progress > 1.0) {
return; //停留在管道末端,否则会一直跑到起点 循环再跑
}
progress += 0.0009;
// console.log(progress);
if (curve) {
let point = curve.getPoint(progress);
let point1 =curve.getPoint(progress+0.001);
if (point && point.x) {
circleP.position.set(point.x, point.y, point.z);
circleP.lookAt(point1.x, point1.y, point1.z);
// camera.position.set(point.x, point.y, point.z);
// camera.position.set(point.x, point.y, point.z);
// object.position.set(point.x,point.y,point.z);
}
}
对比之前的加了：
let point1 =curve.getPoint(progress+0.001);
....
circleP.lookAt(point1.x, point1.y, point1.z);
这两行代码，第一个是让point1感受提前拐弯，第二个就是传说中的掉转车头了！
效果如下
就是这样了，后面可能，可能会再记录一下怎么去掉轨道，太晚了要睡觉了！
引用的两篇文章地址分别是：
1、https://www.cnblogs.com/xuejianxiyang/p/9719715.html
2、https://www.cnblogs.com/yeyunfei/p/9629405.html