You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
// Define the images to display in the carouselconstimages=["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 carouselletcurrentIndex=0;letnextIndex=1;lettimer=null;// Create the Three.js sceneconstscene=newTHREE.Scene();// Create the cameraconstcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);camera.position.z=5;// Create the rendererconstrenderer=newTHREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);// Create the carousel container and inner elementsconstcarouselContainer=document.querySelector(".carousel-container");constcarouselInner=document.querySelector(".carousel-inner");// Add the images to the carouselimages.forEach((image,index)=>{constimg=document.createElement("img");img.src=image;carouselInner.appendChild(img);});// Function to start a transitionconststartTransition=()=>{// Create a new transitionconstcurrentImg=carouselInner.children[currentIndex];constnextImg=carouselInner.children[nextIndex];consttransition=glTransitions.warp.create({width: window.innerWidth,height: window.innerHeight,uniforms: {progress: {type: "f",value: 0},texture: {type: "t",value: newTHREE.Texture(currentImg)},texture2: {type: "t",value: newTHREE.Texture(nextImg)}}});// Add the transition canvas to the containercarouselContainer.appendChild(transition.canvas);// Start the timer to update the transitiontimer=setInterval(updateTransition,16);};// Function to update the transitionconstupdateTransition=()=>{// Increment the progress valuetransition.uniforms.progress.value+=0.02;// Check if the transition is completeif(transition.uniforms.progress.value>=1.0){// Remove the transition canvas from the containercarouselContainer.removeChild(transition.canvas);// Reset the progress valuetransition.uniforms.progress.value=0;// Update the current and next index valuescurrentIndex=nextIndex;nextIndex=(nextIndex+1)%images.length;// Start a new transitionstartTransition();}// Render the scenerenderer.render(scene,camera);};// Start the initial transitionstartTransition();
Thanks for any input on this problem
The text was updated successfully, but these errors were encountered:
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.
Thanks for any input on this problem
The text was updated successfully, but these errors were encountered: