Documentación de Needle Engine
Downloads
  • What is Needle Engine?
  • Testimonios
  • Get an overview

    • Samples and Showcase
    • Nuestra Visión 🔮
    • Resumen de Características
    • Resumen técnico
  • 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 en tu sitio web
    • Needle Cloud
  • Topics

    • Estructura de Proyecto Web
    • Acciones Everywhere
    • Exportación de Assets a glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Despliegue y optimización
  • Advanced

    • Redes
    • VR & AR (WebXR)
    • Usando Needle Engine directamente desde HTML
    • Editor Sync
  • Troubleshooting

    • Cómo Depurar
    • Preguntas Frecuentes (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting en Needle Engine
    • Introducción al Scripting para Desarrolladores de Unity
    • Componentes principales de Needle
    • Acciones Everywhere
  • Components and Lifecycle

    • Crear y usar Componentes
    • @serializable y otros decoradores
    • Generación Automática de Componentes
    • Ejemplos de scripting
    • Community Contributions
    • Módulos Adicionales
  • Settings and APIs

    • Configuración de <needle-engine>
    • 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?
  • Testimonios
  • Get an overview

    • Samples and Showcase
    • Nuestra Visión 🔮
    • Resumen de Características
    • Resumen técnico
  • 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 en tu sitio web
    • Needle Cloud
  • Topics

    • Estructura de Proyecto Web
    • Acciones Everywhere
    • Exportación de Assets a glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Despliegue y optimización
  • Advanced

    • Redes
    • VR & AR (WebXR)
    • Usando Needle Engine directamente desde HTML
    • Editor Sync
  • Troubleshooting

    • Cómo Depurar
    • Preguntas Frecuentes (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting en Needle Engine
    • Introducción al Scripting para Desarrolladores de Unity
    • Componentes principales de Needle
    • Acciones Everywhere
  • Components and Lifecycle

    • Crear y usar Componentes
    • @serializable y otros decoradores
    • Generación Automática de Componentes
    • Ejemplos de scripting
    • Community Contributions
    • Módulos Adicionales
  • Settings and APIs

    • Configuración de <needle-engine>
    • 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

    • Estructura de Proyecto Web
    • Acciones Everywhere
    • Exportación de Assets a glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Despliegue y optimización
    • Cómo Depurar
    • Preguntas Frecuentes (FAQ) 💡
  • Scripting

    • Scripting en Needle Engine
    • Introducción al Scripting para Desarrolladores de Unity
    • Crear y usar Componentes
    • Generación Automática de Componentes
    • Ejemplos de scripting
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Redes
    • Editor Sync
  • Reference

    • Resumen de Características
    • Resumen técnico
    • Componentes principales de Needle
    • needle.config.json
    • Configuración de <needle-engine>
    • @serializable y otros decoradores

¿Qué son las Acciones Everywhere?

Las Acciones Everywhere de Needle son un conjunto de componentes cuidadosamente seleccionados que te permiten crear experiencias interactivas en Unity sin escribir una sola línea de código. Están diseñadas para servir como bloques de construcción para experiencias en la web, móvil y XR, incluida la Realidad Aumentada en iOS.

A partir de disparadores y acciones de bajo nivel, se pueden construir comportamientos interactivos complejos de nivel superior.

Plataformas Compatibles

  • Escritorio
  • Móvil (Android / iOS)
  • Gafas VR
  • Dispositivos AR
  • iOS AR – QuickLook (¡sí, de verdad!)

¿Cómo uso las Acciones Everywhere?

Para el soporte de iOS, añade el componente USDZExporter a tu escena. Es una buena práctica añadirlo al mismo objeto que el componente WebXR (pero no es obligatorio).

Para añadir una acción a cualquier objeto en tu escena selecciónalo y luego haz clic en Add Component > Needle > Everywhere Actions > [Action].

Lista de Acciones Everywhere

AcciónDescripciónCasos de Uso de Ejemplo
Play Animation on ClickReproduce un estado de animación seleccionado de un Animator. Después de reproducir, opcionalmente puede hacer una transición a otra animación.Presentaciones de productos, tutoriales interactivos, movimiento de personajes
Change Material on ClickCambia un material por otros. Todos los objetos con ese material se cambiarán juntos.Configuradores de productos, personajes
Look AtHace que un objeto mire a la cámara.Elementos de interfaz de usuario, sprites, infografías, efectos de billboard, puntos interactivos
Play Audio on ClickReproduce un clip de audio seleccionado.Efectos de sonido, Narración, Exposiciones de museo
Hide on StartOculta un objeto al inicio de la escena para revelarlo más tarde.
Set Active on ClickMuestra u oculta objetos.
Change Transform on ClickMueve, rota o escala un objeto. Permite movimiento absoluto o relativo.Personajes, productos, animación de UI (usa animación para movimientos más complejos)
Audio SourceReproduce audio al inicio y se mantiene en bucle. Espacial o no espacialMúsica de fondo, sonidos ambientales
WebXR Image TrackingRastrea un objetivo de imagen y muestra u oculta objetos.Experiencias AR, presentaciones de productos

Muestras

Instrumento Musical

Demuestra audio espacial, animación e interacciones.

Controladores de Personajes Simples

Demuestra la combinación de animaciones, look at y movimiento.

Seguimiento de Imagen

Demuestra cómo adjuntar contenido 3D a un marcador de imagen personalizado. Inicia la escena a continuación en AR y apunta la cámara de tu teléfono al marcador de imagen en una pantalla, o imprímelo.

Marcador de Imagen

Descargar Marcador de Imagen de Ejemplo

En Android: por favor, activa "WebXR Incubations" en las Chrome Flags. Puedes encontrarlas pegando chrome://flags/#webxr-incubations en la barra de direcciones del navegador Chrome de tu teléfono Android.

Visión General de Bloques de Construcción Interactivos

Crea tus propias Acciones Everywhere

La creación de nuevas Acciones Everywhere implica escribir código para tu acción en TypeScript, que se utilizará en el navegador y para WebXR, y usar nuestra API TriggerBuilder y ActionBuilder para crear una configuración correspondiente para la Realidad Aumentada en iOS a través de QuickLook. Al crear acciones personalizadas, ten en cuenta que QuickLook tiene un conjunto limitado de características disponibles. Todavía puedes usar cualquier código que desees para el navegador y WebXR, pero el comportamiento para QuickLook puede necesitar ser una aproximación construida a partir de los disparadores y actions disponibles.

Consejos

A menudo, construir comportamientos específicos requiere pensar de manera innovadora y aplicar creativamente las acciones de bajo nivel disponibles. Un ejemplo sería una acción de "Tap to Place" (Tocar para Colocar): no hay raycasting o hit testing disponible en QuickLook, pero podrías cubrir el área de colocación esperada con una serie de objetos invisibles y usar un trigger "Tap" para mover el objeto a colocar a la posición del objeto invisible tocado.

Los Triggers y Actions para QuickLook se basan en los Esquemas USD Interactivos Preliminares de Apple

Ejemplo de Código

Aquí tienes la implementación de HideOnStart como ejemplo de cómo crear una Everywhere Action con implementaciones tanto para el navegador como 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;
    }
}

Consejos

A menudo, para obtener el comportamiento correcto, será necesario componer acciones de nivel superior a partir de las acciones de nivel inferior disponibles. Por ejemplo, nuestra acción "Change Material on Click" (Cambiar Material al hacer Clic) se compone de varias fadeActions y duplica internamente objetos con diferentes conjuntos de materiales. Construyendo cuidadosamente estas acciones, se pueden lograr comportamientos complejos.

Métodos de bajo nivel para construir tus propias acciones

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 la implementación de nuestras Acciones Everywhere integradas, por favor, echa un vistazo a src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts.

Lecturas adicionales

Las siguientes páginas ofrecen más ejemplos y muestras que puedes probar y explorar ahora mismo:

  • Visita nuestro Sitio Web de Muestras AR que tiene muchos ejemplos AR interactivos con enfoque en iOS AR y Quicklook.
  • Muestras de Acciones Everywhere de Needle Engine

Página traducida automáticamente usando IA

Suggest changes
Actualizado el:: 11/6/25, 12:25
Prev
Estructura de Proyecto Web
Next
Exportación de Assets a glTF