Temas e assets

Um tema define materiais dos poliedros, texturas e a aparência da moeda d2. Ele não altera valores nem regras. Cada dado pode ter tema e cor próprios, inclusive dentro da mesma apresentação. Explore os cinco visuais incluídos na galeria de texturas antes de criar o seu.

Assets públicos

Hospede dist/assets/dice-box/ do pacote em uma URL pública. O padrão é /assets/dice-box/:

public/assets/dice-box/
├── havok/HavokPhysics.wasm
└── themes/
    ├── default/
    ├── default-v2/
    ├── vampire-v5-normal/
    ├── vampire-v5-hunger/
    ├── assimilation/
    └── fate/

O tema default é numérico. Os temas de Vampiro, Assimilação e Fate usam símbolos sobre faces físicas numéricas. default-v2 é o tema usado pelos perfis Esperança/Medo de Daggerheart.

Configure cor e tema

const viewer = new DiceResultViewer({
  container: '#dice-stage',
  assetPath: '/assets/dice-box/',
  theme: 'default',
  themeColor: '#e60049',
  preloadThemes: ['default-v2']
})

await viewer.display({
  id: 'cores-1',
  dice: [
    { id: 'rosa', sides: 20, value: 18, themeColor: '#e60049' },
    { id: 'azul', sides: 6, value: 4, themeColor: '#315d9b' }
  ]
})

theme e themeColor no dado substituem os defaults do viewer. Em materiais color, themeColor é a base da superfície; em standard, a textura determina a cor principal. preloadThemes é consumido por init().

Tema externo

const viewer = new DiceResultViewer({
  container: '#dice-stage',
  externalThemes: {
    bronze: 'https://static.example.com/dice/bronze'
  }
})

await viewer.display({
  id: 'bronze-1',
  dice: [{ id: 'd20', sides: 20, value: 18, theme: 'bronze' }]
})

A URL deve apontar para uma pasta com theme.config.json; habilite CORS se for outra origem. Texturas relativas partem dessa pasta. meshFile também é relativo. O modelo padrão é usado quando meshFile não é fornecido.

Cache e atualização

O View guarda configurações por nome, modelos por URL e materiais por tema, cor e descarte. onThemeConfigLoaded sinaliza uma configuração nova; onThemeLoaded ocorre uma vez por tema usado na apresentação. updateOptions() pode alterar opções visuais. Para substituir a definição de um tema ou a raiz de assets já carregados, descarte o viewer e crie outro.

Leia Mapas de textura para entender diffuse, normal, especular e moeda. Siga Crie um tema 3D para montar e publicar a pasta, ou Personalize faces simbólicas para substituir números por glifos. O editor de temas oferece uma prévia interativa.