|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>3D Card Gallery</title> |
|
|
<style> |
|
|
body, html { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
overflow: hidden; |
|
|
background: #000; |
|
|
} |
|
|
canvas { |
|
|
display: block; |
|
|
} |
|
|
.loading { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
color: white; |
|
|
font-family: Arial, sans-serif; |
|
|
font-size: 24px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="loading">Loading...</div> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script> |
|
|
<script> |
|
|
let scene, camera, renderer, cards = []; |
|
|
const images = [ |
|
|
'https://picsum.photos/512/512?random=1', |
|
|
'https://picsum.photos/512/512?random=2', |
|
|
'https://picsum.photos/512/512?random=3', |
|
|
'https://picsum.photos/512/512?random=4', |
|
|
'https://picsum.photos/512/512?random=5', |
|
|
'https://picsum.photos/512/512?random=6' |
|
|
]; |
|
|
|
|
|
const textureLoader = new THREE.TextureLoader(); |
|
|
let loadedTextures = 0; |
|
|
|
|
|
function init() { |
|
|
scene = new THREE.Scene(); |
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
renderer = new THREE.WebGLRenderer({ antialias: true }); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
document.body.appendChild(renderer.domElement); |
|
|
|
|
|
camera.position.z = 10; |
|
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); |
|
|
scene.add(ambientLight); |
|
|
|
|
|
const pointLight = new THREE.PointLight(0xffffff, 1); |
|
|
pointLight.position.set(10, 10, 10); |
|
|
scene.add(pointLight); |
|
|
|
|
|
images.forEach((url, index) => { |
|
|
textureLoader.load(url, (texture) => { |
|
|
createCard(texture, index); |
|
|
loadedTextures++; |
|
|
if (loadedTextures === images.length) { |
|
|
document.querySelector('.loading').style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', onMouseMove); |
|
|
animate(); |
|
|
} |
|
|
|
|
|
function createCard(texture, index) { |
|
|
const geometry = new THREE.PlaneGeometry(3, 4); |
|
|
const material = new THREE.MeshPhongMaterial({ |
|
|
map: texture, |
|
|
side: THREE.DoubleSide |
|
|
}); |
|
|
const card = new THREE.Mesh(geometry, material); |
|
|
|
|
|
const angle = (index / images.length) * Math.PI * 2; |
|
|
const radius = 6; |
|
|
card.position.x = Math.cos(angle) * radius; |
|
|
card.position.z = Math.sin(angle) * radius; |
|
|
card.rotation.y = -angle; |
|
|
|
|
|
cards.push(card); |
|
|
scene.add(card); |
|
|
} |
|
|
|
|
|
function onMouseMove(event) { |
|
|
const mouseX = (event.clientX / window.innerWidth) * 2 - 1; |
|
|
const mouseY = (event.clientY / window.innerHeight) * 2 - 1; |
|
|
|
|
|
cards.forEach(card => { |
|
|
card.rotation.x = mouseY * 0.2; |
|
|
card.rotation.z = mouseX * 0.2; |
|
|
}); |
|
|
} |
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
cards.forEach((card, index) => { |
|
|
const time = Date.now() * 0.001; |
|
|
const angle = (index / images.length) * Math.PI * 2 + time * 0.5; |
|
|
const radius = 6; |
|
|
|
|
|
card.position.x = Math.cos(angle) * radius; |
|
|
card.position.z = Math.sin(angle) * radius; |
|
|
card.rotation.y = -angle; |
|
|
}); |
|
|
|
|
|
TWEEN.update(); |
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
}); |
|
|
|
|
|
init(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
