three.js 汽车行驶动画效果

印峰

实现原理是使用TWEEN.Tween实现动画效果
实现

汽车模型加载

使用Promise编写模型的异步加载方法
参数position是汽车初始位置，参数rotation是汽车初始朝向

1. Car.prototype.loadCar = function (position, rotation) {
2.     let onProgress = function (xhr) {
4.     };
6.     return new Promise((resolve, reject) => {
7.         if (!this.model) {
8.             let loader = new THREE.GLTFLoader();
9.             loader.load(this.url, gltf => {
10.                 const model = gltf.scene || gltf.scenes[0];
12.                 model.position.x = position.x;
13.                 model.position.y = position.y;
14.                 model.position.z = position.z;
16.                 model.scale.set(0.25, 0.25, 0.25);
18.                 model.rotation.set(rotation.x, rotation.y, rotation.z);
20.                 this.model = model;
21.                 this.scene.add(model);
23.                 resolve(model);
25.             }, onProgress, xhr => {
26.                 console.error(xhr);
27.                 console.info('模型 ' + url + ' 加载失败');
28.                 reject(xhr);
29.             });
30.         } else {
31.             resolve(this.model);
32.         }
33.     });
34. }

复制代码

调用：
第1个参数是汽车初始位置，第2个参数表示汽车初始朝向：西

1. await car.loadCar(positions[0], car.WEST);

复制代码

汽车行驶

参数start是行驶起点位置，参数end是行驶终点位置，参数speed是速度
this.model是汽车模型，onUpdate事件中，不断更新它的position
this.label是汽车车牌号标签，onUpdate事件中，不断更新它的position

1. Car.prototype.moveCar = function (start, end, speed) {
2.     let distance = this.distance(start, end);
3.     let time = distance / speed * 1000;
5.     return new Promise((resolve, reject) => {
6.         this.tween = new TWEEN.Tween({
7.             x: start.x,
8.             y: start.y,
9.             z: start.z
10.         }).to({
11.             x: end.x,
12.             y: end.y,
13.             z: end.z
14.         }, time).start().onUpdate(e => {
15.             if (this.model) {
16.                 this.model.position.x = e.x;
17.                 this.model.position.y = e.y;
18.                 this.model.position.z = e.z;
19.             }
20.             if (this.label) {
21.                 this.label.position.x = e.x;
22.                 this.label.position.y = e.y + 1.2;
23.                 this.label.position.z = e.z;
24.             }
25.         }).onComplete(() => {
26.             TWEEN.remove(this.tween);
27.             resolve();
28.         });
29.     });
30. }

复制代码

汽车转弯

参数start是动画开始时的汽车朝向，end是动画结束时的汽车朝向

1. Car.prototype.rotateCar = function (start, end) {
2.     return new Promise((resolve, reject) => {
3.         this.tween = new TWEEN.Tween({
4.             x: start.x,
5.             y: start.y,
6.             z: start.z
7.         }).to({
8.             x: end.x,
9.             y: end.y,
10.             z: end.z
11.         }, 300).start().onUpdate(e => {
12.             if (this.model) {
13.                 this.model.rotation.set(e.x, e.y, e.z);
14.             }
15.         }).onComplete(() => {
16.             TWEEN.remove(this.tween);
17.             resolve();
18.         });
19.     });
20. }

复制代码

汽车行驶多段路线

上述汽车行驶和汽车转弯方法都是异步方法，所以避免了回调地狱，不然下面的多段行驶及转弯就不好写了

