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.
-
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.
-
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
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/”.
- What do you have?
- What code, precisely, are you using to create the cards?
- How far did you get trying to create the title and description over the 3D cards? What solutions did you try so far?
- 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>