经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » three.js » 查看文章
three.js 汽车行驶动画效果
来源：cnblogs　　作者：0611163　　时间：2023/12/8 11:48:44　　对本文有异议

实现原理是使用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();

总结

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

运行效果

原文链接：https://www.cnblogs.com/s0611163/p/17879849.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

three.js热门文章

  • Three.js 进阶之旅：全景漫游-初阶移动相机版
  • threeJs实现波纹扩散及光标浮动效果详解
  • Three.js 进阶之旅：滚动控制模型动画和相机动画 &#129442;
  • three.js镜头追踪的移动效果实例
  • Three.js 进阶之旅：物理效果-3D乒乓球小游戏 &#127955;
  • Three.js 进阶之旅：物理效果-碰撞和声音 &#128165;
  • Three.js 进阶之旅：新春特典-Rabbit craft go &#128007;
  • Three.js 进阶之旅：全景漫游-高阶版在线看房 &#127969;
  • 如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课（一）
  • three.js 汽车行驶动画效果

    • three.js推荐文章

  • 如何基于three.js(webgl)引擎架构，实现3D密集架库房,3D档案室（3d机器人取档、机器人盘点、人工查档、设备巡检）
  • three.js 汽车行驶动画效果
  • 如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课（一）
  • Three.js 进阶之旅：滚动控制模型动画和相机动画 &#129442;
  • Three.js 进阶之旅：全景漫游-高阶版在线看房 &#127969;
  • Three.js 进阶之旅：全景漫游-初阶移动相机版
  • Three.js 进阶之旅：物理效果-3D乒乓球小游戏 &#127955;
  • threeJs实现波纹扩散及光标浮动效果详解
  • Three.js 进阶之旅：物理效果-碰撞和声音 &#128165;
  • Three.js 进阶之旅：新春特典-Rabbit craft go &#128007;

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号