NEOVRIT: Building 60 FPS WebGL 3D Spatial Digital Twins with Three.js & GSAP

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// 1. Initialize DRACO WebAssembly Worker
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/'); // Wasm decoder path
dracoLoader.setDecoderConfig({ type: 'js' });
dracoLoader.preload();

// 2. GLTF Loader with Draco Sub-Decoder
const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

// 3. WebGL Renderer with Shadow & Tone Mapping Optimization
const container = document.getElementById('webgl-canvas');
const renderer = new THREE.WebGLRenderer({
  canvas: container,
  powerPreference: "high-performance",
  antialias: true,
  alpha: true
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;

// 4. GSAP ScrollTrigger Camera Trajectory Interpolation
gltfLoader.load('/models/spatial-twin-draco.glb', (gltf) => {
  const scene = new THREE.Scene();
  scene.add(gltf.scene);

  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 15, 30);

  // Smooth Scroll-Driven Camera Waypoints
  const timeline = gsap.timeline({
    scrollTrigger: {
      trigger: "#spatial-section",
      start: "top top",
      end: "bottom bottom",
      scrub: 1.5, // Lerp smoothing lag
    }
  });

  timeline
    .to(camera.position, { x: 12, y: 8, z: 18, ease: "power2.inOut" })
    .to(camera.rotation, { x: -0.2, y: 0.5, z: 0 }, "<")
    .to(camera.position, { x: -5, y: 3, z: 8, ease: "power2.inOut" });
});