Documentação do Needle Engine
Downloads
  • What is Needle Engine?
  • Depoimentos
  • Get an overview

    • Samples and Showcase
    • A Nossa Visão 🔮
    • Visão Geral dos Recursos
    • Visão Geral Técnica
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Needle Engine para Unity
    • Needle Engine para Blender
    • Needle Engine como Web Component
    • Needle Engine no seu Website
    • Needle Cloud
  • Topics

    • Estrutura do Projeto Web
    • Everywhere Actions
    • Exportar Recursos para glTF
    • Frameworks, Bundlers, HTML
    • Testar em dispositivos locais
    • Implementação e Otimização
  • Advanced

    • Redes
    • VR & AR (WebXR)
    • /lang/pt/vanilla-js.html
    • Sincronização do Editor
  • Troubleshooting

    • Como Depurar
    • Perguntas e Respostas (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting no Needle Engine
    • Introdução à Scripting para Developers Unity
    • Componentes Principais do Needle
    • Everywhere Actions
  • Components and Lifecycle

    • Criar e usar Componentes
    • @serializable e outros decorators
    • Automatic Component Generation
    • Exemplos de Scripting
    • Community Contributions
    • Módulos Adicionais
  • Settings and APIs

    • Exemplos
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
Downloads
  • What is Needle Engine?
  • Depoimentos
  • Get an overview

    • Samples and Showcase
    • A Nossa Visão 🔮
    • Visão Geral dos Recursos
    • Visão Geral Técnica
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Needle Engine para Unity
    • Needle Engine para Blender
    • Needle Engine como Web Component
    • Needle Engine no seu Website
    • Needle Cloud
  • Topics

    • Estrutura do Projeto Web
    • Everywhere Actions
    • Exportar Recursos para glTF
    • Frameworks, Bundlers, HTML
    • Testar em dispositivos locais
    • Implementação e Otimização
  • Advanced

    • Redes
    • VR & AR (WebXR)
    • /lang/pt/vanilla-js.html
    • Sincronização do Editor
  • Troubleshooting

    • Como Depurar
    • Perguntas e Respostas (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting no Needle Engine
    • Introdução à Scripting para Developers Unity
    • Componentes Principais do Needle
    • Everywhere Actions
  • Components and Lifecycle

    • Criar e usar Componentes
    • @serializable e outros decorators
    • Automatic Component Generation
    • Exemplos de Scripting
    • Community Contributions
    • Módulos Adicionais
  • Settings and APIs

    • Exemplos
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
  • Getting Started

    • Downloads
    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
    • Custom integrations
    • Support and Community
  • Core Concepts

    • Estrutura do Projeto Web
    • Everywhere Actions
    • Exportar Recursos para glTF
    • Frameworks, Bundlers, HTML
    • Testar em dispositivos locais
    • Implementação e Otimização
    • Como Depurar
    • Perguntas e Respostas (FAQ) 💡
  • Scripting

    • Scripting no Needle Engine
    • Introdução à Scripting para Developers Unity
    • Criar e usar Componentes
    • Automatic Component Generation
    • Exemplos de Scripting
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Redes
    • Sincronização do Editor
  • Reference

    • Visão Geral dos Recursos
    • Visão Geral Técnica
    • Componentes Principais do Needle
    • needle.config.json
    • Exemplos
    • @serializable e outros decorators

O que são Everywhere Actions?

As Everywhere Actions da Needle são um conjunto de componentes cuidadosamente selecionados que permitem criar experiências interativas em Unity sem escrever uma única linha de código. São desenhadas para servir como blocos de construção para experiências na web, mobile e XR, incluindo Realidade Aumentada em iOS.

A partir de triggers e actions de baixo nível, podem ser construídos comportamentos interativos complexos de nível superior.

Plataformas Suportadas

  • Desktop
  • Mobile (Android / iOS)
  • Óculos VR
  • Dispositivos AR
  • iOS AR – QuickLook (sim, é verdade!)

Como usar Everywhere Actions?

Para suporte iOS, adicione o componente USDZExporter à sua cena. É uma boa prática adicioná-lo ao mesmo objeto que o componente WebXR (mas não é obrigatório).

Para adicionar uma action a qualquer objeto na sua cena selecione-o e depois clique em Add Component > Needle > Everywhere Actions > [Action].

Lista de Everywhere Actions

ActionDescriçãoCasos de Uso de Exemplo
Tocar Animação ao ClicarToca um estado de animação selecionado de um Animator. Após tocar, pode opcionalmente fazer a transição para outra animação.Apresentações de produtos, tutoriais interativos, movimento de personagens
Mudar Material ao ClicarTroca um material por outros. Todos os objetos com esse material serão trocados em conjunto.Configuradores de produtos, personagens
Olhar ParaFaz um objeto olhar para a câmara.Elementos de UI, sprites, infográficos, efeitos de billboard, hotspots clicáveis
Tocar Áudio ao ClicarToca um clipe de áudio selecionado.Efeitos sonoros, Narração, Exposições de museus
Ocultar ao IniciarOculta um objeto no início da cena para revelação posterior.
Definir Ativo ao ClicarMostra ou oculta objetos.
Mudar Transform ao ClicarMove, roda ou escala um objeto. Permite movimento absoluto ou relativo.Personagens, produtos, animação de UI (use animação para movimentos mais complexos)
Fonte de ÁudioToca áudio ao iniciar e continua em loop. Espacial ou não espacial.Música de fundo, sons ambiente
WebXR Image TrackingRastreia um alvo de imagem e mostra ou oculta objetos.Experiências AR, apresentações de produtos

Exemplos

Instrumento Musical

Demonstra áudio espacial, animação e interações.

Controladores de Personagem Simples

Demonstra a combinação de animações, "olhar para" e movimento.

Rastreamento de Imagem

Demonstra como anexar conteúdo 3D a um marcador de imagem personalizado. Inicie a cena abaixo em AR e aponte a câmara do seu telemóvel para o marcador de imagem num ecrã, ou imprima-o.

Marcador de Imagem

Descarregar Marcador de Imagem de Exemplo

Em Android: por favor, ative "WebXR Incubations" nos Chrome Flags. Pode encontrá-los colando chrome://flags/#webxr-incubations na barra de endereço do navegador Chrome do seu telemóvel Android.

Visão Geral de Blocos de Construção Interativos

Criar as suas próprias Everywhere Actions

Criar novas Everywhere Actions envolve escrever código para a sua action em TypeScript, que será usado no navegador e para WebXR, e usar a nossa API TriggerBuilder e ActionBuilder para criar uma configuração correspondente para Realidade Aumentada em iOS via QuickLook. Ao criar actions personalizadas, tenha em mente que o QuickLook tem um conjunto limitado de funcionalidades disponíveis. Ainda pode usar qualquer código que queira para o navegador e WebXR, mas o comportamento para QuickLook pode precisar ser uma aproximação construída a partir dos triggers e actions disponíveis.

Tips

Muitas vezes, construir comportamentos específicos requer pensar de forma criativa e aplicar as actions de baixo nível disponíveis. Um exemplo seria uma action "Tocar para Colocar" – não há raycasting ou hit testing disponível no QuickLook, mas pode cobrir a área de colocação esperada com vários objetos invisíveis e usar um trigger "Tap" para mover o objeto a ser colocado para a posição do objeto invisível tocado.

Triggers e Actions para QuickLook são baseados nos Apple's Preliminary Interactive USD Schemas

Exemplo de Código

Aqui está a implementação para HideOnStart como exemplo de como criar uma Everywhere Action com implementações para o navegador e para QuickLook:

import { Behaviour, UsdzBehaviour, BehaviorModel, TriggerBuilder, ActionBuilder, BehaviorExtension, USDObject, USDZExporterContext } from "@needle-tools/engine";

export class HideOnStart extends Behaviour implements UsdzBehaviour {

    start() {
        this.gameObject.visible = false;
    }

    createBehaviours(ext: BehaviorExtension, model: USDObject, _context: USDZExporterContext) {
        if (model.uuid === this.gameObject.uuid)
            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
                TriggerBuilder.sceneStartTrigger(),
                ActionBuilder.fadeAction(model, 0, false)
            ));
    }

    beforeCreateDocument() {
        this.gameObject.visible = true;
    }

    afterCreateDocument() {
        this.gameObject.visible = false;
    }
}

