# 第 19 章 3D世界與物件－p5的WebGL應用

[The Best Way to Learn Three.js](https://threejs-journey.com/)
[three.js](https://threejs.org/)

### 3D 四大元素
光源 攝影機 材質 物體

#### 光源
聚光燈 點光源

#### 範例

funciton setup () {
  createCanvas(windowWidth, windowHeight, WEBGL) 
}

function draw() {
  background(0)
  translate(200, 0)
  rotateY(frameCount/50)
  box(200)
}

translate 和 rotate 放的先後順序會造成影響

#### 操控世界
用滑鼠旋轉整個世界
`orbitControl();`

#### 材質
normalMaterial()
ambientMaterial()
specularMaterial()

#### 光源
ambientLight()
ambientLight(150, 150, 255) 變成偏 "藍光"

點光源 pointLight(255, 15, 15, 0, 0, mouseY)
可以結合滑鼠位置，用滑鼠來控制光源

#### 軸向觀察
開啟 debugMode() 來看軸向
背景改成淺色

## 第 3 單元 - 加入基礎互動與外部材質

#### 漂浮感
translate(200, noise(frameCount/100)*500-250)

#### 拍攝角度
camera(mouseX, mouseY, 1000 + sin(frameCount * 0.2))

#### 材質
上傳材質圖片

先載入圖片

var mat_wood
function preload() {
  mat_wood = loadImage("wood.jpeg")
}

加上材質

texture(mat_wood)

也可以用影片當材質
var capture

function setup() {
  capture = createCapture(VIDEO)
  capture.hide()
}

加上材質

texture(capture)

## 第 4 單元 - 導入3D模型
下載模型，選擇 obj 檔
[free3d](https://free3d.com/)

scale(30) 改變大小
model(obj)

[點子松](https://www.ideathon.tw/)

[程式創作 Live Coding - 使用 p5.js 與 Shader 將互動作品變為像素藝術](https://www.youtube.com/watch?v=bQEj9FLee2I)