// viewer.js // ============================== let pc; export let app = null; let cameraEntity = null; let modelEntity = null; let viewerInitialized = false; let resizeObserver = null; let chosenCameraX, chosenCameraY, chosenCameraZ; let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, minY; let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ; let plyUrl, glbUrl; export async function initializeViewer(config, instanceId) { if (viewerInitialized) return; const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); const isMobile = isIOS || /Android/i.test(navigator.userAgent); plyUrl = config.ply_url; glbUrl = config.glb_url; minZoom = parseFloat(config.minZoom || "1"); maxZoom = parseFloat(config.maxZoom || "20"); minAngle = parseFloat(config.minAngle || "-45"); maxAngle = parseFloat(config.maxAngle || "90"); minAzimuth = (config.minAzimuth !== undefined) ? parseFloat(config.minAzimuth) : -360; maxAzimuth = (config.maxAzimuth !== undefined) ? parseFloat(config.maxAzimuth) : 360; minPivotY = parseFloat(config.minPivotY || "0"); minY = (config.minY !== undefined) ? parseFloat(config.minY) : 0; modelX = (config.modelX !== undefined) ? parseFloat(config.modelX) : 0; modelY = (config.modelY !== undefined) ? parseFloat(config.modelY) : 0; modelZ = (config.modelZ !== undefined) ? parseFloat(config.modelZ) : 0; modelScale = (config.modelScale !== undefined) ? parseFloat(config.modelScale) : 1; modelRotationX = (config.modelRotationX !== undefined) ? parseFloat(config.modelRotationX) : 0; modelRotationY = (config.modelRotationY !== undefined) ? parseFloat(config.modelRotationY) : 0; modelRotationZ = (config.modelRotationZ !== undefined) ? parseFloat(config.modelRotationZ) : 0; const cameraX = (config.cameraX !== undefined) ? parseFloat(config.cameraX) : 0; const cameraY = (config.cameraY !== undefined) ? parseFloat(config.cameraY) : 2; const cameraZ = (config.cameraZ !== undefined) ? parseFloat(config.cameraZ) : 5; const cameraXPhone = (config.cameraXPhone !== undefined) ? parseFloat(config.cameraXPhone) : cameraX; const cameraYPhone = (config.cameraYPhone !== undefined) ? parseFloat(config.cameraYPhone) : cameraY; const cameraZPhone = (config.cameraZPhone !== undefined) ? parseFloat(config.cameraZPhone) : (cameraZ * 1.5); chosenCameraX = isMobile ? cameraXPhone : cameraX; chosenCameraY = isMobile ? cameraYPhone : cameraY; chosenCameraZ = isMobile ? cameraZPhone : cameraZ; const canvasId = 'canvas-' + instanceId; const progressDialog = document.getElementById('progress-dialog-' + instanceId); const progressIndicator = document.getElementById('progress-indicator-' + instanceId); const viewerContainer = document.getElementById('viewer-container-' + instanceId); let oldCanvas = document.getElementById(canvasId); if (oldCanvas) oldCanvas.remove(); const canvas = document.createElement('canvas'); canvas.id = canvasId; canvas.className = 'ply-canvas'; canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.setAttribute('tabindex', '0'); viewerContainer.insertBefore(canvas, progressDialog); canvas.style.touchAction = "none"; canvas.style.webkitTouchCallout = "none"; canvas.addEventListener('gesturestart', e => e.preventDefault()); canvas.addEventListener('gesturechange', e => e.preventDefault()); canvas.addEventListener('gestureend', e => e.preventDefault()); canvas.addEventListener('dblclick', e => e.preventDefault()); canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false }); // --- The following line attaches mouse wheel suppression to canvas only --- canvas.addEventListener('wheel', (e) => { e.preventDefault(); // Only block page scroll if mouse is over viewer }, { passive: false }); // après avoir créé le canvas et mis tabindex=0 canvas.addEventListener('keydown', (e) => { if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)) { e.preventDefault(); } }); canvas.focus(); // pour capter les touches dès l’ouverture (facultatif) progressDialog.style.display = 'block'; if (!pc) { pc = await import("https://esm.run/playcanvas"); window.pc = pc; } // Create app first const device = await pc.createGraphicsDevice(canvas, { deviceTypes: ["webgl2"], glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js", twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js", antialias: false }); device.maxPixelRatio = Math.min(window.devicePixelRatio, 2); const opts = new pc.AppOptions(); opts.graphicsDevice = device; // Attach input only to canvas opts.mouse = new pc.Mouse(canvas); opts.touch = new pc.TouchDevice(canvas); opts.keyboard = new pc.Keyboard(window); opts.componentSystems = [ pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem, pc.ScriptComponentSystem, pc.GSplatComponentSystem, pc.CollisionComponentSystem, pc.RigidbodyComponentSystem ]; opts.resourceHandlers = [ pc.TextureHandler, pc.ContainerHandler, pc.ScriptHandler, pc.GSplatHandler ]; app = new pc.Application(canvas, opts); app.setCanvasFillMode(pc.FILLMODE_NONE); app.setCanvasResolution(pc.RESOLUTION_AUTO); resizeObserver = new ResizeObserver(entries => { entries.forEach(entry => { app.resizeCanvas(entry.contentRect.width, entry.contentRect.height); }); }); resizeObserver.observe(viewerContainer); window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight)); app.on('destroy', () => { resizeObserver.disconnect(); if (opts.keyboard) opts.keyboard.detach && opts.keyboard.detach(); }); // Assets after app exists const assets = { model: new pc.Asset('gsplat', 'gsplat', { url: plyUrl }), orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }), glb: new pc.Asset('glb', 'container', { url: glbUrl }), }; for (const key in assets) app.assets.add(assets[key]); const loader = new pc.AssetListLoader(Object.values(assets), app.assets); loader.load(() => { app.start(); progressDialog.style.display = 'none'; // Add PLY/GSplat model modelEntity = new pc.Entity('model'); modelEntity.addComponent('gsplat', { asset: assets.model }); modelEntity.setLocalPosition(modelX, modelY, modelZ); modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ); modelEntity.setLocalScale(modelScale, modelScale, modelScale); app.root.addChild(modelEntity); // --- Add the GLB entity --- if (assets.glb && assets.glb.resource && assets.glb.resource.instantiateRenderEntity) { const glbEntity = assets.glb.resource.instantiateRenderEntity(); app.root.addChild(glbEntity); } cameraEntity = new pc.Entity('camera'); // PURE WHITE BACKGROUND cameraEntity.addComponent('camera', { clearColor: new pc.Color(1, 1, 1, 1) }); // White RGBA cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ); cameraEntity.lookAt(modelEntity.getPosition()); cameraEntity.addComponent('script'); // === MAIN FIX: Pass ALL relevant attributes including minY === cameraEntity.script.create('orbitCamera', { attributes: { focusEntity: modelEntity, inertiaFactor: 0.2, distanceMax: maxZoom, distanceMin: minZoom, pitchAngleMax: maxAngle, pitchAngleMin: minAngle, yawAngleMax: maxAzimuth, yawAngleMin: minAzimuth, minY: minY, frameOnStart: false } }); cameraEntity.script.create('orbitCameraInputMouse'); cameraEntity.script.create('orbitCameraInputTouch'); cameraEntity.script.create('orbitCameraInputKeyboard', { attributes: { forwardSpeed: 1.2, // vitesses relatives à la distance strafeSpeed: 1.2, fastMultiplier: 2.5, // Shift slowMultiplier: 0.5 // Ctrl } }); app.root.addChild(cameraEntity); app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight); app.once('update', () => resetViewerCamera()); // Tooltips supported if tooltips_url set try { if (config.tooltips_url) { import('./tooltips.js').then(tooltipsModule => { tooltipsModule.initializeTooltips({ app, cameraEntity, modelEntity, tooltipsUrl: config.tooltips_url, defaultVisible: !!config.showTooltipsDefault, moveDuration: config.tooltipMoveDuration || 0.6 }); }).catch(e => { // Tooltips optional: fail silently if missing }); } } catch (e) { // Tooltips optional, fail silently } viewerInitialized = true; }); } export function resetViewerCamera() { try { if (!cameraEntity || !modelEntity || !app) return; const orbitCam = cameraEntity.script.orbitCamera; if (!orbitCam) return; const modelPos = modelEntity.getPosition(); const tempEnt = new pc.Entity(); tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ); tempEnt.lookAt(modelPos); const dist = new pc.Vec3().sub2( new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ), modelPos ).length(); cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ); cameraEntity.lookAt(modelPos); orbitCam.pivotPoint = modelPos.clone(); orbitCam._targetDistance = dist; orbitCam._distance = dist; const rot = tempEnt.getRotation(); const fwd = new pc.Vec3(); rot.transformVector(pc.Vec3.FORWARD, fwd); const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG; const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0); const rotNoYaw = new pc.Quat().mul2(yawQuat, rot); const fNoYaw = new pc.Vec3(); rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw); const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG; orbitCam._targetYaw = yaw; orbitCam._yaw = yaw; orbitCam._targetPitch = pitch; orbitCam._pitch = pitch; if (orbitCam._updatePosition) orbitCam._updatePosition(); tempEnt.destroy(); } catch (e) { // Silent fail } }