建立完物體，今天來建立軌道控制器及文字

軌道控制器OrbitControls

有了軌道控制器就可以使用鼠標對場景進行操作，使相機圍繞目標進行軌道運動，如旋轉、移動、縮放場景
而要使用軌道控制器需要先在 ejs 裡匯入函式庫

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

程式碼則需設定如下

  //建立軌道控制器   
  cameraControl = new THREE.OrbitControls(camera, renderer.domElement)
  cameraControl.enableDamping = true
  cameraControl.dampingFactor = 0.05

enableDamping

Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Default is false.

dampingFactor

The damping inertia used if .enableDamping is set to true.
Note that for this to work, you must call .update () in your animation loop.

在任何系統中，由於外界作用造成的運動，會有維持原有運動狀態的頃向，也就是慣性，當系統施一個力去阻止慣性運動，就稱為阻尼 (damping) ，有設定阻尼參數時需在 render 處 update

function render() {
  requestAnimationFrame(render)
  cameraControl.update()
  renderer.render(scene, camera)
}

設定文字

var loader = new THREE.FontLoader();
  loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
    var textGeometry = new THREE.TextGeometry( "hello", {
      font: font,
      size: 5,
      height: 1,
      // 曲線上點的數量 
      curveSegments: 1,
      // 是否開啟斜角
      bevelEnabled: true,
      // 斜角深度 
      bevelThickness: 0.5,
      // 從文字輪廓到斜角距離   
      bevelSize: 0.5,
      // 斜角分段數
      bevelSegments: 1
    })

  var textMaterial = new THREE.MeshPhongMaterial( 
    { color: 0xff0000, specular: 0xffffff }
  );

  var mesh = new THREE.Mesh( textGeometry, textMaterial );
  mesh.position.set(-5,0,0)
  scene.add(mesh)

成果

Day6 Demo | Github
完成後就可以看到設定的文字，也可以對畫面進行操控了

Reference

https://threejs.org/docs/#examples/en/controls/OrbitControls
https://threejs.org/docs/#examples/en/geometries/TextGeometry