O componente web <needle-engine> inclui uma coleção útil de atributos incorporados que podem ser usados para modificar a aparência da cena carregada sem a necessidade de adicionar ou editar diretamente a cena three.js. A tabela abaixo mostra uma lista dos mais importantes:

Atributo	Descrição
Carregamento
`src`	Caminho para um ou múltiplos ficheiros glTF ou glb. Os tipos suportados são `string`, `string[]` ou um array em string (separados por `,`)
`dracoDecoderPath`	URL para o descodificador draco
`dracoDecoderType`	Tipo de descodificador draco. As opções são `wasm` ou `js`. Consulte a documentação three.js
`ktx2DecoderPath`	URL para o descodificador KTX2
Renderização
`background-color`	opcional, cor hexadecimal a ser usada como cor de fundo. Exemplos: `rgb(255, 200, 100)`, `#dddd00`
`background-image`	opcional, URL para uma imagem skybox (imagem de fundo) ou uma string predefinida: `studio`, `blurred-skybox`, `quicklook`, `quicklook-ar`
`background-blurriness`	opcional, valor de desfocagem entre 0 (sem desfocagem) e 1 (desfocagem máxima) para a `background-image`. Exemplo: `background-blurriness="0.5"`
`environment-image`	opcional, URL para uma imagem de ambiente (luz de ambiente) ou uma string predefinida: `studio`, `blurred-skybox`, `quicklook`, `quicklook-ar`
`contactshadows`	opcional, renderizar sombras de contacto
`tone-mapping`	opcional, os valores suportados são `none`, `linear`, `neutral`, `agx`
`tone-mapping-exposure`	número opcional, por exemplo, aumentar a exposição com `tone-mapping-exposure="1.5"`, requer que `tone-mapping` esteja definido
Interação
`autoplay`	adicionar ou definir como `true` para reproduzir automaticamente animações, por exemplo, `<needle-engine autoplay`
`camera-controls`	adicionar ou definir como `true` para adicionar automaticamente OrbitControls se não forem encontrados controlos de câmara na cena
`auto-rotate`	adicionar para ativar a rotação automática (apenas usado com `camera-controls`)
Eventos
`loadstart`	Nome da função a chamar quando o carregamento começa. Note que os argumentos são `(ctx:Context, evt:Event)`. Pode chamar `evt.preventDefault()` para ocultar a sobreposição de carregamento padrão
`progress`	Nome da função a chamar quando o carregamento atualiza. `onProgress(ctx:Context, evt: {detail: {context:Context, name:string, index:number, count:number, totalProgress01:number}) { ... }`
`loadfinished`	Nome da função a chamar quando o carregamento termina
Visualização de Carregamento	Opções disponíveis para alterar a aparência da visualização de carregamento do Needle Engine. Use `?debugloadingrendering` para facilitar a edição
`loading-style`	As opções são `light` ou `dark`
`loading-background-color`	PRO — Altere a cor de fundo de carregamento (por exemplo, `=#dd5500`)
`loading-text-color`	PRO — Altere a cor do texto de carregamento
`loading-logo-src`	PRO — Altere a imagem do logótipo de carregamento
`primary-color`	PRO — Altere a cor primária de carregamento
`secondary-color`	PRO — Altere a cor secundária de carregamento
`hide-loading-overlay`	PRO — Não mostrar a sobreposição de carregamento, adicionado no Needle Engine > 3.17.1
Interno
`hash`	Usado internamente, é anexado aos ficheiros que estão a ser carregados para forçar uma atualização (por exemplo, quando o navegador cacheou um ficheiro glb). Não deve ser editado manualmente.

Exemplos

<!-- Definir o caminho para um glb personalizado a ser carregado -->
<needle-engine src="path/to/your.glb"></needle-engine>

<!-- Substituir a localização do descodificador draco -->
<needle-engine src="path/to/your.glb" dracoDecoderPath="path/to/draco/folder"></needle-engine>

Definir imagens de ambiente, reproduzir animação e controlos de câmara automáticos. Veja ao vivo no stackblitz

<needle-engine
      camera-controls
      auto-rotate
      autoplay
      skybox-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
      environment-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
      src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF-Embedded/DamagedHelmet.gltf"
      >
      </needle-engine>

Receber um evento quando o contexto needle-engine terminar de carregar:

<needle-engine loadfinished="onLoadFinished"> </needle-engine>
<script>
    function onLoadFinished() {
        console.log("Needle Engine has finished loading");
    }
</script>

Estilo de Carregamento Personalizado (PRO)

Pode facilmente modificar a aparência do Needle Engine definindo os atributos apropriados no componente web <needle-engine>. Consulte a tabela acima para detalhes.

Veja o código no github

Página traduzida automaticamente por IA