I want this shapeless infinity mouse drag card 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 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/strong text

Seems like a duplicate of this and this thread.

  1. Please specify the problem, “I want […]” is not a problem - it’s a request. Problems / issues belong to help. Requests belong to Jobs and should be paid for.

  2. Please format the code properly in your previous threads and make sure parts that are blocking you are within the code you’re sharing. It’s a bit rude to expect people to put effort in helping you solve the issue, when you didn’t put much effort to describe it :see_no_evil:

4 Likes

the question is i can’t take the title , and description[i mean text] over the three.js card, every card needs a title and description, please see this reference site https://www.barlow.agency/

Please see this thread.

There is no question in the reply you’ve made - there is a statement “i can’t take the title , and description[i mean text] over the three.js card, every card needs a title and description” and a command “please see this reference site https://www.barlow.agency/”.

  1. What do you have?
  2. What code, precisely, are you using to create the cards?
  3. How far did you get trying to create the title and description over the 3D cards? What solutions did you try so far?
  4. Please specify a narrowed down question, for example, “How do I place 2D text over 3D elements” (I’m guessing that’s the thing you’re trying to achieve, but again, it’s just my guess.)
2 Likes

it is pretty easy, actually, you just do

for(var i = 0; i < numOfCards; i++) {
  card.title = titles[i]
  card.description = descriptions[i]
}
1 Like

yes you right ! [How do I place 2D text over 3D elements”]

thanks for your reply, but i want like the refarence site, i already made the infinity dragging but can’t take the 3d element over text each card have difarent title description, see here the card over the title desc https://www.barlow.agency/

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, 1, 0.1, 1000); // Aspect ratio will be updated const renderer = new THREE.WebGLRenderer(); targetDiv.appendChild(renderer.domElement);
    function updateRendererSize() {
      const newWidth = window.innerWidth;
      const newHeight = window.innerHeight;
      camera.aspect = newWidth / newHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(newWidth, newHeight);
    }

    window.addEventListener("resize", updateRendererSize);
    updateRendererSize(); // Initialize renderer size

    renderer.setClearColor(0xffffff);

    const images = [];
    const basePath = "./assets/images/case-study/";
    const totalImages = 20;
    const numCols = 4;
    const numRows = 3;
    let imageSize = calculateImageSize(); // Dynamically calculate image size

    function calculateImageSize() {
      // Calculate the image size based on screen width
      if (window.innerWidth <= 991) {
        // Mobile and tablet view
        return 296;
      } 
      else if (window.innerWidth <= 1199) {
        // Mobile and tablet view
        return 370;
      }else {
        // Desktop view
        return 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 = a.read();
        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);
        scene.add(imageMesh);
        images.push(imageMesh);

        // 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;

    function startDragging(event) {
      isDragging = true;
      previousX = event.clientX || event.touches[0].clientX;
      previousY = event.clientY || event.touches[0].clientY;
    }

    function drag(event) {
      if (isDragging) {
        const currentX = event.clientX || event.touches[0].clientX;
        const currentY = event.clientY || event.touches[0].clientY;
        const deltaX = currentX - previousX;
        const deltaY = currentY - previousY;
        for (const image of images) {
          // Update the skew effect based on mouse movement
          const skewX = Math.max(-5, Math.min(5, deltaX * 0.005));
          const skewY = Math.max(-5, Math.min(5, -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 = currentX;
        previousY = currentY;
      }
    }

    function stopDragging() {
      isDragging = false;
    }

    targetDiv.addEventListener("pointerdown", startDragging);
    targetDiv.addEventListener("pointermove", drag);
    targetDiv.addEventListener("pointerup", stopDragging);
    targetDiv.addEventListener("touchstart", startDragging);
    targetDiv.addEventListener("touchmove", drag);
    targetDiv.addEventListener("touchend", stopDragging);

    const animate = () => {
      requestAnimationFrame(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);
    };

    animate();
  }

  createContinuousLoopingGallery(document.getElementById("gallery-container"));
</script>
this is my code there i have achived mouse dragnig but i am faild to take each card over text