一、最後加入互動吧

做到昨天，現在網站已經可以從原本的 2D 頁面，透過 GSAP 動畫進入 Three.js 世界，但目前進去之後，3D 物件主要還是自己旋轉，既然都已經做到 3D 了，我想讓使用者不只是看，而是真的可以自己控制看看這好玩的物件，所以今天要把之前學過的 OrbitControls 再拿回來使用。

二、實際加入

首先在 index.js 最上方加入

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

接著建立好camera、renderer後加入，因為 OrbitControls 會把滑鼠操作和 Camera 連接起來。我把 enablePan 關掉，是因為這個作品主要只需要旋轉和縮放，不希望使用者把整個畫面拖到奇怪的位置。

const controls = new OrbitControls(
 
   camera,
    renderer.domElement
);
controls.enableDamping = true;
controls.enablePan = false;

這樣增加之後，滑鼠左鍵可以改變陰暗面以及亮面，還可以讓它加速運轉。

然後滾動滑鼠滾輪，可以放大縮小中間的 3D 物件。

更新 controls

在 animate 裡面加入 controls.update();，因為前面開啟了controls.enableDamping = true;，所以需要持續執行 controls.update()，滑鼠操作才會有比較自然的滑動感。

function animate() {
    requestAnimationFrame(animate);

    object.rotation.x += 0.003;
    object.rotation.y += 0.005;

    controls.update();

    renderer.render(scene, camera);
}

三、結論

這是從前天開始製作的程式實作，我們一步一步從原生 JavaScript，到 GSAP，再到 Three.js，最後終於不再是分開的小範例，而是真的變成了一個完整的互動網頁。

下一篇也就是最後一天，就來好好回頭看看，這 30 天到底做了什麼，以及一路寫到這裡的感覺。