【ThreeJs】moving model

沿着样条曲线运动的汽车模型，可调整相机视角

<template>template>

<script setup>
// https://threejs.org/docs/index.html#manual/zh/introduction/Loading-3D-models
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

/************************* init *************************/
const scene = new THREE.Scene();
// PerspectiveCamera 透视摄像机
// 参数：视野角度（FOV），长宽比（aspect ratio），近截面（near）和远截面（far）只能看到两个值之间的物体
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 0, 10);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xffffff)); // 背景白色
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

/************************** 基础配置 *************************/
// 坐标系。红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴
const axes = new THREE.AxesHelper(20);
scene.add(axes);

// 背景色，边界雾化
scene.background = new THREE.Color(0xa0a0a0); // 灰
// scene.fog = new THREE.Fog(0xa0a0a0, 10, 30);

// 屏幕自适应
window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

// 控制相机视角
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
// 调用放在最后
function animate() {
  requestAnimationFrame(animate);

  // required if controls.enableDamping or controls.autoRotate are set to true
  controls.update();
  moveOnCurve(); // 刷新

  renderer.render(scene, camera);
}

/************************ 模型 ***********************/
// 加载纹理
const texture = new THREE.TextureLoader().load(
  "model/textures/930_wunderbaum_baseColor.png"
);
const material = new THREE.MeshBasicMaterial({ map: texture }); // MeshBasicMaterial：不受光照影响；MeshLambertMaterial：受光照影响

// 加载模型
const loader = new GLTFLoader();
loader.load(
  "model/scene.gltf",
  (gltf) => {
    scene.add(gltf.scene);
    model = gltf.scene;

    // 加贴图
    gltf.scene.traverse(function (object) {
      if (object.type === "Mesh") {
        console.log(object.material); //控制台查看 mesh 材质
        object.material = material;
      }
    });
    renderer.render(scene, camera);
  },
  undefined,
  (error) => {
    console.error(error);
  }
);

/************************* 动起来！ *************************/
let curve = null,
  model = null;
// 路径曲线，样条曲线
(function makeCurve() {
  //Create a closed wavey loop
  curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(25, 0, 0),
    new THREE.Vector3(0, 0, 25),
  ]);
  curve.curveType = "catmullrom";
  curve.closed = true; //设置是否闭环
  curve.tension = 0.5; //设置线的张力，0为无弧度折线

  // 为曲线添加材质在场景中显示出来，不显示也不会影响运动轨迹，相当于一个Helper
  const points = curve.getPoints(50);
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({ color: 0x000000 });

  // Create the final object to add to the scene
  const curveObject = new THREE.Line(geometry, material);
  scene.add(curveObject);
})();

let progress = 0; // 物体运动时在运动路径的初始位置，范围0~1
const velocity = 0.001; // 影响运动速率的一个值，范围0~1，需要和渲染频率结合计算才能得到真正的速率
// 物体沿线移动方法
function moveOnCurve() {
  if (curve == null || model == null) {
    console.log("Loading", curve, model);
  } else {
    if (progress <= 1 - velocity) {
      const point = curve.getPointAt(progress); //获取样条曲线指定点坐标
      const pointBox = curve.getPointAt(progress + velocity); //获取样条曲线指定点坐标

      if (point && pointBox) {
        model.position.set(point.x, point.y, point.z);
        // .lookAt ( eye : Vector3, target : Vector3, up : Vector3 ) : this,构造一个旋转矩阵，从eye 指向 target，由向量 up 定向。
        model.lookAt(pointBox.x, pointBox.y, pointBox.z); //因为这个模型加载进来默认面部是正对Z轴负方向的，所以直接lookAt会导致出现倒着跑的现象，这里用重新设置朝向的方法来解决。

        const offsetAngle = 0; //目标移动时的朝向偏移

        // 以下代码在多段路径时可重复执行
        const mtx = new THREE.Matrix4(); //创建一个4维矩阵
        // mtx.lookAt(model.position, pointBox, model.up); // 反向
        mtx.multiply(
          new THREE.Matrix4().makeRotationFromEuler(
            new THREE.Euler(0, offsetAngle, 0)
          )
        );
        var toRot = new THREE.Quaternion().setFromRotationMatrix(mtx); //计算出需要进行旋转的四元数值
        model.quaternion.slerp(toRot, 0.2);
      }

      progress += velocity;
    } else {
      progress = 0;
    }
  }
}

animate();
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152