Tips

Frequentemente, obter o comportamento certo envolverá compor actions de nível superior a partir das actions de nível inferior disponíveis. Por exemplo, a nossa action "Change Material on Click" é composta por várias fadeActions e internamente duplica objetos com diferentes conjuntos de materiais cada. Ao construir cuidadosamente estas actions, podem ser alcançados comportamentos complexos.

Métodos de baixo nível para criar as suas próprias actions

Triggers
TriggerBuilder.sceneStartTrigger
TriggerBuilder.tapTrigger
Actions
ActionBuilder.fadeAction
ActionBuilder.startAnimationAction
ActionBuilder.waitAction
ActionBuilder.lookAtCameraAction
ActionBuilder.emphasize
ActionBuilder.transformAction
ActionBuilder.playAudioAction
Group Actions
ActionBuilder.sequence
ActionBuilder.parallel
GroupAction.addAction
GroupAction.makeParallel
GroupAction.makeSequence
GroupAction.makeLooping
GroupAction.makeRepeat

Para ver a implementação das nossas Everywhere Actions integradas, por favor, consulte src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts.

Leitura adicional

As seguintes páginas fornecem mais exemplos que pode testar e explorar agora mesmo:

  • Visite o nosso Website AR Showcase que tem muitos exemplos de AR interativos com foco em iOS AR & Quicklook
  • Needle Engine Everywhere Action Samples

Página traduzida automaticamente usando IA

Suggest changes
Last Updated:: 22/04/2025, 17:38
Prev
Estrutura do Projeto Web
Next
Exportar Recursos para glTF