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

河北网站设计公司专业的制作网站开发公司

wzjs 2025/8/4 4:07:09

河北网站设计公司,专业的制作网站开发公司,做门户型网站,网站导出链接最近，Three.js的官网更新了，将原本放examples的地方改成了manual，里面是three.js的使用大合集，感兴趣的小伙伴可以刷一遍，会有很多收获！ 今天记录一个之前没太注意过的方法——lookAt。以前只知道camera的…

最近，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();

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