# Moedas 3D para seu site

Sete modelos `.glb`, com frente e verso baseados nas imagens fornecidas, espessura e borda em 3D. Cada GLB contém suas texturas; ele pode ser usado sozinho. O relevo raso foi aproximado pelo contraste das imagens; as fotos também contêm luz e sombra já gravadas. A profundidade real da gravação não pode ser recuperada com exatidão dessas referências.

Cada moeda tem 32.256 triângulos e aproximadamente 1,4–1,6 MB. Os sete GLBs juntos somam cerca de 10,6 MB. As texturas têm 512 × 512 pixels, derivadas das faces de aproximadamente 371 pixels presentes nas imagens originais. Carregue somente as moedas necessárias na página, como faz esta demonstração.

## Ver a coleção

Publique a pasta inteira `moedas-3d` em uma hospedagem estática e abra `index.html`. A demonstração usa Three.js local, sem depender de uma CDN. Arraste para girar, use os botões **Frente** e **Verso**, e role para aproximar. No celular, use o toque e a pinça. As setas do teclado também giram a moeda quando o visualizador está focado.

Para testar no computador, abra um terminal dentro da pasta e execute, se tiver Python instalado:

```sh
python -m http.server 8000
```

Abra `http://localhost:8000`. Abrir o HTML com duplo clique (`file://`) pode bloquear a leitura dos modelos e módulos.

## Colocar no site

A opção mais rápida é copiar toda a pasta para `/moedas-3d/` no seu site e inserir o visualizador em um iframe:

```html
<iframe
  src="/moedas-3d/index.html?embed=1&moeda=american-old-trucks"
  title="Moeda American Old Trucks em 3D"
  style="width:100%;height:560px;border:0;border-radius:16px;"
  loading="lazy"
></iframe>
```

Troque o valor de `moeda` por um dos nomes da tabela abaixo. Remova `embed=1` para mostrar o catálogo completo.

| Moeda | Nome do arquivo / parâmetro `moeda` |
|---|---|
| American Old Trucks | `american-old-trucks.glb` / `american-old-trucks` |
| Mundo a Vapor | `mundo-a-vapor.glb` / `mundo-a-vapor` |
| Palácio do Kikito | `palacio-do-kikito.glb` / `palacio-do-kikito` |
| Projeto Tamar | `projeto-tamar.glb` / `projeto-tamar` |
| Aquário de São Paulo | `aquario-de-sao-paulo.glb` / `aquario-de-sao-paulo` |
| Barco Pirata | `barco-pirata.glb` / `barco-pirata` |
| Itaipu Binacional | `itaipu-binacional.glb` / `itaipu-binacional` |

### Usar só uma moeda com model-viewer

Copie o GLB escolhido para o site. O componente [model-viewer](https://modelviewer.dev/) exibe modelos interativos com uma tag HTML:

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

<model-viewer
  src="/assets/american-old-trucks.glb"
  alt="Moeda American Old Trucks, frente e verso"
  camera-controls
  auto-rotate
  camera-orbit="0deg 90deg auto"
  shadow-intensity="0.5"
  exposure="1"
  style="width:100%;height:480px;background:transparent;">
</model-viewer>
```

Esse exemplo baixa o componente pela CDN e precisa de internet. Em produção, fixe a versão do componente usada pelo seu projeto. Remova `auto-rotate` para iniciar com a moeda parada.

### Usar em um projeto Three.js

Carregue o GLB com `GLTFLoader` na sua cena existente:

```js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('/assets/american-old-trucks.glb', (gltf) => {
  scene.add(gltf.scene);
});
```

A cena deve ter câmera, renderizador e iluminação. Os modelos usam materiais metálicos: uma iluminação de ambiente ou mapa de reflexos melhora a aparência. A demonstração em `index.html` já fornece esses elementos. Consulte o [manual oficial do Three.js sobre carregar modelos](https://threejs.org/manual/en/loading-3d-models.html).

## Estrutura e escala

```text
moedas-3d/
├── index.html          Demonstração interativa
├── LEIA-ME.md          Este guia
├── assets/             7 GLBs e imagens das faces
└── vendor/             Módulos Three.js locais e licença
```

Os modelos estão centrados na origem, com raio aproximado de 1 unidade. A frente aponta para `+Z` e o verso para `−Z`; a moeda fica no plano `XY`. Ajuste a escala no seu projeto conforme necessário. Não adote essa unidade como dimensão física real.

Sirva `.glb` preferencialmente com `Content-Type: model/gltf-binary`, `.js` com `text/javascript` e `.jpg` com `image/jpeg`. Se hospedar os arquivos em outro domínio, esse domínio deve permitir leitura por CORS.