Rent your mobile home at a campsite

/* ✅ Responsive: width 100% + height qui suit le width (800x750 => 16/15) */ #cube-container{ width: 100%; aspect-ratio: 16 / 15; /* 800 / 750 */ max-width: 800px; /* optionnel : garde la taille d’origine sur desktop */ margin: 0 auto; position: relative; overflow: hidden; } #cube-container canvas{ display:block; width:100% !important; height:100% !important; } document.addEventListener("DOMContentLoaded", () => { const container = document.getElementById("cube-container"); if (!container || !window.THREE) return; /* ========================= 🔧 RÉGLAGES PRINCIPAUX ========================= */ const CUBE_WIDTH = 2.6; const CUBE_HEIGHT = 1.4; const CUBE_DEPTH = 3.8; const ROOF_HEIGHT = 1.2; const ROOF_EXTEND_SIDE = +1; // +1 = avant const ROOF_SINGLE_OVERHANG = 1.6; // allongement d’un seul côté /* 📦 CUBE AVANT */ const FRONT_BOX_W = 2.6; const FRONT_BOX_H = 0.2; const FRONT_BOX_D = 1.1; const FRONT_BOX_OFFSET_X = 0; const FRONT_BOX_OFFSET_Y = 0; const FRONT_BOX_OFFSET_Z = -1.3; const FRONT_BOX_GAP = 0.15; const COLOR = 0x7C2C4F; const THICKNESS = 0.025; const ROT_SPEED = 0.01; /* ✅ AJUSTE LA TAILLE SANS ROGNAGE - VIEW_ZOOM : + grand => animation + grande à l’écran - FIT_PADDING : marge de sécurité (si ça rogne, augmente un peu) */ const VIEW_ZOOM = 2; // ✅ essaie 1.2 -> 2.2 const FIT_PADDING = 1.18; // ✅ plus petit = plus "serré" ; si rogne -> monte (1.22, 1.30) const CAMERA_SHIFT_Y = -2; // + => remonte le modèle / - => descend le modèle /* ========================= 🔧 TRAITS VERTICAUX FACE 1 ========================= */ const FACE1_BAR_COUNT = 3; const FACE1_BAR_Z_INSET = 0.01; const FACE1_BAR_X_MARGIN = 0.18; /* ========================= ✅ 2 TRAITS À CÔTÉ DE LA FACE 4 (INDÉPENDANTS) ========================= */ const SIDE4_LINES_ON = true; const SIDE4_X_OUT = 0.35; const SIDE4_Z_AUTO = null; const SIDE4_A_LEN = 1.4; const SIDE4_A_Y = 0; const SIDE4_A_Z = 2.5; const SIDE4_A_Z_OFFSET = 0; const SIDE4_A_X_OFFSET = 0.35; const SIDE4_B_LEN = 1.4; const SIDE4_B_Y = 0; const SIDE4_B_Z = 3; const SIDE4_B_Z_OFFSET = 0; const SIDE4_B_X_OFFSET = 0.35; /* ========================= ✅ 1 TRAIT À DROITE, EN DEHORS DE LA FACE 1 ========================= */ const RIGHT_FACE1_LINE_ON = true; const RIGHT_FACE1_LEN = 1.4; const RIGHT_FACE1_Y = 0.0; const RIGHT_FACE1_X_OUT = 0; const RIGHT_FACE1_Z_INSET = -1.1; const RIGHT_FACE1_Z_PUSH = 0.0; /* ========================= ✅ TRAIT HORIZONTAL ENTRE L5 et L6 (L7) ========================= */ const L5_L6_LINK_ON = true; const L5_L6_LINK_FORCE_Y = null; // ex: 0.2 ; null = auto /* ========================= ✅ NOUVEAU : PETITS TRAITS VERTICAUX SOUS L7 ========================= */ const L7_TICKS_ON = true; const L7_TICK_COUNT = 7; const L7_TICK_LEN = 0.65; const L7_TICK_DROP = 0; const L7_TICK_MARGIN_T = 0.08; // 0..0.49 /* ========================= ✅ L8 : TRAIT ENTRE ARÊTE GAUCHE FACE 1 ET L4 ========================= */ const L8_ON = true; const L8_FORCE_Y = null; // ex: 0.2 ; null = auto const L8_START_X_OFFSET = 0.0; const L8_START_Z_OFFSET = 0.0; const L8_FACE1_Z_INSET = 0.01; /* ========================= ✅ 2 TRAITS VERTICAUX SOUS L8 ========================= */ const L8_TICKS_ON = true; const L8_TICK_LEN = 0.65; const L8_TICK_DROP = 0; const L8_TICK_T = [0.33, 0.66]; /* ========================= ✅ NOUVEAU : ESCALIER 3D (3 marches) en filaire ========================= */ const STAIRS_ON = true; // Position globale (centre du "premier bloc") const STAIRS_X = -2.7; // droite (+) / gauche (-) const STAIRS_Y = -1.2; // haut (+) / bas (-) const STAIRS_Z = 2.2; // avant (+) / arrière (-) // Taille d'une marche (bloc 3D) const STAIRS_STEP_W = 0.55; // largeur (axe X) const STAIRS_STEP_H = 0.20; // hauteur (axe Y) const STAIRS_STEP_D = 0.50; // profondeur (axe Z) ✅ 3D ! const STAIRS_STEPS = 3; // Ecart entre marches (si tu veux aérer un peu) const STAIRS_GAP_X = 0.00; // espace horizontal entre marches const STAIRS_GAP_Y = 0.00; // espace vertical entre marches const STAIRS_GAP_Z = 0.00; // espace profondeur /* ========================= ✅ NOUVEAU : 3 RECTANGLES VERTICAUX SUR LA FACE 4 (réglables indépendamment) Face 4 = gauche => x = -hw ========================= */ const FACE4_RECTS_ON = true; // Évite le z-fighting (légèrement "décollé" de la face) const FACE4_RECTS_X_INSET = 0.01; // plus grand = plus décollé vers l'extérieur const FACE4_RECTS = [ { cx: 0.0, cy: 0.0, w: 0.55, h: 0.95, zOffset: 1.0, yOffset: 0.00, xOut: 0.00 }, // R1 { cx: 0.0, cy: 0.0, w: 0.35, h: 0.95, zOffset: -0.5, yOffset: 0.00, xOut: 0.00 }, // R2 { cx: 0.0, cy: 0.0, w: 0.55, h: 0.95, zOffset: -1.3, yOffset: 0.00, xOut: 0.00 }, // R3 ]; /* ========================= ✅ NOUVEAU : CERCLE SUR LA FACE 3 (droite) Face 3 = droite => x = +hw Le cercle est dans le plan Y/Z ========================= */ const FACE3_CIRCLE_ON = true; const FACE3_CIRCLE_CENTER_Y = 0.0; // haut(+)/bas(-) const FACE3_CIRCLE_CENTER_Z = 0.0; // avant(+)/arrière(-) const FACE3_CIRCLE_RADIUS = 0.45; const FACE3_CIRCLE_SEGMENTS = 28; const FACE3_CIRCLE_X_INSET = 0.01; /* ========================= 🎥 SCÈNE ========================= */ const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 45, 1, // ✅ sera set au resize() 0.1, 200 ); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); // ✅ un peu plus safe container.appendChild(renderer.domElement); /* ========================= 📦 GROUPE GLOBAL ========================= */ const group = new THREE.Group(); scene.add(group); group.position.set(-4, 0, 0); const mat = new THREE.MeshBasicMaterial({ color: COLOR }); const up = new THREE.Vector3(0, 1, 0); function addThickSegment(a, b) { const dir = new THREE.Vector3().subVectors(b, a); const len = dir.length(); if (len addThickSegment(a,b)); /* ========================= ✅ NUMÉROTATION DES TRAITS ========================= */ const numberedLineMeshes = []; /* ========================= ✅ 3 TRAITS VERTICAUX FACE 1 (L1..L3) ========================= */ { const z = hd - FACE1_BAR_Z_INSET; const yTop = hh; const yBot = -hh; const xMin = -hw + FACE1_BAR_X_MARGIN; const xMax = hw - FACE1_BAR_X_MARGIN; for (let i = 0; i addThickSegment(apex, p)); addThickSegment(r.F_L, r.F_R); addThickSegment(r.B_L, r.B_R); addThickSegment(r.F_L, r.B_L); addThickSegment(r.F_R, r.B_R); /* ========================= ✅ 2 TRAITS À CÔTÉ DE LA FACE 4 (L4, L5) ========================= */ let L4_center = null; let L5_center = null; if (SIDE4_LINES_ON) { const face4x = -hw; const zAuto = (SIDE4_Z_AUTO !== null) ? SIDE4_Z_AUTO : (zFront - 0.25); function addSide4Line(len, yCenter, zBaseOrNull, zOffset, xOffset) { const x = face4x - SIDE4_X_OUT + xOffset; const z = ((zBaseOrNull !== null) ? zBaseOrNull : zAuto) + zOffset; const half = len / 2; return addThickSegment( new THREE.Vector3(x, yCenter - half, z), new THREE.Vector3(x, yCenter + half, z) ); } const mA = addSide4Line(SIDE4_A_LEN, SIDE4_A_Y, SIDE4_A_Z, SIDE4_A_Z_OFFSET, SIDE4_A_X_OFFSET); const mB = addSide4Line(SIDE4_B_LEN, SIDE4_B_Y, SIDE4_B_Z, SIDE4_B_Z_OFFSET, SIDE4_B_X_OFFSET); numberedLineMeshes.push({ mesh: mA, label: "L4" }); numberedLineMeshes.push({ mesh: mB, label: "L5" }); if (mA) L4_center = mA.position.clone(); if (mB) L5_center = mB.position.clone(); } /* ========================= ✅ TRAIT À DROITE (hors face 1) (L6) ========================= */ let L6_center = null; if (RIGHT_FACE1_LINE_ON) { const x = hw + RIGHT_FACE1_X_OUT; const z = (hd - RIGHT_FACE1_Z_INSET) + RIGHT_FACE1_Z_PUSH; const half = RIGHT_FACE1_LEN / 2; const m = addThickSegment( new THREE.Vector3(x, RIGHT_FACE1_Y - half, z), new THREE.Vector3(x, RIGHT_FACE1_Y + half, z) ); numberedLineMeshes.push({ mesh: m, label: "L6" }); if (m) L6_center = m.position.clone(); } /* ========================= ✅ TRAIT HORIZONTAL ENTRE L5 et L6 (L7) ========================= */ let L7_A = null; let L7_B = null; if (L5_L6_LINK_ON && L5_center && L6_center) { const a = L5_center.clone(); const b = L6_center.clone(); if (L5_L6_LINK_FORCE_Y !== null) { a.y = L5_L6_LINK_FORCE_Y; b.y = L5_L6_LINK_FORCE_Y; } L7_A = a.clone(); L7_B = b.clone(); const m = addThickSegment(a, b); numberedLineMeshes.push({ mesh: m, label: "L7" }); } /* ========================= ✅ L8 : arête gauche face 1 -> L4 ========================= */ let L8_A = null; let L8_B = null; if (L8_ON && L4_center) { const y = (L8_FORCE_Y !== null) ? L8_FORCE_Y : L4_center.y; const a = new THREE.Vector3( (-hw + L8_START_X_OFFSET), y, (hd - L8_FACE1_Z_INSET + L8_START_Z_OFFSET) ); const b = new THREE.Vector3(L4_center.x, y, L4_center.z); L8_A = a.clone(); L8_B = b.clone(); const m = addThickSegment(a, b); numberedLineMeshes.push({ mesh: m, label: "L8" }); } /* ========================= ✅ 2 TRAITS VERTICAUX SOUS L8 ========================= */ if (L8_TICKS_ON && L8_A && L8_B) { L8_TICK_T.forEach((tt) => { const t = Math.min(Math.max(tt, 0), 1); const p = new THREE.Vector3().lerpVectors(L8_A, L8_B, t); const yTop = p.y - L8_TICK_DROP; const yBot = yTop - L8_TICK_LEN; addThickSegment( new THREE.Vector3(p.x, yTop, p.z), new THREE.Vector3(p.x, yBot, p.z) ); }); } /* ========================= ✅ PETITS TRAITS VERTICAUX SOUS L7 ========================= */ if (L7_TICKS_ON && L7_A && L7_B) { const count = Math.max(1, Math.floor(L7_TICK_COUNT)); const margin = Math.min(Math.max(L7_TICK_MARGIN_T, 0), 0.49); for (let i = 0; i addThickSegment(a,b)); } if (STAIRS_ON) { for (let i = 0; i { const cy = (rc.cy + rc.yOffset); addWireRectOnFace4( cy, rc.zOffset, // centre Z rc.w, rc.h, rc.xOut ); }); } /* ========================= ✅ CERCLE SUR LA FACE 3 ========================= */ if (FACE3_CIRCLE_ON) { const x = hw + FACE3_CIRCLE_X_INSET; const cy = FACE3_CIRCLE_CENTER_Y; const cz = FACE3_CIRCLE_CENTER_Z; const seg = Math.max(6, Math.floor(FACE3_CIRCLE_SEGMENTS)); const R = Math.max(0.0001, FACE3_CIRCLE_RADIUS); let prev = null; for (let i = 0; i addThickSegment(a,b)); } const frontCubeCenter = new THREE.Vector3( FRONT_BOX_OFFSET_X, -hh - FRONT_BOX_H/2 + FRONT_BOX_OFFSET_Y, zFront + FRONT_BOX_D/2 + FRONT_BOX_GAP + FRONT_BOX_OFFSET_Z ); addWireCube(frontCubeCenter, FRONT_BOX_W, FRONT_BOX_H, FRONT_BOX_D); /* ========================= 🎥 CAMÉRA AUTO-FIT + ZOOM (sans rognage) ========================= */ function fitCamera(padding = 1.25, zoom = 1.0) { const box = new THREE.Box3().setFromObject(group); const sphere = new THREE.Sphere(); box.getBoundingSphere(sphere); const r = sphere.radius * padding; const halfFovV = THREE.MathUtils.degToRad(camera.fov * 0.5); const halfFovH = Math.atan(Math.tan(halfFovV) * camera.aspect); const distV = r / Math.sin(halfFovV); const distH = r / Math.sin(halfFovH); let dist = Math.max(distV, distH); dist = dist / Math.max(0.0001, zoom); camera.position.set(dist, dist * 0.5, dist); camera.lookAt( sphere.center.x, sphere.center.y + CAMERA_SHIFT_Y, sphere.center.z ); camera.near = dist / 100; camera.far = dist * 100; camera.updateProjectionMatrix(); } scene.add(new THREE.AmbientLight(0xffffff, 1)); /* ========================= ✅ RESPONSIVE (ResizeObserver) ========================= */ function resize() { const rect = container.getBoundingClientRect(); const w = Math.max(1, Math.floor(rect.width)); const h = Math.max(1, Math.floor(rect.height)); renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); fitCamera(FIT_PADDING, VIEW_ZOOM); } const ro = new ResizeObserver(resize); ro.observe(container); // init resize(); fitCamera(FIT_PADDING, VIEW_ZOOM); /* ========================= 🔄 ANIMATION ========================= */ function animate() { requestAnimationFrame(animate); group.rotation.y += ROT_SPEED; renderer.render(scene, camera); } animate(); });