获取 GSAP 目标未定义未找到错误

Question

我正在研究一个投资组合，但我不断收到此错误：未找到 GSAP 目标未定义 我尝试了一切，但没有任何效果。我需要帮助，因为我的心理健康处于危险之中。我也使用 gsap 来创建滚动动画。我尝试了一些人工智能来帮助解决拼写错误，但它似乎也不起作用，没有发现拼写错误 我尝试了所有方法，但没有任何效果，请帮忙

    import * as THREE from "three";
import Experience from "../Experience.js";
import { gsap } from "gsap";
import { ScrollTrigger } from "/node_modules/gsap/ScrollTrigger.js";

export default class Controls {
    constructor() {
        this.experience = new Experience();
        this.scene = this.experience.scene;
        this.sizes = this.experience.sizes;
        this.resources = this.experience.resources;
        this.time = this.experience.time;
        this.camera = this.experience.camera;
        this.room = this.experience.world.room;
        gsap.registerPlugin(ScrollTrigger);

        this.setScrollTrigger();

}
    setScrollTrigger(){
        ScrollTrigger.matchMedia({
            //desktop
            "(min-width: 969px)": () => {
                console.log("fired desktop");

                //first section -----------------------------------

                this.firstMoveTimeline = new gsap.timeline({
                    scrollTrigger: {
                        trigger: ".first-move",
                        start: "top top",
                        end: "bottom bottom",
                        scrub: 0.6,
                        invalidateOnRefresh: false,
                    },
                });
                // this.firstMoveTimeline.to(
                //     this.room, { 
                //         x: () => {
                //             return this.sizes.width * 0.0014;
                //         },
                //      });

                     //second section -------------------
                     this.secondMoveTimeline = new gsap.timeline({
                        scrollTrigger: {
                            trigger: ".second-move",
                            start: "top top",
                            end: "bottom bottom",
                            scrub: 0.6,
                            invalidateOnRefresh: true,
                        },
                    });
                    this.secondMoveTimeline.to(
                        this.room, { 
                            x: () => {
                                return 1
                            },
                            z:() => {
                                return this.sizes.high * 0.0032;
                            },
                        });
                        this.firstMoveTimeline.to(
                            this.room, { 
                                x: 0.4,
                                y: 0.4,
                                z: 0.4,
                            });
                    
                     },

            

            //mobile
            "(max-width: 968px)": () => {
                console.log("fired mobile");
            },

            all: function() {},
          });
    }
    
    resize() {}

    update() {}
}



    import * as THREE from "three";
import Experience from "../Experience.js";
import GSAP from "gsap";
import GUI from "lil-gui";


export default class Environment {
   constructor() {
        this.experience = new Experience();
        this.scene = this.experience.scene;


         // this.gui = new GUI({ container: document.querySelector( '.hero-main' ) });
        this.obj = {
         colorObj: { r: 0, g: 0, b: 0 },
         intensity: 3,
        };


        this.setSunlight();
      // this.setGUI();  
     }
     setGUI() {
      this.gui.addColor(this.obj, "colorObj").onChange(() => {
         this.sunLight.color.copy(this.obj.colorObj);
         this.ambientLight.color.copy(this.obj.colorObj);
         console.log(this.obj.colorObj);
      });
      this.gui.add(this.obj, "intensity", 0, 10).onChange(() => {
         this.sunLight.intensity = this.obj.intensity;
         this.sunLight.ambientLight = this.obj.intensity;
      });
     }


     

     setSunlight() {
        this.sunLight = new THREE.DirectionalLight("#ffffff", 3);
        this.sunLight.castShadow = true;
        this.sunLight.shadow.camera.far = 20;
        this.sunLight.shadow.mapSize.set(2024,2024);
        this.sunLight.shadow.normalBias = 0.05;
        //const helper = new THREE.CameraHelper(this.sunLight.shadow.camera);
        //this.scene.add(helper);
        this.sunLight.position.set(-1.5, 7, 3);
        this.scene.add(this.sunLight);

        this.ambientLight = new THREE.AmbientLight("#ffffff",1);
        this.scene.add(this.ambientLight);

        
     }
     switchTheme(theme) {
      // console.log(this.sunLight);
      if(theme === "dark") {
         GSAP.to(this.sunLight.color,{
            r: 0.4549019607843137,
            g: 0.5019607843137255,
            b: 0.6666666666666666,
         });
         GSAP.to(this.ambientLight.color,{
            r: 0.4549019607843137,
            g: 0.5019607843137255,
            b: 0.6666666666666666,
         });
         GSAP.to(this.sunLight,{
            intensity: 0.66,

         });
         GSAP.to(this.ambientLight,{
            intensity: 0.66,
         });
      }else{
         GSAP.to(this.sunLight.color,{
            r: 255 / 255,
            g: 255 / 255,
            b: 255 / 255,
         });
         GSAP.to(this.ambientLight.color,{
            r: 255 / 255,
            g: 255 / 255,
            b: 255 / 255,
         });
         GSAP.to(this.sunLight,{
            intensity: 3,

         });
         GSAP.to(this.ambientLight,{
            intensity: 3,
         });

      }

     }
     

        resize() {

        }

    
        update() {

        }

}```

Answer 1

您可以在我的 github 上找到完整代码：https://github.com/SilverBolts/Choukier-Welyam-Portfolio.git