I am creating ThreeJs scene and using ScrollTrigger to update the camera position but its giving me error: Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin()
Here is my code:
import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "lil-gui";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
gsap.registerPlugin(ScrollTrigger);
THREE.ColorManagement.enabled = false;
// Canvas
const canvas = document.querySelector("canvas.webgl");
// Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color("#000");
// Loading Manager
const loadingManager = new THREE.LoadingManager();
const progressBar = document.getElementById("progressBar");
const progressBarContainer = document.querySelector(".progressBarContainer");
loadingManager.onProgress = (url, loaded, total) => {
progressBar.value = (loaded / total) * 100;
};
loadingManager.onLoad = () => {
progressBarContainer.style.display = "none";
};
// Draco Loader
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/draco/");
// GLTF Loader
const gltfLoader = new GLTFLoader(loadingManager);
gltfLoader.setDRACOLoader(dracoLoader);
let mixer = null;
gltfLoader.load("/model/forest/scene.gltf", (gltf) => {
let model = gltf.scene;
model.scale.set(0.1, 0.1, 0.1);
scene.add(model);
});
//Lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.shadow.mapSize.set(1024, 1024);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
/* Sizes */
const sizes = {
width: window.innerWidth,
height: window.innerHeight,
};
window.addEventListener("resize", () => {
// Update sizes
sizes.width = window.innerWidth;
sizes.height = window.innerHeight;
// Update camera
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
// Update renderer
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.set(0, 2, 5);
camera.lookAt(0, 0, 0);
scene.add(camera);
// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.enableZoom = false;
/* Renderer */
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
});
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
/*=============================GSAP==============================*/
const tl = gsap.timeline();
tl.to(camera.position, {
x: -5,
z: -5,
ease: "power1.inOut",
ScrollTrigger: {
trigger: ".section-two",
scrub: 1,
markers: true,
start: "top bottom",
end: "top top",
},
});
/*Animate*/
const clock = new THREE.Clock();
let previousTime = 0;
const tick = () => {
const elapsedTime = clock.getElapsedTime();
const deltaTime = elapsedTime - previousTime;
previousTime = elapsedTime;
// Update controls
controls.update();
// Render
renderer.render(scene, camera);
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
tick();
