Day 23 - p5的WebGL应用 3D 设定

3D场景的基础

• 基础的要素：物体、光源、材质与摄影机

  

  • 基础几何形状
    • 平面 plane()
    • 长方体 box()
    • 球体 sphere()
    • 圆柱体 cylinder()
    • 圆锥体 cone()
    • 圆盘 ellipsoid()
    • 甜甜圈 torus()
  • 摄影机
    • camera() 一般摄影机
    • perspective() 透视摄影机
    • ortho() 平行摄影机

建立一个基础的 3D 场景

• 建立 WEBGL 画布 createCanvas(windowWidth, windowHeight,WEBGL);
  • 需注意，WEBGL 的绘制原点(0,0)在画面中心，而不是左上角
• p5 的 3D 物件：https://p5js.org/examples/form-3d-primitives.html
  • 绘制方块： box(边长)
  • 绘制球体： sphere(半径)
  • 圆锥： cone(半径, 高度)
• 绘制的控制：
  • 位置：使用 push(), pop() 搭配 rotate()
  • fill()：填色
  • stroke()：边框
  • orbitControl(): 使用滑鼠改变 3D 视角（没有配置摄影机时可以用）
• degugMode()：显示座标与网格

基础的材质与光源

• 常见的材质
  • 法线材质 normalMaterial()
  • 环境材质 ambientMaterial()
  • 发光材质 emissiveMaterial()
  • 反光材质 specularMaterial()
  • 贴图或影片 texture()
• 光源
  • 环境光 ambientLight()
  • 平行光 directionalLight()
  • 点光源 pointLight()
  • 聚光灯 spotLight()

物件的基础互动

• 让物件大小随时间变化

• 用滑鼠控制物件大小、颜色、旋转、位置

  let dirX ) * 2;
  let dirY = (mouseY / height - 0.5) * 2;
  pointLight(255,0,0,0,0,0)
  directionalLight(250, 250, 250, -dirX, -dirY, -1);
  
  

• 使用noise, sin制作波形效果

  • translate(cos(i+frameCount/50)*200, sin(i+frameCount/50)*200)

• camera：可以用滑鼠控制摄影机、光源的角度

加入基础互动与外部材质

• 图片

  mat_wood = loadImage("wood.jpeg")// 读取材质档案
  ...
  texture(mat_wood)// 使用材质
  

• 即时影像

  capture = createCapture(VIDEO);
  capture.hide();
  ...
  texture(capture)
  
  

导入3D模型

• 下载.obj档案：https://free3d.com/

• 载入模型

  obj = loadModel("Sting-Sword-lowpoly.obj")//读取 3D 物件
  ...
  model(obj)// 绘制出 3D 物件
  ```总复习一
  
  

一些基本参数

常用的内建变数如下表 :

参考资料
https://yhhuang1966.blogspot.com/2021/04/p5js_11.html