1. Cars.prototype.carLine1 = function () {
2.     if (!this.run) return;
4.     let car = new Car(this.scene, this.renderer, './models/车红.glb');
5.     this.cars.push(car);
7.     let positions = [
8.         { x: -121, y: 1.5, z: -16 },
9.         { x: -130.5, y: 1.5, z: -16 },
10.         { x: -130.5, y: 1.5, z: 4 },
11.         { x: -82, y: 1.5, z: 4 },
12.         { x: -82, y: 1.5, z: 14.7 },
13.         { x: -18.8, y: 1.5, z: 14.7 },
14.         { x: -18.8, y: 1.5, z: 70 },
15.     ];
17.     let speed = 5;
19.     setTimeout(async () => {
20.         await car.loadCar(
21.             positions[0],
22.             car.WEST);
24.         car.showLabel(positions[0], "皖A67893");
26.         await car.moveCar(
27.             positions[0],
28.             positions[1],
29.             speed);
31.         await car.rotateCar(
32.             car.WEST,
33.             car.SOUTH);
35.         await car.moveCar(
36.             positions[1],
37.             positions[2],
38.             speed);
40.         await car.rotateCar(
41.             car.SOUTH,
42.             car.EAST);
44.         await car.moveCar(
45.             positions[2],
46.             positions[3],
47.             speed);
49.         await car.rotateCar(
50.             car.EAST,
51.             car.SOUTH);
53.         await car.moveCar(
54.             positions[3],
55.             positions[4],
56.             speed);
58.         await car.rotateCar(
59.             car.SOUTH,
60.             car.EAST);
62.         await car.moveCar(
63.             positions[4],
64.             positions[5],
65.             speed);
67.         await car.rotateCar(
68.             car.EAST,
69.             car.SOUTH);
71.         await car.moveCar(
72.             positions[5],
73.             positions[6],
74.             speed);
76.         car.unloadCar();
78.         this.carLine1(2000);
79.     }, 5000);
80. }
82. Cars.prototype.carLine2 = function () {
83.     if (!this.run) return;
85.     let car = new Car(this.scene, this.renderer, './models/车蓝.glb');
86.     this.cars.push(car);
88.     let positions = [
89.         { x: -5, y: 1.5, z: 70 },
90.         { x: -5, y: 1.5, z: 14.7 },
91.         { x: 70, y: 1.5, z: 14.7 }
92.     ];
94.     let speed = 5;
96.     setTimeout(async () => {
97.         await car.loadCar(
98.             positions[0],
99.             car.NORTH);
101.         car.showLabel(positions[0], "皖AD887U");
103.         await car.moveCar(
104.             positions[0],
105.             positions[1],
106.             speed);
108.         await car.rotateCar(
109.             car.NORTH,
110.             car.EAST);
112.         await car.moveCar(
113.             positions[1],
114.             positions[2],
115.             speed);
117.         car.unloadCar();
119.         this.carLine2(3000);
120.     }, 6000);
121. }

复制代码

汽车行驶多段路线改进

上述汽车行驶多段路线的代码可以改进：

1. // 汽车朝向
2. let EAST = { x: 0, y: 1.5707963, z: 0 };
3. let SOUTH = { x: 0, y: 0, z: 0 };
4. let WEST = { x: 0, y: -1.5707963, z: 0 };
5. let NORTH = { x: 0, y: 3.1415926, z: 0 };
7. Cars.prototype.carLine1 = function () {
8.     if (!this.run) return;
10.     let car = new Car(this.scene, this.renderer, './models/车红.glb');
11.     this.cars.push(car);
13.     let positions = [
14.         { x: -121, y: 1.5, z: -16 },
15.         { x: -130.5, y: 1.5, z: -16 },
16.         [WEST, SOUTH],
17.         { x: -130.5, y: 1.5, z: 4 },
18.         [SOUTH, EAST],
19.         { x: -82, y: 1.5, z: 4 },
20.         [EAST, SOUTH],
21.         { x: -82, y: 1.5, z: 14.7 },
22.         [SOUTH, EAST],
23.         { x: -18.8, y: 1.5, z: 14.7 },
24.         [EAST, SOUTH],
25.         { x: -18.8, y: 1.5, z: 70 },
26.     ];
28.     let speed = 5;
30.     setTimeout(async () => {
31.         await car.loadCar(
32.             positions[0],
33.             WEST);
35.         car.showLabel(positions[0], "皖A67893");
37.         for (let i = 1; i < positions.length; i++) {
38.             if (positions[i].length) {
39.                 await car.rotateCar(positions[i][0], positions[i][1]);
40.             } else {
41.                 let start = positions[i - 1].length ? positions[i - 2] : positions[i - 1];
42.                 await car.moveCar(start, positions[i], speed);
43.             }
44.         }
46.         car.unloadCar();
48.         this.carLine1(2000);
49.     }, 5000);
50. }

复制代码

调用

1. let cars = new Cars(app.scene, app.renderer);
2. cars.carLine1();
3. cars.carLine2();

复制代码

显示车牌号

1. Car.prototype.showLabel = function (position, text) {
2.     let canvasDraw = new CanvasDraw();
3.     let canvasTexture = canvasDraw.drawCarLabel(THREE, this.renderer, text, '#006688'); //标签
5.     let spriteMaterial = new THREE.SpriteMaterial({
6.         map: canvasTexture,
7.         color: 0xffffff,
8.         depthTest: false,
9.         side: THREE.DoubleSide,
10.         sizeAttenuation: false,
11.         transparent: true,
12.         opacity: 0.8
13.     });
15.     let sprite = new THREE.Sprite(spriteMaterial);
16.     sprite.scale.set(0.2, 0.1, 0.2)
17.     sprite.position.x = position.x;
18.     sprite.position.y = position.y + 1.2;
19.     sprite.position.z = position.z;
21.     this.label = sprite;
22.     this.scene.add(sprite);
24.     return sprite;
25. }

