I want this shapeless infinity mouse drag card gllary effect with each card should be title and desc, see on the attached link i want like this hover with text https://www.barlow.agency/

I want this shapeless infinity scroll like this site https://www.barlow.agency/ using three.js canva. anyone pleas help me! I have done the dragging and seamless looping but i want to add every card should be a title and by hover card that title should be show

here is my my code i want here every card with tile.i already implemented the semmlesly looping by direction dragging but when i am trying to add custom card / adding title that time i can’t .pleas helped me, also see the reference site there have title description every card i want it

this is my code

Centered Three.js Continuous Looping Image Gallery body { margin: 0; overflow: hidden; } #gallery-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
function createContinuousLoopingGallery(targetDiv) { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); targetDiv.appendChild(renderer.domElement);

    const images = [];
    const basePath = "./assets/images/case-study/";
    const totalImages = 20;
    const numCols = 4;
    const numRows = 3;
    const imageSize = 769;
    const spacing = 16;
    const gridWidth = numCols * (imageSize + spacing) - spacing;
    const gridHeight = numRows * (imageSize + spacing) - spacing;

    for (let row = 0; row < numRows; row++) {
      for (let col = 0; col < numCols; col++) {
        const i = row * numCols + col + 1;
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load(`${basePath}${i}.jpg`);
        const material = new THREE.MeshBasicMaterial({ map: texture });
        const geometry = new THREE.PlaneGeometry(imageSize, imageSize);

        const imageMesh = new THREE.Mesh(geometry, material);
        const x = col * (imageSize + spacing) - gridWidth / 2;
        let y = gridHeight / 2 - row * (imageSize + spacing) - gridHeight / 2;

        // Adjust the y-position for every second card in each row
        if (col % 2 === 1) {
          y += 264;

        imageMesh.position.set(x, y, -5);

        // Set initial rotation values
        imageMesh.rotation.x = 0;
        imageMesh.rotation.y = 0;

    // Set the camera's initial position to the center
    camera.position.set(0, 0, 600);

    let isDragging = false;
    let previousX = 0;
    let previousY = 0;

    document.addEventListener("pointerdown", (event) => {
      isDragging = true;
      previousX = event.clientX;
      previousY = event.clientY;

    document.addEventListener("pointermove", (event) => {
      if (isDragging) {
        const deltaX = event.clientX - previousX;
        const deltaY = event.clientY - previousY;
        for (const image of images) {
          // Update the skew effect based on mouse movement
          const skewX = deltaX * 0.005;
          const skewY = -deltaY * 0.005;

          // Apply skew effect using GSAP animation
          gsap.to(image.rotation, {
            x: skewX,
            y: skewY,
            duration: 0.2,

          image.position.x += deltaX;
          image.position.y -= deltaY;
        previousX = event.clientX;
        previousY = event.clientY;

    document.addEventListener("pointerup", () => {
      isDragging = false;

    const animate = () => {

      // Loop the images when they go off-screen in both x and y axes
      for (const image of images) {
        if (image.position.x > gridWidth / 2) {
          image.position.x -= gridWidth + spacing;
        } else if (image.position.x < -gridWidth / 2) {
          image.position.x += gridWidth + spacing;

        if (image.position.y > gridHeight / 2) {
          image.position.y -= gridHeight + spacing;
        } else if (image.position.y < -gridHeight / 2) {
          image.position.y += gridHeight + spacing;

      renderer.render(scene, camera);


    window.addEventListener("resize", () => {
      const newWidth = window.innerWidth;
      const newHeight = window.innerHeight;
      camera.aspect = newWidth / newHeight;
      renderer.setSize(newWidth, newHeight);


But which part specifically is causing problems? What’s blocking you?

i am blocked on the card over text title,description and a cta btn, i have make that shapeless infinity dragging all direction but i can’t take over the card title description btn etc, i need that point help. see in here[https://www.barlow.agency/] every card have title desc and btn i need this,

well for one, its html not canvas or 3d. As for infinity. Its not. Its a trick, you need to understand the core concept. You can prototype it in pen and paper, or better yet rip up some paper and arrange cards and a mask viewing area and slide things around to get an idea how you can push and pop cards around. Once you get teh concept you can rebuild the logic in any tool

The other part is the magic of masks, preload content over content but have it masked out until needed

yes, you thought is right. and i know what i need ,i already menton a sample of site animation, i already achived the dragging but can’t takinf over the card text

just make a small demo of the card text. Or you just trying to swap a 3d object? .visible ?

i want 3d object card , its like html element to 3d odject card over text

we get that, but you have to try to make a small demo hosted on glitch.com or jsfiddle.net or the like showing a basic work and issue you are having. Not the whole app, just some unit of the thing. Most all projects are just a series of small unit things
A card is a plane with a texture
Or a card is a plane with objects nested in it
And shaders and masks

yes see this i have done dragging for all directions but can’t take the hover over the text https://codepen.io/ReGGae/pen/eYGyLrP

I dont see any text in your example. Great work otherwise on the effect.
Are you wanting raycasts over each card?

yes, for this only point i need help, i can’t take card over text , if you can pleas helpe

If Dom, its just addEvent(“pointerdown”) either on the element or at the root element and bubble down to the event.target element

otherwise you can do pointInPoly(point) but thats for non square shapes

Isn’t this the exact same question / topic as your other post? How do I place 2D text over 3D card element? - #31 by Zakir_Hosen