当前位置：首页 > news >正文

Three.js中Mesh的LookAt方法

news 来源：原创 2025/6/18 15:48:40

最近，Three.js的官网更新了，将原本放examples的地方改成了manual，里面是three.js的使用大合集，感兴趣的小伙伴可以刷一遍，会有很多收获！

今天记录一个之前没太注意过的方法——lookAt。以前只知道camera的lookAt方法，用于控制摄像机的朝向位置，而Object3D，也有类似的方法。Mesh作为Object3D的子类，自然也继承了相关的使用。
先贴一下源文件中关于lookAt的介绍：

    /**
     * Rotates the object to face a point in world space.
     * @remarks This method does not support objects having non-uniformly-scaled parent(s).
     * @param vector A vector representing a position in world space to look at.
     */
    lookAt(vector: Vector3): void;
    /**
     * Rotates the object to face a point in world space.
     * @remarks This method does not support objects having non-uniformly-scaled parent(s).
     * @param x Expects a `Float`
     * @param y Expects a `Float`
     * @param z Expects a `Float`
     */
    lookAt(x: number, y: number, z: number): void;

在空间中旋转改模型使其朝向某一个点，这就是lookAt的介绍。使用方法和camera的一毛一样，不在多说。

下面简单分享一个小例子，用于展示lookAt的使用场景。

看介绍就知道，这个是用来旋转的，那么就不难想到有那么几个应用场景，比如说让某个模型绕某一个点一直旋转，就可以在模型位置更新的同时，更新lookAt，使其一直朝向某一个点；又比如说让模型在空间中缓慢的按固定轨迹往复旋转。

这里的例子是采用一个坦克，坦克身体和炮筒按照不同的轨迹进行旋转，坦克本身不动：

let tank: Three.Group;
let pao: Three.Mesh;
let body: Three.Group;

new GLTFLoader().load("/tank.glb", (glb) => {
  tank = glb.scene;
  scene.add(tank);
  pao = tank.getObjectByName("炮筒");
  body = tank.getObjectByName("身体");
});

const bodyArray = [
  new Three.Vector3(10, 0, 10),
  new Three.Vector3(0, 0, 5),
  new Three.Vector3(-7, 0, 0),
  new Three.Vector3(-10, 0, 3),
  new Three.Vector3(-2, 0, -5),
  new Three.Vector3(2, 0, -10),
  new Three.Vector3(5, 0, -4),
  new Three.Vector3(10, 0, 0),
  new Three.Vector3(10, 0, 10),
];
const bodyCurve = new Three.CatmullRomCurve3(bodyArray, false, "chordal");
const bodyLines = bodyCurve.getPoints(2000);

const paoArray = [
  new Three.Vector3(4, 2, 1),
  new Three.Vector3(2, 3, 0),
  new Three.Vector3(0, 2, -4),
  new Three.Vector3(-4, 2.4, -7),
  new Three.Vector3(-7, 2, -2),
  new Three.Vector3(-10, 3, 0),
  new Three.Vector3(-5, 4, 4),
  new Three.Vector3(0, 1.7, 7),
  new Three.Vector3(4, 2.7, 1),
];
const paoCurve = new Three.CatmullRomCurve3(paoArray, false, "chordal");
const paoLines = paoCurve.getPoints(2000);

const floorMesh = new Three.PlaneGeometry(50, 50);
const floorMat = new Three.MeshBasicMaterial({
  color: 0x666666,
  side: Three.DoubleSide,
});
const floor = new Three.Mesh(floorMesh, floorMat);
floor.rotateX(-Math.PI / 2);
scene.add(floor);

let i = 0;
const loop = () => {
  if (i > 2000) i = 0;
  body?.lookAt(bodyLines[i]);
  pao?.lookAt(paoLines[i++]);
  renderer.render(scene, camera);
  requestAnimationFrame(loop);
};

loop();

实现的最终效果如下(炮筒承受不能承受的角度)：