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

A tabela a seguir contém os decorators de Typescript disponíveis que o Needle Engine oferece.

Pode pensar neles como Atributos em esteróides (se estiver familiarizado com C#) - podem ser adicionados a classes, campos ou métodos em Typescript para fornecer funcionalidade adicional.

Decoradores de Campos e Propriedades
@serializable()Adicionar a campos expostos / serializados. É usado ao carregar ficheiros glTF que foram exportados com componentes do Unity ou Blender.
@syncField()Adicionar a um campo para sincronizar o valor na rede quando muda. Pode passar um método a ser chamado quando o campo muda.
@validate()Adicionar para receber callbacks no método de evento do componente onValidate sempre que o valor muda. Isto comporta-se de forma semelhante ao onValidate do Unity.
Decoradores de Métodos
@prefix(<type>) (experimental)Pode ser usado para injetar código personalizado noutros componentes. Opcionalmente, retornar false para impedir que o método original seja executado. Veja o exemplo abaixo.
Decoradores de Classes
@registerTypeSem argumento. Pode ser adicionado a uma classe de componente personalizada para ser registada nos tipos do Needle Engine e para ativar o suporte a hot reloading.

Exemplos

Serializable

import { Behaviour, serializable, EventList } from "@needle-tools/engine";
import { Object3D } from "three";

export class SomeComponentType extends Behaviour {}

export class ButtonObject extends Behaviour {
    // you can omit the type if it's a primitive 
    // e.g. Number, String or Bool
    @serializable()
    myNumber: number = 42;

    // otherwise add the concrete type that you want to serialize to
    @serializable(EventList)
    onClick?: EventList;

    @serializable(SomeComponentType)
    myComponent?: SomeComponentType;

    // Note that for arrays you still add the concrete type (not the array)
    @serializable(Object3D)
    myObjects?: Object3D[];
}

SyncField

O decorator @syncField pode ser usado para sincronizar automaticamente propriedades dos seus componentes na rede para todos os utilizadores (visitantes do seu site) conectados à mesma sala de networking. Opcionalmente, pode receber uma função de callback que será invocada sempre que o valor mudar.

  • Para notificar o sistema que um valor de referência (como um objeto ou array) mudou, precisa de reatribuir o campo. Por exemplo, assim: myField = myField
  • A função de callback não pode ser uma arrow function (por exemplo, MyScript.prototype.onNumberChanged funciona para onNumberChanged() { ... }, mas não funciona para myNumberChanged = () => { ... })
import { Behaviour, serializable, syncField } from "@needle-tools/engine";

export class MyScript extends Behaviour {

    @syncField(MyScript.prototype.onNumberChanged)
    @serializable()
    myNumber: number = 42;

    private onNumberChanged(newValue: number, oldValue: number){
        console.log("Número mudou de ", oldValue, "para", newValue)
    }
}

Validate

import { Behaviour, serializable, validate } from "@needle-tools/engine";

export class MyScript extends Behaviour {

    @validate()
    @serializable()
    myNumber?: number;

    start() { setInterval(() => this.myNumber = Math.random(), 1000) }

    onValidate(fieldName: string) {
        console.log("Validate", fieldName, this.myNumber);
    }
}

Prefix

Exemplo ao vivo

import { Camera, prefix } from "@needle-tools/engine";
class YourClass {
    @prefix(Camera) // < este é o tipo que tem o método que quer mudar
    awake() { // < este é o nome do método que quer mudar

        // isto é agora chamado antes do método Camera.awake executar
        // NOTA: `this` refere-se agora à instância da Camera e NÃO mais a `YourClass`. Isto permite-lhe aceder também ao estado interno do componente
        console.log("Olá câmera:", this)
        // opcionalmente, retorne false se quiser impedir o comportamento padrão
    }
}

Página traduzida automaticamente usando IA

Suggest changes
Last Updated:: 22/04/2025, 17:38
Prev
Exemplos