three.js dev template - module

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>	

<div id="trigger">

</div>

CSS

body {
	margin: 0px;
}
canvas {
	display: block;
}
#trigger {
	position: absolute;
	height: 60%;
	top: 20%;
}

JavaScript

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import {
  OrbitControls
} from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";

let camera;
let renderer;
let scene;
let controls;

init();
animate();

function init() {

  //創建場景 Scene
  scene = new THREE.Scene();

  const fov = 60;
  const aspect = window.innerWidth / ( window.innerHeight * 2 );
  const near = 0.1;
  const far = 1500;

  //建立相機 Perspective Camera (透視相機)
  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 0, - 200);

  //光源燈 Light
  const ambient = new THREE.AmbientLight(0x212121, 10);
  scene.add(ambient);

  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(50, 50, 100);
  scene.add(light);

  const geometry = new THREE.BoxGeometry(20, 20, 20);
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  // xyz輔助工具
  let helper = new THREE.AxesHelper(50);
  scene.add(helper);

  

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
	renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize(window.innerWidth, window.innerHeight * 2);
  document.body.appendChild(renderer.domElement);
	
	//OrbitControls 滑鼠拖曳旋轉控制器

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true; //拖拉慣性
  controls.enableZoom = false; //相機變焦移動
  controls.enablePan = false; //相機平移

  // gsap

  gsap.registerPlugin(ScrollTrigger);

  gsap.to(mesh.rotation, {
		scrollTrigger: {
				trigger: "#trigger",
				start: "top top",
				end: "bottom top",
				markers: true,
				scrub: true,
				toggleActions: "restart pause resume pause",
        onEnter: function() {
        	console.log('Play Animation')
        },
        once: true
			},
      y: Math.PI
    });

}


function animate() {
  requestAnimationFrame(animate);
	controls.update();
  renderer.render(scene,...