Tutoriales — 3Dcomunity

Tutoriales 3Dcomunity

Guías claras para: STL → GLB, previsualizar con <model-viewer> y publicar en Oasis/SSB. Mantén los modelos ligeros, accesibles y fáciles de compartir.

Empezar en 10 minutos FAQ

Inicio rápido (≈10 min)

1) Estructura mínima

.
├─ index.html
├─ /modelos
│   └─ ejemplo.glb
├─ /thumbs
│   └─ ejemplo.jpg
└─ /assets
    └─ 3d_comunity_cool.webp

Pon .glb en /modelos y miniaturas en /thumbs.
Usa rutas absolutas (/modelos/…) para evitar problemas en subdirectorios.

2) Visor web (<model-viewer>)

<script type="module"
  src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<model-viewer src="/modelos/ejemplo.glb"
  camera-controls auto-rotate
  shadow-intensity="1" exposure="1.05"
  style="width:100%;height:420px;background:#000;border-radius:10px;">
</model-viewer>

Funciona en escritorio y móvil sin plugins.
Controla luz, auto-rotación y exposición.

   _______  STL (malla cruda)
  / ____  \ 
 / / ___| |  --limpieza-->   +-----------+   --export-->   +-----------+
| | |     |                  |  Blender  |  GLB (binario)  |  GLTF/GLB |
 \ \____  |  --simplif.-->   +-----------+                 +-----------+
  \_____/ /                           |
          Visor web (model-viewer) ---+--> HTML/CSS estático + Oasis/SSB

Pipeline: de STL a GLB

Limpieza y reducción

Importa el STL en Blender.
Repara normales y elimina vértices duplicados.
Aplica Decimate si pesa demasiado.
Materiales sencillos (PBR si procede).

Exportar a GLB

File → Export → glTF 2.0
Format: GLB (binary)
Include: Selected Objects (opcional)
Compression: Draco (si compensa)
Materials: Export

GLB empaqueta geometría, materiales y texturas.
Si usas Draco, prueba en varios dispositivos.

Visor 3D en la web

Snippet base

<model-viewer src="/modelos/ejemplo.glb"
  camera-controls auto-rotate
  ar ar-modes="webxr scene-viewer quick-look"
  poster="/thumbs/ejemplo.jpg"
  shadow-intensity="1" exposure="1.05">
</model-viewer>

Usa poster para una carga elegante.
Activa ar para móviles compatibles.

Publicar en Oasis/SSB

Metadata simple

{
  "name": "ejemplo",
  "author": "taller3d",
  "tags": ["utilidad","mini"],
  "files": { "glb": "/modelos/ejemplo.glb",
             "thumb": "/thumbs/ejemplo.jpg" }
}

Guárdalo como /modelos/ejemplo.json.
Te servirá para tarjetas y filtros.

Subir a tu PUB

+------------------+         +------------------+
|  Tu estación     |  SSB    |    PUB Oasis     |
|  (desarrollo)    | <----> |  (público)       |
+------------------+         +------------------+
   Archivos estáticos  →  Nginx (HTTPS)
   Mensajes/feeds      →  Gossip (7724/TCP)

Sirve HTML+CSS+GLB vía Nginx.
El PUB facilita discovery y replicación.

Despliegue estático (Nginx)

Ejemplo mínimo

server {
  listen 443 ssl http2;
  server_name 3dcomunity.net;

  root /var/www/3dcomunity/public;
  index index.html;

  location / { try_files $uri $uri/ =404; }

  types { model/gltf-binary glb; }
}

Asegura el MIME model/gltf-binary para .glb.
Rutas absolutas en tus HTML.

FAQ

¿Peso ideal de un GLB para móvil?

Apunta a < 10 MB (ideal 2–5 MB). Simplifica malla y texturas.

¿Usar STL directamente en navegador?

Mejor no: STL suele pesar más y no trae materiales. Exporta a GLB.

¿Cómo organizar muchos modelos?

/modelos + /thumbs + /modelos/*.json (metadata) para filtrar y paginar.

Convertir mis STL ahora Probar visor 3D