p5.js 灯、相机完整参考

p5.js是一个流行的Javascript图形库，它包含了许多用于创建交互性和动态性的工具。其中一个有用的组件是灯和相机，这些组件允许您创建令人兴奋的3D图形。

灯

灯的种类

有三种不同类型的光源：

1. ambient（环境）光源 - 在场景中提供一个固定的颜色光源，不会产生阴影。用于模拟环境中的光线，充当背景光线。

2. directional（方向）光源 - 所有光线都是平行的，来自于一个方向。一般用于模拟太阳光。

3. point（点）光源 - 发散光线，来自于一个点。用于模拟像烛光或灯泡一样的物体。

环境光源

环境光源提供场景中的一个均匀的光源。您可以使用ambientLight()函数设置环境光源:

function setup() {
  createCanvas(400, 400, WEBGL);
  ambientLight(60, 60, 60); // 设置灯光颜色
}

该函数的参数是灯光的R、G、B值。下面是一个完整的例子。

function setup() {
  createCanvas(400, 400, WEBGL);
  ambientLight(60, 60, 60);
}

function draw() {
  background(200);
  rotateY(frameCount * 0.01);
  box(100);
}

方向光源

方向光源模拟制造于地球上的太阳光线。它总是从同一方向照射。要创建一个方向光源，请使用directionalLight()函数:

function setup() {
  createCanvas(400, 400, WEBGL);
  directionalLight(255, 255, 255, 0, 1, 0);
}

function draw() {
  background(200);
  rotateY(frameCount * 0.01);
  box(100);
}

该函数的参数是灯光的R、G、B值，以及灯光的方向。如果您没有传递方向参数，p5.js将默认值设置为向下。

点光源

点光源是一个点，以所有方向发射光线。您可以使用pointLight()函数创建一个点光源:

function setup() {
  createCanvas(400, 400, WEBGL);
  pointLight(255, 255, 255, 100, 100, 0);
}

function draw() {
  background(200);
  rotateY(frameCount * 0.01);
  box(100);
}

该函数的参数是灯光的R、G、B值，以及点的位置。

相机

相机控制场景中的视角。默认情况下，p5.js使用一个简单的相机，该相机将对象的中心点放置于画布中心的位置。

创建相机

要创建一个自定义相机，请使用createCamera()函数:

let cam;

function setup() {
  createCanvas(400, 400, WEBGL);
  cam = createCamera();
}

移动相机

要移动相机，您可以使用相机的setPosition()方法。这将相机从其默认位置移动到指定位置。

function mouseMoved() {
  let posX = map(mouseX, 0, width, -200, 200);
  let posY = map(mouseY, 0, height, -200, 200);
  cam.setPosition(posX, posY, (height/2) / tan(PI/6));
}

该函数先将鼠标坐标映射到位置坐标，然后将相机移动到该位置。

控制相机

p5.js还提供了其他有用的相机控制函数，例如：

• camera() - 将更改场景的绕 X、Y 和 Z 轴旋转。易于操作3D场景角度。

• perspective() - 会改变渲染结果如何：它会拉近或拉远相机，同时保持其视野不变。如果您想创建更透彻的3D场景（例如引导用户的“元素”），则可能需要调整这些值。

• ortho() - 将保持确切的缩放比率，并使元素与相机距离相同。可以在创建表格或图表时方便地使用它。

完整例子

下面是一个完整的p5.js例子，显示了如何组合使用灯和相机。

let cam;

function setup() {
  createCanvas(400, 400, WEBGL);
  cam = createCamera();
  cam.setPosition(0, 0, (height/2) / tan(PI/6));
  pointLight(255, 255, 255, 0, 100, 200);
}

function draw() {
  background(200);
  rotateY(frameCount * 0.01);
  box(100);
}

总结

通过结合灯和相机，p5.js可以创建出令人惊叹的3D场景，并提供了丰富的定制控制。希望这篇文章可以帮助你更好地理解和应用它们。