复制代码

完整代码

car.js

1. // 汽车
3. let Car = (function () {
5.     function Car(scene, renderer, url) {
6.         this.scene = scene;
7.         this.renderer = renderer;
8.         this.url = url;
9.         this.clock = new THREE.Clock();
10.     }
12.     Car.prototype.loadCar = function (position, rotation) {
13.         let onProgress = function (xhr) {
15.         };
17.         return new Promise((resolve, reject) => {
18.             if (!this.model) {
19.                 let loader = new THREE.GLTFLoader();
20.                 loader.load(this.url, gltf => {
21.                     const model = gltf.scene || gltf.scenes[0];
23.                     model.position.x = position.x;
24.                     model.position.y = position.y;
25.                     model.position.z = position.z;
27.                     model.scale.set(0.25, 0.25, 0.25);
29.                     model.rotation.set(rotation.x, rotation.y, rotation.z);
31.                     this.model = model;
32.                     this.scene.add(model);
34.                     resolve(model);
36.                 }, onProgress, xhr => {
37.                     console.error(xhr);
38.                     console.info('模型 ' + url + ' 加载失败');
39.                     reject(xhr);
40.                 });
41.             } else {
42.                 resolve(this.model);
43.             }
44.         });
45.     }
47.     Car.prototype.unloadCar = function () {
48.         this.stopTween();
49.         this.removeModel();
50.         this.removeLabel();
51.     }
53.     Car.prototype.stopTween = function () {
54.         if (this.tween) {
55.             TWEEN.remove(this.tween);
56.         } else {
57.             setTimeout(() => {
58.                 this.stopTween();
59.             }, 100);
60.         }
61.     }
63.     Car.prototype.removeModel = function () {
64.         if (this.model) {
65.             this.scene.remove(this.model);
66.         } else {
67.             setTimeout(() => {
68.                 this.removeModel();
69.             }, 100);
70.         }
71.     }
73.     Car.prototype.removeLabel = function () {
74.         if (this.label) {
75.             this.scene.remove(this.label);
76.         } else {
77.             setTimeout(() => {
78.                 this.removeLabel();
79.             }, 100);
80.         }
81.     }
83.     Car.prototype.moveCar = function (start, end, speed) {
84.         let distance = this.distance(start, end);
85.         let time = distance / speed * 1000;
87.         return new Promise((resolve, reject) => {
88.             this.tween = new TWEEN.Tween({
89.                 x: start.x,
90.                 y: start.y,
91.                 z: start.z
92.             }).to({
93.                 x: end.x,
94.                 y: end.y,
95.                 z: end.z
96.             }, time).start().onUpdate(e => {
97.                 if (this.model) {
98.                     this.model.position.x = e.x;
99.                     this.model.position.y = e.y;
100.                     this.model.position.z = e.z;
101.                 }
102.                 if (this.label) {
103.                     this.label.position.x = e.x;
104.                     this.label.position.y = e.y + 1.2;
105.                     this.label.position.z = e.z;
106.                 }
107.             }).onComplete(() => {
108.                 TWEEN.remove(this.tween);
109.                 resolve();
110.             });
111.         });
112.     }
114.     Car.prototype.rotateCar = function (start, end) {
115.         return new Promise((resolve, reject) => {
116.             this.tween = new TWEEN.Tween({
117.                 x: start.x,
118.                 y: start.y,
119.                 z: start.z
120.             }).to({
121.                 x: end.x,
122.                 y: end.y,
123.                 z: end.z
124.             }, 300).start().onUpdate(e => {
125.                 if (this.model) {
126.                     this.model.rotation.set(e.x, e.y, e.z);
127.                 }
128.             }).onComplete(() => {
129.                 TWEEN.remove(this.tween);
130.                 resolve();
131.             });
132.         });
133.     }
135.     Car.prototype.showLabel = function (position, text) {
136.         let canvasDraw = new CanvasDraw();
137.         let canvasTexture = canvasDraw.drawCarLabel(THREE, this.renderer, text, '#006688'); //标签
139.         let spriteMaterial = new THREE.SpriteMaterial({
140.             map: canvasTexture,
141.             color: 0xffffff,
142.             depthTest: false,
143.             side: THREE.DoubleSide,
144.             sizeAttenuation: false,
145.             transparent: true,
146.             opacity: 0.8
147.         });
149.         let sprite = new THREE.Sprite(spriteMaterial);
150.         sprite.scale.set(0.2, 0.1, 0.2)
151.         sprite.position.x = position.x;
152.         sprite.position.y = position.y + 1.2;
153.         sprite.position.z = position.z;
155.         this.label = sprite;
156.         this.scene.add(sprite);
158.         return sprite;
159.     }
161.     Car.prototype.distance = function (p1, p2) {
162.         return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2) + Math.pow(p1.z - p2.z, 2));
163.     }
165.     return Car;
167. })();

