239 lines
8.9 KiB
HTML
239 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Tutoriales — 3Dcomunity</title>
|
||
|
||
<!-- ÚNICO CSS para esta página -->
|
||
<link rel="stylesheet" href="tutorials.css"/>
|
||
</head>
|
||
<body>
|
||
<!-- HEADER -->
|
||
<header class="site-header">
|
||
<!-- Logo que lleva a la home -->
|
||
<a class="site-logo" href="/" aria-label="Ir a la página de inicio">
|
||
<img src="3d_comunity_not_cool.webp" alt="Logo 3Dcomunity" width="44" height="44">
|
||
</a>
|
||
|
||
<h1 class="site-title">3Dcomunity</h1>
|
||
<nav class="nav-menu">
|
||
<button onclick="location.href='/code.html'">Code</button>
|
||
<button onclick="location.href='/gallery.html'">Gallery</button>
|
||
<button class="active" onclick="location.href='/tutorials.html'">Tutorials</button>
|
||
<button onclick="location.href='/about.html'">About</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- CONTENIDO -->
|
||
<main class="tut-page">
|
||
<section class="doc-card">
|
||
|
||
<!-- HERO -->
|
||
<div class="hero-head">
|
||
<h2 class="hero-title">Tutoriales <span>3Dcomunity</span></h2>
|
||
<p class="hero-subtitle">
|
||
Guías claras para: <strong>STL → GLB</strong>, previsualizar con
|
||
<em><model-viewer></em> y publicar en <strong>Oasis/SSB</strong>.
|
||
Mantén los modelos ligeros, accesibles y fáciles de compartir.
|
||
</p>
|
||
<div class="btn-row">
|
||
<a class="btn btn-green" href="#quickstart">Empezar en 10 minutos</a>
|
||
<a class="btn btn-outline" href="#faq">FAQ</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Índice rápido -->
|
||
<nav class="index-row" aria-label="Índice de la página">
|
||
<a class="btn btn-orange" href="#quickstart">Quickstart</a>
|
||
<a class="btn btn-outline" href="#pipeline">STL → GLB</a>
|
||
<a class="btn btn-outline" href="#viewer">Visor 3D</a>
|
||
<a class="btn btn-outline" href="#oasis">Publicar en Oasis</a>
|
||
<a class="btn btn-outline" href="#pub">Despliegue</a>
|
||
<a class="btn btn-outline" href="#faq">FAQ</a>
|
||
</nav>
|
||
|
||
<!-- QUICKSTART -->
|
||
<section id="quickstart" class="block" aria-labelledby="t-quickstart">
|
||
<h3 id="t-quickstart" class="block-title">Inicio rápido (≈10 min)</h3>
|
||
|
||
<div class="grid-2">
|
||
<article class="card">
|
||
<h4>1) Estructura mínima</h4>
|
||
<pre class="code"><code>.
|
||
├─ index.html
|
||
├─ /modelos
|
||
│ └─ ejemplo.glb
|
||
├─ /thumbs
|
||
│ └─ ejemplo.jpg
|
||
└─ /assets
|
||
└─ 3d_comunity_cool.webp
|
||
</code></pre>
|
||
<ul class="check-list">
|
||
<li>Pon <strong>.glb</strong> en <code>/modelos</code> y miniaturas en <code>/thumbs</code>.</li>
|
||
<li>Usa rutas absolutas (<code>/modelos/…</code>) para evitar problemas en subdirectorios.</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<h4>2) Visor web (<model-viewer>)</h4>
|
||
<pre class="code"><code><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></code></pre>
|
||
<ul class="check-list">
|
||
<li>Funciona en escritorio y móvil sin plugins.</li>
|
||
<li>Controla luz, auto-rotación y exposición.</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
|
||
<pre class="ascii gn" aria-hidden="true"><code> _______ STL (malla cruda)
|
||
/ ____ \
|
||
/ / ___| | --limpieza--> +-----------+ --export--> +-----------+
|
||
| | | | | Blender | GLB (binario) | GLTF/GLB |
|
||
\ \____ | --simplif.--> +-----------+ +-----------+
|
||
\_____/ / |
|
||
Visor web (model-viewer) ---+--> HTML/CSS estático + Oasis/SSB
|
||
</code></pre>
|
||
</section>
|
||
|
||
<!-- PIPELINE STL -> GLB -->
|
||
<section id="pipeline" class="block" aria-labelledby="t-pipeline">
|
||
<h3 id="t-pipeline" class="block-title">Pipeline: de STL a GLB</h3>
|
||
<div class="grid-2">
|
||
<article class="card">
|
||
<h4>Limpieza y reducción</h4>
|
||
<ul class="dash-list">
|
||
<li>Importa el STL en Blender.</li>
|
||
<li>Repara normales y elimina vértices duplicados.</li>
|
||
<li>Aplica <em>Decimate</em> si pesa demasiado.</li>
|
||
<li>Materiales sencillos (PBR si procede).</li>
|
||
</ul>
|
||
</article>
|
||
<article class="card">
|
||
<h4>Exportar a GLB</h4>
|
||
<pre class="code"><code>File → Export → glTF 2.0
|
||
Format: GLB (binary)
|
||
Include: Selected Objects (opcional)
|
||
Compression: Draco (si compensa)
|
||
Materials: Export</code></pre>
|
||
<ul class="dash-list">
|
||
<li><strong>GLB</strong> empaqueta geometría, materiales y texturas.</li>
|
||
<li>Si usas Draco, prueba en varios dispositivos.</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- VISOR -->
|
||
<section id="viewer" class="block" aria-labelledby="t-viewer">
|
||
<h3 id="t-viewer" class="block-title">Visor 3D en la web</h3>
|
||
<article class="card">
|
||
<h4>Snippet base</h4>
|
||
<pre class="code"><code><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></code></pre>
|
||
<ul class="check-list">
|
||
<li>Usa <code>poster</code> para una carga elegante.</li>
|
||
<li>Activa <code>ar</code> para móviles compatibles.</li>
|
||
</ul>
|
||
</article>
|
||
</section>
|
||
|
||
<!-- OASIS -->
|
||
<section id="oasis" class="block" aria-labelledby="t-oasis">
|
||
<h3 id="t-oasis" class="block-title">Publicar en Oasis/SSB</h3>
|
||
<div class="grid-2">
|
||
<article class="card">
|
||
<h4>Metadata simple</h4>
|
||
<pre class="code"><code>{
|
||
"name": "ejemplo",
|
||
"author": "taller3d",
|
||
"tags": ["utilidad","mini"],
|
||
"files": { "glb": "/modelos/ejemplo.glb",
|
||
"thumb": "/thumbs/ejemplo.jpg" }
|
||
}</code></pre>
|
||
<ul class="dash-list">
|
||
<li>Guárdalo como <code>/modelos/ejemplo.json</code>.</li>
|
||
<li>Te servirá para tarjetas y filtros.</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<h4>Subir a tu PUB</h4>
|
||
<pre class="ascii or" aria-hidden="true"><code>+------------------+ +------------------+
|
||
| Tu estación | SSB | PUB Oasis |
|
||
| (desarrollo) | <----> | (público) |
|
||
+------------------+ +------------------+
|
||
Archivos estáticos → Nginx (HTTPS)
|
||
Mensajes/feeds → Gossip (7724/TCP)
|
||
</code></pre>
|
||
<ul class="dash-list">
|
||
<li>Sirve HTML+CSS+GLB vía Nginx.</li>
|
||
<li>El PUB facilita <em>discovery</em> y replicación.</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DESPLIEGUE -->
|
||
<section id="pub" class="block" aria-labelledby="t-pub">
|
||
<h3 id="t-pub" class="block-title">Despliegue estático (Nginx)</h3>
|
||
<article class="card">
|
||
<h4>Ejemplo mínimo</h4>
|
||
<pre class="code"><code>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; }
|
||
}</code></pre>
|
||
<ul class="check-list">
|
||
<li>Asegura el MIME <code>model/gltf-binary</code> para <code>.glb</code>.</li>
|
||
<li>Rutas absolutas en tus HTML.</li>
|
||
</ul>
|
||
</article>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section id="faq" class="block" aria-labelledby="t-faq">
|
||
<h3 id="t-faq" class="block-title">FAQ</h3>
|
||
|
||
<details class="faq">
|
||
<summary>¿Peso ideal de un GLB para móvil?</summary>
|
||
<p>Apunta a <strong>< 10 MB</strong> (ideal 2–5 MB). Simplifica malla y texturas.</p>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary>¿Usar STL directamente en navegador?</summary>
|
||
<p>Mejor no: STL suele pesar más y no trae materiales. Exporta a <strong>GLB</strong>.</p>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary>¿Cómo organizar muchos modelos?</summary>
|
||
<p><code>/modelos</code> + <code>/thumbs</code> + <code>/modelos/*.json</code> (metadata) para filtrar y paginar.</p>
|
||
</details>
|
||
</section>
|
||
|
||
<!-- CTA final -->
|
||
<div class="btn-row" style="margin-top:.4rem">
|
||
<a class="btn btn-green" href="#pipeline">Convertir mis STL ahora</a>
|
||
<a class="btn btn-orange" href="#viewer">Probar visor 3D</a>
|
||
</div>
|
||
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|