[ThreeJS] 初心者入門 (七) ─ 控制器 OrbitControls

還記得”[ThreeJS] 初心者入門 (五) ─ 材質 Material 應用”裡的可愛羊咩咩模型嗎？

這篇我們就加上 OrbitControls：軌道控制器，透過拖移及縮放調整相機位置，讓畫面旋轉縮放吧！

首先OrbitControls是額外的函式庫，所以需要引入以下檔案：

https://threejs.org/examples/js/controls/OrbitControls.js

OrbitControls是軌道控制器，他的設置算是比較簡單的，程式碼如下：

camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.5, 1000); //建立鏡頭
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); //建立渲染器
controls = new THREE.OrbitControls(camera, renderer.domElement); //建立控制 讓鏡頭旋轉

這樣就這置完成了，很簡單。但是其實OrbitControls還是有很多細部的屬性可以設定選擇：

controls.enableZoom = true; //啟用縮放
controls.enableDamping = true; // 啟用阻尼效果
controls.dampingFactor = 0.25; // 阻尼系數
controls.autoRotate = true; //啟用自動旋轉

這邊特別要提autoRotate這個屬性，如果要使用自動旋轉這屬性，必須要在render() 處做 update 才會有效果：

function render() {
  controls.update() // 自動旋轉 需設定 update
  renderer.render( scene, camera );
}

加上控制器後小羊項展示品一樣自動旋轉展示：