glTransifitions not defined #202

wolfiton · 2023-04-04T18:48:12Z

Hello,

I wrote the following code to combine gl-transition library with a three js carousel but it seems I can't see what I am doing wrong and how I can make it work.
Also, any examples of creating a carousel with this library would be highly appreciated it. although I think my code should do that but as I said in the title it gives me that glTransitions are undefined.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Image Carousel with Gl-Transition</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.jsdelivr.net/npm/gl-transitions"></script>

  </head>
  <body>
    <div class="carousel-container">
      <div class="carousel-inner"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
    
    <script src="app.js"></script>
  </body>
</html>

// Define the images to display in the carousel
const images = [
    "https://picsum.photos/id/1015/1000/600",
    "https://picsum.photos/id/1018/1000/600",
    "https://picsum.photos/id/102/1000/600",
    "https://picsum.photos/id/103/1000/600"
  ];
  
  // Initialize the carousel
  let currentIndex = 0;
  let nextIndex = 1;
  let timer = null;
  
  // Create the Three.js scene
  const scene = new THREE.Scene();
  
  // Create the camera
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 5;
  
  // Create the renderer
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // Create the carousel container and inner elements
  const carouselContainer = document.querySelector(".carousel-container");
  const carouselInner = document.querySelector(".carousel-inner");
  
  // Add the images to the carousel
  images.forEach((image, index) => {
    const img = document.createElement("img");
    img.src = image;
    carouselInner.appendChild(img);
  });
  
  // Function to start a transition
  const startTransition = () => {
    // Create a new transition
    const currentImg = carouselInner.children[currentIndex];
    const nextImg = carouselInner.children[nextIndex];
    const transition = glTransitions.warp.create({
      width: window.innerWidth,
      height: window.innerHeight,
      uniforms: {
        progress: {
          type: "f",
          value: 0
        },
        texture: {
          type: "t",
          value: new THREE.Texture(currentImg)
        },
        texture2: {
          type: "t",
          value: new THREE.Texture(nextImg)
        }
      }
    });
  
    // Add the transition canvas to the container
    carouselContainer.appendChild(transition.canvas);
  
    // Start the timer to update the transition
    timer = setInterval(updateTransition, 16);
  };
  
  // Function to update the transition
  const updateTransition = () => {
    // Increment the progress value
    transition.uniforms.progress.value += 0.02;
  
    // Check if the transition is complete
    if (transition.uniforms.progress.value >= 1.0) {
      // Remove the transition canvas from the container
      carouselContainer.removeChild(transition.canvas);
  
      // Reset the progress value
      transition.uniforms.progress.value = 0;
  
      // Update the current and next index values
      currentIndex = nextIndex;
      nextIndex = (nextIndex + 1) % images.length;
  
      // Start a new transition
      startTransition();
    }
  
    // Render the scene
    renderer.render(scene, camera);
  };
  
  // Start the initial transition
  startTransition();

Thanks for any input on this problem

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

glTransifitions not defined #202

glTransifitions not defined #202

wolfiton commented Apr 4, 2023

glTransifitions not defined #202

glTransifitions not defined #202

Comments

wolfiton commented Apr 4, 2023