复制代码

cars.js

1. // 多个车辆
3. let Cars = (function () {
5.     // 汽车朝向
6.     let EAST = { x: 0, y: 1.5707963, z: 0 };
7.     let SOUTH = { x: 0, y: 0, z: 0 };
8.     let WEST = { x: 0, y: -1.5707963, z: 0 };
9.     let NORTH = { x: 0, y: 3.1415926, z: 0 };
11.     function Cars(scene, renderer) {
12.         this.scene = scene;
13.         this.renderer = renderer;
14.         this.cars = [];
15.         this.run = true;
16.     }
18.     Cars.prototype.carLine1 = function () {
19.         if (!this.run) return;
21.         let car = new Car(this.scene, this.renderer, './models/车红.glb');
22.         this.cars.push(car);
24.         let positions = [
25.             { x: -121, y: 1.5, z: -16 },
26.             { x: -130.5, y: 1.5, z: -16 },
27.             [WEST, SOUTH],
28.             { x: -130.5, y: 1.5, z: 4 },
29.             [SOUTH, EAST],
30.             { x: -82, y: 1.5, z: 4 },
31.             [EAST, SOUTH],
32.             { x: -82, y: 1.5, z: 14.7 },
33.             [SOUTH, EAST],
34.             { x: -18.8, y: 1.5, z: 14.7 },
35.             [EAST, SOUTH],
36.             { x: -18.8, y: 1.5, z: 70 },
37.         ];
39.         let speed = 5;
41.         setTimeout(async () => {
42.             await car.loadCar(
43.                 positions[0],
44.                 WEST);
46.             car.showLabel(positions[0], "皖A67893");
48.             for (let i = 1; i < positions.length; i++) {
49.                 if (positions[i].length) {
50.                     await car.rotateCar(positions[i][0], positions[i][1]);
51.                 } else {
52.                     let start = positions[i - 1].length ? positions[i - 2] : positions[i - 1];
53.                     await car.moveCar(start, positions[i], speed);
54.                 }
55.             }
57.             car.unloadCar();
59.             this.carLine1(2000);
60.         }, 5000);
61.     }
63.     Cars.prototype.carLine2 = function () {
64.         if (!this.run) return;
66.         let car = new Car(this.scene, this.renderer, './models/车蓝.glb');
67.         this.cars.push(car);
69.         let positions = [
70.             { x: -5, y: 1.5, z: 70 },
71.             { x: -5, y: 1.5, z: 14.7 },
72.             { x: 70, y: 1.5, z: 14.7 }
73.         ];
75.         let speed = 5;
77.         setTimeout(async () => {
78.             await car.loadCar(
79.                 positions[0],
80.                 NORTH);
82.             car.showLabel(positions[0], "皖AD887U");
84.             await car.moveCar(
85.                 positions[0],
86.                 positions[1],
87.                 speed);
89.             await car.rotateCar(
90.                 NORTH,
91.                 EAST);
93.             await car.moveCar(
94.                 positions[1],
95.                 positions[2],
96.                 speed);
98.             car.unloadCar();
100.             this.carLine2(3000);
101.         }, 6000);
102.     }
104.     Cars.prototype.clear = function () {
105.         this.run = false;
106.         this.cars.forEach(car => {
107.             car.unloadCar();
108.         });
109.     }
111.     return Cars;
113. })();

复制代码

调用

1. // 显示汽车
2. function showCars() {
3.         cars = new Cars(app.scene, app.renderer);
4.         cars.carLine1();
5.         cars.carLine2();
6. }
8. // 清除汽车
9. function clearCars() {
10.         cars.clear();
11. }
13. // 显示汽车
14. showCars();

复制代码

总结

• 解耦：依赖的scene, renderer参数是通过构造函数传到Car和Cars对象中的
  
• 汽车行驶和转向等方法都是异步方法，可以避免回调地狱，这样汽车多段行驶的代码会写的比较清晰
  
• 在实现并完善功能的过程中不断重构：回调地狱的实现方式-->调用moveCar和rotateCar时直接传递坐标，很多坐标及转向数据和方法调用掺和在一起，看着眼花-->坐标和转向数据和方法调用逻辑分离，看着很清晰
  

运行效果

来源:https://www.cnblogs.com/s0611163/p/17879849.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！