DAY 16. Three.js 相機Camera

相機 Camera

在3D的環境中可以把它當成視角, 我們可以給它定位、關注點, 也可以搭配相機的位置角度來達到畫面移動的效果, 在一般的情況下相機使用非常容易，我們只需要給他合理的定位以及目標即可。

我們有以下幾種預設相機可供選擇

• PerspectiveCamera
• OrthographicCamera
• StereoCamera
• CubeCamera

一般情況中我們最常用的即是視野相機PerspectiveCamera
相機都包含以下幾個屬性

• position 相機的位置
• up 相機的頂點
• lookAt 相機的關注目標

let width = window.innerWidth

let height = window.innerHeight

const scene = new THREE.Scene()

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

renderer.setSize(width, height)

document.body.appendChild(renderer.domElement)
 
// 這幾個是初始化一個相機的基本參數
// 參數1. 垂直相機的視野, 在視野以外的東西不會被選染製畫面
// 參數2. 相機可以看到的視野外觀比例，注意它是一個寬除高的值
// 參數3. 接近相機的平片, 當物件比此值更靠近畫面時, 該物件不被渲染
// 參數4. 遠相機的平面, 當物件與相機的距離大於此值時, 該物件不被渲染
const camera = new THREE.PerspectiveCamera(
  75,  // 相機的垂直視野
  width / height, // 相機的外觀比例
  0.1, // 接近的相機視體平面距離值
  1000 //遠的相機視體平面距離值
)

const spotLight = new THREE.SpotLight({color: '#ffffff'})
scene.add(spotLight)

const cube = new THREE.Mesh(
  new THREE.CubeGeometry(1, 1, 1),
  new THREE.MeshNormalMaterial()
)

scene.add(cube)

renderer.render(scene, camera)

執行以上範例只能看到漆黑一片的畫面，這是因為我們還沒調整相機本身的位置，以及要相機看甚麼地方，所以我們緊接著將該設定補上

// 以上略 ...

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

renderer.render(scene, camera)

JSBin Demo
如此一來我們就能看到畫面中的物件了, 但此範例的前提是你沒有改變物件的預設位置(0 , 0, 0)，通常一個3D場景如果看不到物件很有可能是因為忘記設定位置，所以相機還在原點，所以看出去不會有任何東西，因為相機與場景物件重疊。

若對相機有更多的好奇
可見官方Camera 文件, 我將在之後慢慢將更多使用方式補齊。