p5.Camera lookAt() 方法介绍

p5.js是一款流行的基于JavaScript的创意编程工具，p5.Camera lookAt() 方法是其中一个相机类提供的方法之一，它可以让我们在3D场景中快速地调整相机位置和方向。

方法概述

lookAt()方法需要三个参数：一个三维向量表示目标点位置，一个三维向量表示相机位置，一个三维向量表示相机的正方向。它可以将相机指向目标点，并将相机的位置设置为传递的第二个参数的值。

常见的调用方式如下：

camera.lookAt([0, 0, 0]);

表示相机指向坐标原点。

例子

下面我们通过一个简单的例子来演示如何使用 lookAt() 方法。

在 setup() 函数里，我们首先定义了一个 createCanvas() 函数用来创建画布，然后创建一个 createCanvas() 函数用来控制相机位置。最后我们调用 lookAt() 方法让相机指向（0，0，0）点。

function setup() {
  createCanvas(400, 400, WEBGL);
  camera(0, -300, 0);
  camera.lookAt(0, 0, 0);
}

function draw() {
  background(220);
  noFill();
  stroke(0, 255, 0);
  box(100);
}

在 draw() 函数里，我们使用 box() 函数来绘制一个绿色的长方体。

运行这个例子，我们可以看到相机指向了坐标轴原点，并且我们可以旋转场景来观察绿色长方体。

结论

通过学习 p5.Camera lookAt() 方法，我们可以看到它是用来帮助我们快速调整相机位置和方向来实现3D场景展示的方法。在实际项目开发中，它能够帮助我们更加高效地完成松散的3D场景设计。