Experiencia completa: Vue + Three.js + Monolook

Guía paso a paso para crear una experiencia AR completa, basada en el proyecto Springs of Love (Brussels).

Stack

Paquete	Uso
Vue 3	Framework UI (Composition API)
Vue Router	Navegación entre pantallas
Pinia	Estado global
Three.js	Motor 3D WebGL
Anime.js	Animaciones de UI
Vue3-Lottie	Animaciones Lottie (loading, onboarding)
Bowser	Detección de plataforma
Vite	Build tool

Scaffolding

npm create vite@latest mi-experiencia -- --template vue
cd mi-experiencia
npm install
npm install vue-router@4 pinia three animejs vue3-lottie bowser

Estructura del proyecto

src/
├── App.vue
├── main.js
├── router/
│   └── index.js
├── stores/
│   └── experience.js
├── views/
│   ├── StartView.vue          # Pantalla de inicio
│   └── ExperienceView.vue     # Vista AR
├── components/
│   ├── ThreeScene.vue         # Escena 3D
│   ├── Header.vue
│   ├── Sidebar.vue
│   └── HotspotCard.vue
├── composables/
│   └── useMonolook.js         # Lógica del SDK
└── assets/
    ├── models/                # GLB, GLTF
    ├── textures/
    └── audio/

Flujo de la experiencia

[StartView] → click → [ExperienceView]
                            ↓
                    [Detectar plataforma]
                      ↙           ↘
              [WebXR]           [AppClip]
              (Android/Quest)    (iOS)
                      ↘           ↙
                    [ThreeScene]
                         ↓
                  [Contenido 3D + UI]

Configuración de Vite

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    https: true  // WebXR requiere HTTPS
  },
  build: {
    target: 'esnext'
  }
})

HTTPS obligatorio

WebXR requiere HTTPS. Configura siempre server.https: true en desarrollo.

Entry point

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'

createApp(App)
  .use(createPinia())
  .use(router)
  .mount('#app')

Sistema de rutas

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import StartView from '../views/StartView.vue'
import ExperienceView from '../views/ExperienceView.vue'

export default createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: StartView },
    { path: '/experience', component: ExperienceView }
  ]
})

Detección de plataforma

import Bowser from 'bowser'

const browser = Bowser.getParser(navigator.userAgent)
const os = browser.getOSName()
const isIOS = os === 'iOS'
const isAndroid = os === 'Android'
const isDesktop = !isIOS && !isAndroid

Siguiente paso

Esta guía cubre la estructura base. Para más detalle sobre cada componente:

• Image Tracking con Three.js — Tracking de imágenes
• SLAM Web — Surface tracking
• iOS AppClip — Bridge nativo
• Deploy — Build y hosting