如何在p5.js里控制相机？

UDM Lab

发布于 2021-01-04 11:19:33

2K0

发布于 2021-01-04 11:19:33

文章被收录于专栏：UDM LabUDM Lab

正经人谁用p5.js啊？

（

狗头保命）

但是当学校课程要求（比如今年UCL的DFPI），或者没有其他前端基础的情况下，想把processing里的一些效果在网页上展示，这时候可能就不得不使用p5.js了。

废话不多说，今天讲一些在p5.js里写3D的体会。WEBGL模式，在没有任何设置的情况下，相机的默认位置在（0，0，625），你画在原点（0，0，0）的物件会出现在画面的正中央。

如果想要在创作时快速尝试相机位置，亦或是希望作品本身能有3D的漫游体验，这时就免不了需要制作一个相机控制系统。在p5.js中，p5.EasyCam这个library被用于简单的相机控制。

但，我就是不用

今天讲一个超傻瓜、全程使用原生function的方法，能基本实现在第一人称游戏里的移动效果。这个效果其实主要依靠orbitControl()和camera.move()实现。

orbitControl()可以实现鼠标拖拽来改变视角，而camera.move()则用来移动相机位置，配合keyIsDown()就能用不同的键盘按键来触发各个方向上的移动。一般可以整合在一个function里，便于调用。（这里使用WASD作为前后左右，Q和E作为上下。）

function cameraMove(){
  orbitControl();//Drag mouse to change the view angle
    if (keyIsDown(65)) {//Use key'A'to make a left move
        cam.move(-camSpeed,0,0);
      }
    if (keyIsDown(68)) {//Use key'D'to make a left move
        cam.move(camSpeed,0,0);
      }
    if (keyIsDown(87)) {//Use key'W'to make a forward move
        cam.move(0,0,-camSpeed);
      }
    if (keyIsDown(83)) {//Use key'S'to make a backward move
        cam.move(0,0,camSpeed);
      }
    if (keyIsDown(81)) {//Use key'Q'to make a upward move
        cam.move(0,-camSpeed,0);
      }
    if (keyIsDown(69)) {//Use key'E'to make a downward move
        cam.move(0,camSpeed,0);
      }
    console.log(cam.eyeX,cam.eyeY,cam.eyeZ);
}

如果想要获取相机的实时位置的话，也可以用：

console.log(cam.eyeX,cam.eyeY,cam.eyeZ);

这样就可以在控制台里看到具体坐标了。

当然，如果相机位置跑偏了，难以调整会原来的设定状态，也可以写一个function用来重置相机位置以及目标点：（这里我使用退格键为例）

function keyPressed() {
  // reset camera position with Key "backspace"
  if (keyCode == 8) {
    cam.setPosition(0,0,625);
    cam.lookAt(0,0,0);
  }
}

结合3D swarm，水了个大作业