Couldn't load pickup availability
Free Shipping on orders over €50
100 Days
365 Days<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Objekt mit Hand-Cursor</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
/* Der Cursor ist eine Hand, wenn der Benutzer das Modell drehen kann */
body {
cursor: grab; /* Zeigt die offene Hand an (wie bei Google Maps oder Google Earth) */
}
/* Während der Benutzer klickt, wird der Cursor zu einer geschlossenen Hand */
body.grabbing {
cursor: grabbing; /* Zeigt eine geschlossene Hand an */
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>
const modelUrl = 'https://raw.githubusercontent.com/LGBTQWorldwide/adidas/refs/heads/main/good_earth.gltf';
// Initialisierung der Szene, Kamera und Renderer
const canvas = document.getElementById('canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); // alpha: true für transparenten Hintergrund
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// Setzt den transparenten Hintergrund des Renderers
renderer.setClearColor(0x000000, 0); // Hintergrund transparent
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 4); // Kamera etwas näher an das Modell positionieren
camera.lookAt(0, 0, 0); // Auf das Modell zentrieren
// Lichtquellen hinzufügen
const ambientLight = new THREE.AmbientLight(0xffffff, 1); // Umgebungslicht
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // Intensiveres Licht
directionalLight.position.set(5, 5, 5).normalize(); // Position des Lichts
scene.add(directionalLight);
// 3D-Objekt laden
const loader = new THREE.GLTFLoader();
loader.load(modelUrl, (gltf) => {
const model = gltf.scene;
model.scale.set(0.9, 0.9, 0.9); // Modellgröße anpassen
model.position.set(0, 0, 0); // Modell zentrieren
scene.add(model);
let isMouseDown = false;
let previousMousePosition = { x: 0, y: 0 };
let currentRotation = model.rotation.y;
// Mausbewegung zum Drehen des Modells
function onMouseMove(event) {
if (isMouseDown) {
const deltaMove = event.clientX - previousMousePosition.x;
currentRotation += deltaMove * 0.005; // Drehung basierend auf der Mausbewegung
currentRotation = currentRotation % (2 * Math.PI); // Begrenze die Rotation auf 0 bis 360 Grad
model.rotation.y = currentRotation; // Drehung des 3D-Modells
previousMousePosition = { x: event.clientX, y: event.clientY };
}
}
// Maus gedrückt: Cursor zu geschlossener Hand
canvas.addEventListener('mousedown', (event) => {
isMouseDown = true;
previousMousePosition = { x: event.clientX, y: event.clientY };
document.body.classList.add('grabbing'); // Setzt den Cursor auf die geschlossene Hand
document.body.classList.remove('grab');
document.addEventListener('mousemove', onMouseMove); // Eventlistener für Mausbewegung hinzufügen
});
// Maus losgelassen: Cursor zurück zu offener Hand
document.addEventListener('mouseup', () => {
isMouseDown = false;
document.removeEventListener('mousemove', onMouseMove); // Eventlistener für Mausbewegung entfernen
document.body.classList.add('grab'); // Setzt den Cursor zurück zur offenen Hand
document.body.classList.remove('grabbing');
});
// Animationsloop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
});
// Fensteranpassung, wenn das Fenster verändert wird
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
</script>
</body>
</html>
• Doing Good Together - We donate €2 per order to charitable causes.
• Sustainability - Our clothing is OEKO-TEX & PETA certified.
• Diversity and Acceptance - The world's largest LGBTQ+ shop supporting the community.
💖 For every order, we donate €2 to LGBTQ+ friendly causes to promote love and acceptance among people. Your support helps fund important projects and initiatives that fight for equality and a better coexistence. Thank you for helping to make the world a better place! 🌟🙏
