actualizacion_subdirectorios
This commit is contained in:
root
parent
8ce4c5765a
commit
4f1e8654cb
14 changed files with 2932 additions and 165 deletions
|
|
@ -1,31 +1,239 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>3Dcomunity</title>
|
||||
<link rel="stylesheet" href="tutorials.css" />
|
||||
<!-- Web Component del visor -->
|
||||
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
|
||||
<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 onclick="location.href='tutorials.html'">Tutorials</button>
|
||||
<button onclick="location.href='about.html'">About</button>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue