울리는

index39
const renderer = new $.WebGLRenderer({antialias: false,});
  const scene = new $.Scene();
  const camera = new $.PerspectiveCamera(75, 2, 0.1, 100);
  const controls = new OrbitControls(camera, renderer.domElement);

  window.addEventListener("resize", () => {
      const { clientWidth, clientHeight } = renderer.domElement;
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(clientWidth, clientHeight, false);
      camera.aspect = clientWidth / clientHeight;
      camera.updateProjectionMatrix();
  });
  document.body.prepend(renderer.domElement);

  window.dispatchEvent(new Event("resize"));
      renderer.setAnimationLoop(function (t) {
      controls.update();
      renderer.render(scene, camera);
  });

  scene.background = new $.Color("#000");
  camera.position.set(0.15, 0.45, 0.75);

  const light0 = new $.PointLight("white", 2, 2, 1);
  light0.position.set(0, 0, 1);
  scene.add(light0);

  const stub = new $.Texture();
  const sandGeom = new $.PlaneBufferGeometry(1, 1, 1e3, 1e3);
  const sandMat = new $.MeshStandardMaterial({
      map: stub,
      displacementMap: stub,
      side: $.DoubleSide,
      transparent: true,
      opacity: 0,
  });
  const sandMesh = new $.Mesh(sandGeom, sandMat);
  scene.add(sandMesh);

  const man = {
      next: function next(gen) {
          new $.TextureLoader().load(
              gen.next().value,
          (tex) => {
          gsap
          .timeline({
            onComplete() {
              setTimeout(() => next(gen), 1e3);
            },
          })
          .to(sandMat, {
            displacementScale: 0,
            opacity: 0,
            duration: 0.5,
            ease: "none",
            onComplete() {
              sandMesh.scale.set(tex.image.width / tex.image.height, 1, 2);
              sandMat.map = tex;
              sandMat.displacementMap = tex;
            },
          })
          .to(sandMat, {displacementScale: 0.1, opacity: 1, duration: 3,ease: "elastic",});
        gsap
          .timeline()
          .set(sandMesh.rotation, {x: -Math.PI, y: Math.PI, duration: 1,})
          .to(sandMesh.rotation, {x: 0, y: 0,duration: 1,});
      },
      () => setTimeout(next, 1e3, gen)
    );
  },
  start() {
    this.next(this.Gen());
  },
  *Gen() {
    while (1)
      yield `https://source.unsplash.com/collection/11313199/?${Date.now()}`;
  },
};
man.start();