正经人谁用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,水了个大作业
完整示例,camSpeed用于修改相机移动速度