DAY 20. Three.js 紋理 Texture

紋理 Texture

紋理Texture並不是建立一個3D場景必要的存在, 沒有紋理Texture一樣可以建構出3D場景, 只是場景中每個物件都會顯得單調無趣, 因為紋理Texture的存在我們才得以為場景中的物件添加適當的外觀。
簡單來說紋理Texture就是一張圖片
例如我們可以將圖片貼在場景中的物件上使它看起來像個寶箱。

紋理Texture事實上只是材質Material的一個屬性，這個屬性稱之為map，我們直接使用範例來看使用方式。

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000
)

camera.position.x = 3
camera.position.y = 3
camera.position.z = 3
camera.lookAt(new THREE.Vector3(0, 0, 0))

const renderer = window.WebGLRenderingContext ? 
               new THREE.WebGLRenderer() : new THREE.CanvasRenderer()

renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

// 範例用矩形
const geometry = new THREE.CubeGeometry(1, 1, 1)

// 宣告材質, 這裡使用基礎材質
const material = new THREE.MeshBasicMaterial()

// 定義方塊
const cube = new THREE.Mesh(geometry, material)

// 新建一張圖片用來置放我們的圖片
const image = new Image()

// 由於載入一張外部圖片資源是異步操作
// 因此記得在觸發後onload事件後在使用該圖片
image.onload = function (img) {
  
  // 先建立一張canvas, 用來置放我們得圖片
  const canvas = document.createElement('canvas')

  const ctx = canvas.getContext('2d')
  
  canvas.width = 512
  
  canvas.height = 512
  
  // 把圖片畫進canvas
  ctx.drawImage(this, 0, 0, 512, 512)
  
  // 定義material的map為使用canvas的紋理Texture
  material.map= new THREE.Texture(canvas)
  
  // 更新材質Material, 記得要設定此屬性
  material.map.needsUpdate = true

  scene.add(cube)
  render()
}

// canvas所用的img如果沒宣告此屬性會有跨域問題
image.crossOrigin = "anonymous"

// 載入範例圖片
image.src = 'http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg'

function render() {

  cube.rotation.x += .01
  cube.rotation.y += .01
  cube.rotation.z += .01

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

JSBin Demo

如果打開範例發現裡頭沒有東西
請試著安裝chrome的 Allow-Control-Allow-Origin 插件並啟用

這個範例直接使用了canvas作為紋理
當然在其他教學中或許會見到使用TextLoader的方式直接載入圖片資源作為紋理
但使用Canvas作為紋理資源的好處更多，例如

• 使用方式簡單，直接塞給THREE.Texture() 即可
• canvas方便在程式中做處理、加工

另外在高級的形狀中，圖片要貼在形狀的哪個位置，通常是該物件在製作3D模型時使用名為UVs或UV Mapping的技術來定義好。