PCdlabs Archives - Présent Composé design https://presentcomposedesign.fr/category/pcdlabs/ Direction Artistique, concepts & innovations, Design 2D/3D/ia/AR/VR Tue, 12 May 2026 12:39:25 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.9.4 https://presentcomposedesign.fr/wp-content/uploads/2025/07/cropped-logo_PCd_2025-512-32x32.png PCdlabs Archives - Présent Composé design https://presentcomposedesign.fr/category/pcdlabs/ 32 32 My Puzzle https://presentcomposedesign.fr/my-puzzle/ Tue, 12 May 2026 12:38:27 +0000 https://presentcomposedesign.fr/?p=36614 3D Puzzle Viewer 🧩 Puzzle 3D Importer une image Mélanger le puzzle Sauvegarder la progression Générer un lien de partage Pièces correctement placées : 0 Glissez les pièces avec la souris. Molette : zoom Clic droit : rotation caméra 🧩 Puzzle 3D Importer une image Mélanger le puzzle Générer un lien de partage Pièces correctement placées : 0 Glissez les pièces avec la souris. Molette : zoom Clic droit : rotation caméra Puzzle 3D 🧩 Puzzle 3D Importer une image Mélanger le puzzle Pièces correctement placées : 0 🧩 Puzzle 3D Importer une image Mélanger le puzzle Générer un lien de partage Pièces correctement placées : 0 Glissez les pièces avec la souris. Molette : zoom Clic droit : rotation caméra let scene, camera, renderer, controls; let raycaster = new THREE.Raycaster(); let mouse = new THREE.Vector2(); let puzzlePieces = []; let selectedPiece = null; let offset = new THREE.Vector3(); let plane = new THREE.Plane(); let intersection = new THREE.Vector3(); const puzzleSize = 4; const pieceSize = 1; let originalPositions = []; init(); animate(); restorePuzzle(); function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(0, 0, 8); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; const ambient = new THREE.AmbientLight(0xffffff, 1.2); scene.add(ambient); const directional = new THREE.DirectionalLight(0xffffff, 1.5); directional.position.set(5, 10, 5); scene.add(directional); window.addEventListener('resize', onResize); renderer.domElement.addEventListener('pointerdown', onPointerDown); renderer.domElement.addEventListener('pointermove', onPointerMove); renderer.domElement.addEventListener('pointerup', onPointerUp); document .getElementById('imageUpload') .addEventListener('change', handleImageUpload); document .getElementById('shuffleBtn') .addEventListener('click', explodePuzzle); document .getElementById('shareBtn') .addEventListener('click', generateShareLink); } function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function clearPuzzle() { puzzlePieces.forEach(piece => { scene.remove(piece); }); puzzlePieces = []; originalPositions = []; } function handleImageUpload(e) { console.log('Import image déclenché'); const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(event) { createPuzzle(event.target.result); }; reader.readAsDataURL(file); // Sauvegarde locale de l'image source localStorage.setItem('puzzle-image', URL.createObjectURL(file)); } function createPuzzle(imageSrc) { clearPuzzle(); const loader = new THREE.TextureLoader(); loader.load(imageSrc, texture => { texture.minFilter = THREE.LinearFilter; for (let y = 0; y < puzzleSize; y++) { for (let x = 0; x < puzzleSize; x++) { const geometry = new THREE.BoxGeometry( pieceSize, pieceSize, 0.2 ); const materials = []; for (let i = 0; i < 6; i++) { materials.push( new THREE.MeshStandardMaterial({ color: i === 4 ? 0xffffff : 0x222222, map: i === 4 ? texture.clone() : null }) ); } const piece = new THREE.Mesh(geometry, materials); const tx = x / puzzleSize; const ty = y / puzzleSize; piece.material[4].map.repeat.set( 1 / puzzleSize, 1 / puzzleSize ); piece.material[4].map.offset.set( tx, 1 - (1 / puzzleSize) - ty ); piece.material[4].map.needsUpdate = true; const posX = (x - puzzleSize / 2) * pieceSize + pieceSize / 2; const posY = -(y - puzzleSize / 2) * pieceSize - pieceSize / 2; piece.position.set(posX, posY, 0); piece.userData.correctPosition = { x: posX, y: posY, z: 0 }; originalPositions.push({ x: posX, y: posY, z: 0 }); scene.add(piece); puzzlePieces.push(piece); } } explodePuzzle(); savePuzzle(); }); } function explodePuzzle() { puzzlePieces.forEach(piece => { piece.position.x += (Math.random() - 0.5) * 10; piece.position.y += (Math.random() - 0.5) * 10; piece.position.z += (Math.random() - 0.5) * 4; piece.rotation.x = Math.random() * Math.PI; piece.rotation.y = Math.random() * Math.PI; }); updateProgress(); } function onPointerDown(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(puzzlePieces); if (intersects.length > 0) { selectedPiece = intersects[0].object; plane.setFromNormalAndCoplanarPoint( camera.getWorldDirection(plane.normal), selectedPiece.position ); if (raycaster.ray.intersectPlane(plane, intersection)) { offset.copy(intersection).sub(selectedPiece.position); } controls.enabled = false; } } function onPointerMove(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); if (selectedPiece) { if (raycaster.ray.intersectPlane(plane, intersection)) { selectedPiece.position.copy(intersection.sub(offset)); } } } function onPointerUp() { if (selectedPiece) { const correct = selectedPiece.userData.correctPosition; const dist = selectedPiece.position.distanceTo( new THREE.Vector3(correct.x, correct.y, correct.z) ); if (dist < 0.5) { selectedPiece.position.set(correct.x, correct.y, correct.z); selectedPiece.rotation.set(0, 0, 0); } updateProgress(); savePuzzle(); } selectedPiece = null; controls.enabled = true; } function updateProgress() { let good = 0; puzzlePieces.forEach(piece => { const c = piece.userData.correctPosition; const dist = piece.position.distanceTo( new THREE.Vector3(c.x, c.y, c.z) ); if (dist < 0.01) { good++; } }); document.getElementById('progress').innerHTML = `Pièces correctement placées : ${good} / ${puzzlePieces.length}`; } function savePuzzle() { if (!puzzlePieces.length) return; const data = puzzlePieces.map(piece => ({ position: { x: piece.position.x, y: piece.position.y, z: piece.position.z }, rotation: { x: piece.rotation.x, y: piece.rotation.y, z: piece.rotation.z }, correctPosition: piece.userData.correctPosition })); localStorage.setItem('puzzle-progress', JSON.stringify(data)); } function restorePuzzle() { const saved = localStorage.getItem('puzzle-progress'); if (!saved) return; console.log('Progression restaurée automatiquement'); } function generateShareLink() { if (!puzzlePieces.length) return; const shareData = puzzlePieces.map(piece => ({ p: piece.position, r: piece.rotation, c: piece.userData.correctPosition })); const encoded = btoa(JSON.stringify(shareData)); const url = `${window.location.origin}${window.location.pathname}?puzzle=${encoded}`; const input = document.getElementById('shareLink'); input.value = url; input.select(); navigator.clipboard.writeText(url);

Cet article My Puzzle est apparu en premier sur Présent Composé design.

]]>
3D Puzzle Viewer

🧩 Puzzle 3D

Pièces correctement placées : 0
Glissez les pièces avec la souris.
Molette : zoom
Clic droit : rotation caméra

🧩 Puzzle 3D

Pièces correctement placées : 0
Glissez les pièces avec la souris.
Molette : zoom
Clic droit : rotation caméra
Puzzle 3D

🧩 Puzzle 3D

Pièces correctement placées : 0

🧩 Puzzle 3D

Pièces correctement placées : 0
Glissez les pièces avec la souris.
Molette : zoom
Clic droit : rotation caméra