一、換使用者控制

前面終於讓 3D 方塊自己旋轉起來了，但現在的動畫都是程式自己控制，如果我想讓使用者用滑鼠轉動 3D 世界呢？Three.js 有一個很好用的工具：OrbitControls，它可以讓我們直接用滑鼠控制 Camera。

二、引入 OrbitControls

首先要多加入一行可以引入 OrbitControls的程式

import { OrbitControls } from "three/addons/controls/OrbitControls.js";

接著是建立一個控制器，然後把相機及網頁畫面控制器放進 OrbitControls 裡面，這樣就可以用滑鼠來控制畫面了。

const controls = new OrbitControls(
    camera,
    renderer.domElement
);

加入慣性

這邊講一個小東西為了畫面流暢可以開啟以下這一段，這樣拖曳畫面後不會馬上停住，而是會有比較自然的移動感。

controls.enableDamping = true;

不過開啟之後，要記得在動畫裡加入這行，才能讓控制器持續更新。

controls.update();

三、成果展示

這張圖是原始大小

那現在我將滑鼠滾輪往前滾動會變什麼呢?
會變得超級無敵大，那反向的話就會~

超級無敵小!!!

還有還有別走，只看到一點點畫面很正常，因為這裡我用左鍵控制物件的視角，我把陰暗面轉上來，所以她在轉的時候我們所看的視角就會不一樣。

最後就是這個啦!!怎麼物件跑去左邊了，這裡我們可以使用右鍵移動物件的位置。

四、結論

這次我們沒有讓 cube.rotation 自己增加，而是把控制權交給使用者，現在的 3D 世界已經從「只能看」，慢慢變成「可以玩」了，再來我們前面學過的GSAP，好像也差不多該回來了，如果 Three.js 負責建立 3D 世界，GSAP 負責動畫，那把兩個放在一起會發生什麼？

下一篇，就來第一次把 Three.js × GSAP 結合起來。