Demo 02 Three.js r128 model-viewer 3.5
Three.js · Scene 3D Interactiva

Tu marca en
otra dimensión.

Visualizaciones 3D para heroes que no se olvidan. Partículas, física, mouse-tracking. Todo a 60fps.

Ver producto 3D Cómo usarlo
scroll
Powered by Three.js r128 · Partículas interactivas
20+
marcas en Bolivia & USA
60fps
render en tiempo real
AR
realidad aumentada web
100%
sin plugins, puro browser
model-viewer 3.5 · Producto 3D + AR

Tu producto,
rotable.

Con model-viewer cualquier producto en formato GLB gira, se hace zoom y se abre en realidad aumentada directo desde el celular del cliente.

Sin apps nativas. Sin plugins. Solo HTML.

Ver snippet de producción
model-viewer 3.5 · AR activado
Arrastrá para rotar · Pellizca para hacer zoom

Cómo usarlo en producción

Three.js — npm install
# instalar
npm install three

# import básico
import * as THREE from 'three'

const scene = new THREE.Scene()
const cam = new THREE.PerspectiveCamera(
  75, innerWidth/innerHeight, 0.1, 1000
)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(innerWidth, innerHeight)
document.body.appendChild(renderer.domElement)
model-viewer — npm install
# instalar
npm install @google/model-viewer

# en tu entry point
import '@google/model-viewer'

# en el HTML
<model-viewer
  src="/models/mi-producto.glb"
  alt="Descripción"
  auto-rotate
  camera-controls
  ar
></model-viewer>
Cómo usar esto en un proyecto Quimera real

Three.js — escena de partículas con mouse-tracking:

import * as THREE from 'three'

// Geometría de partículas
const geo = new THREE.BufferGeometry()
const N = 8000
const pos = new Float32Array(N * 3)
for (let i = 0; i < N * 3; i++)
  pos[i] = (Math.random() - 0.5) * 80
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3))

const mat = new THREE.PointsMaterial({
  color: '#42E200', size: 0.12, transparent: true, opacity: 0.6
})
scene.add(new THREE.Points(geo, mat))

// Mouse tracking
const mouse = { x: 0, y: 0 }
window.addEventListener('mousemove', e => {
  mouse.x = (e.clientX / innerWidth  - 0.5) * 2
  mouse.y = (e.clientY / innerHeight - 0.5) * 2
})
// Usar mouse.x/.y en tu loop de animación

model-viewer — hotspot de producto:

<model-viewer src="/models/producto.glb" ar camera-controls>
  <button slot="hotspot-1"
    data-position="0 0.1 0"
    data-normal="0 1 0">
    ✦ Feature premium
  </button>
</model-viewer>

Tip: exportá desde Blender / Spline / Reality Composer en .glb (un solo archivo, sin texturas sueltas). Usá gltf.report para comprimir.