Needle Engine 文档
Downloads
  • What is Needle Engine?
  • 用户评价
  • Get an overview

    • Samples and Showcase
    • 我们的愿景 🔮
    • 功能概览
    • 技术概述
  • Resources

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

    • Unity 版 Needle Engine
    • Needle Engine for Blender
    • Needle Engine 作为 Web Component
    • 在您的网站上使用 Needle Engine
    • Needle Cloud
  • Topics

    • Web 项目结构
    • Everywhere Actions
    • Exporting Assets to glTF
    • 框架、打包器、HTML
    • Testing on local devices
    • 部署与优化
  • Advanced

    • 网络
    • VR & AR (WebXR)
    • 使用 Needle Engine 直接从 HTML
    • 编辑器同步
  • Troubleshooting

    • 如何调试
    • 常见问题 (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • 在 Needle Engine 中编写脚本
    • Scripting Introduction for Unity Developers
    • Needle 核心组件
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable and other decorators
    • 自动生成组件
    • Scripting Examples
    • Community Contributions
    • 附加模块
  • Settings and APIs

    • <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?
  • 用户评价
  • Get an overview

    • Samples and Showcase
    • 我们的愿景 🔮
    • 功能概览
    • 技术概述
  • Resources

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

    • Unity 版 Needle Engine
    • Needle Engine for Blender
    • Needle Engine 作为 Web Component
    • 在您的网站上使用 Needle Engine
    • Needle Cloud
  • Topics

    • Web 项目结构
    • Everywhere Actions
    • Exporting Assets to glTF
    • 框架、打包器、HTML
    • Testing on local devices
    • 部署与优化
  • Advanced

    • 网络
    • VR & AR (WebXR)
    • 使用 Needle Engine 直接从 HTML
    • 编辑器同步
  • Troubleshooting

    • 如何调试
    • 常见问题 (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • 在 Needle Engine 中编写脚本
    • Scripting Introduction for Unity Developers
    • Needle 核心组件
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable and other decorators
    • 自动生成组件
    • Scripting Examples
    • Community Contributions
    • 附加模块
  • Settings and APIs

    • <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

    • Web 项目结构
    • Everywhere Actions
    • Exporting Assets to glTF
    • 框架、打包器、HTML
    • Testing on local devices
    • 部署与优化
    • 如何调试
    • 常见问题 (FAQ) 💡
  • Scripting

    • 在 Needle Engine 中编写脚本
    • Scripting Introduction for Unity Developers
    • Creating and using Components
    • 自动生成组件
    • Scripting Examples
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • 网络
    • 编辑器同步
  • Reference

    • 功能概览
    • 技术概述
    • Needle 核心组件
    • needle.config.json
    • <needle-engine> 配置
    • @serializable and other decorators

自动生成 Editor 组件

在使用 Unity 或 Blender 时,你会注意到当你用 Typescript 或 Javascript 创建一个新的 Needle Engine 组件时,它会自动为你生成一个 Unity C# stub 组件或者一个 Blender 面板。

这要归功于 Needle component compiler 的魔力,它在 editor 环境中在后台运行,并监视你的脚本文件的变化。当它检测到你创建了一个新的 Needle Engine 组件时,它就会生成正确的 Unity 组件或 Blender 面板,包括你可以从 Editor 中设置或链接的公共变量或属性。

控制组件生成

你可以在你的 typescript 代码中使用以下注释来控制 C# 代码生成行为:

AttributeResult
// @generate-component强制生成下一个类
// @dont-generate-component禁用生成下一个类,当你项目中已经存在一个 C# 脚本时这很有用
// @serializeField用 [SerializeField] 装饰生成的字段
// @type UnityEngine.Camera指定生成的 C# 字段类型
// @nonSerialized跳过生成下一个字段或方法

示例

强制 component compiler 生成一个名为 myAudioClip 的 C# AudioClip 字段

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

export class MyComponent extends Behaviour {
	//@type UnityEngine.AudioClip
	@serializable()
	myAudioClip?: string;
}

强制 component compiler 从特定的子类派生

import { Behaviour } from "@needle-tools/engine";
export class MyCustomBaseClass extends Behaviour { /* ... */ }
// ---cut-before---
//@type MyNamespace.MyCustomBaseClass
export class MyComponent extends MyCustomBaseClass {
}

Unity 中的 Component Compiler

如果你想在项目的 src/scripts 文件夹中添加脚本,你需要在带有 ExportInfo 组件的 GameObject 上添加一个 Component Generator。 现在,当你在 your/threejs/project/src/scripts 中添加新组件时,它会自动在 Assets/Needle/Components.codegen 中生成 Unity 脚本。 如果你想将脚本添加到任何 NpmDef 文件中,你可以直接创建它们 - 每个 NpmDef 都会自动监视脚本变化并处理组件生成,所以你不需要在场景中添加任何额外的组件。

对于 C# 字段的正确生成,目前重要的是你要明确声明 Typescript 类型。例如 myField : number = 5

你可以使用下面的选项卡在 Typescript 输入和生成的 C# stub 组件之间切换 :::: code-group ::: code-group-item Typescript

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

export class MyCustomComponent extends Behaviour {
    @serializable()
    myFloatValue: number = 42;

    @serializable(Object3D)
    myOtherObject?: Object3D;

    @serializable(AssetReference)
    prefabs: AssetReference[] = [];

    start() {
        this.sayHello();
    }

    private sayHello() {
        console.log("Hello World", this);
    }
}

::: ::: code-group-item Generated C#

// NEEDLE_CODEGEN_START
// auto generated code - do not edit directly

#pragma warning disable

namespace Needle.Typescript.GeneratedComponents
{
	public partial class MyCustomComponent : UnityEngine.MonoBehaviour
	{
		public float @myFloatValue = 42f;
		public UnityEngine.Transform @myOtherObject;
		public UnityEngine.Transform[] @prefabs = new UnityEngine.Transform[]{ };
		public void start(){}
		public void update(){}
	}
}

// NEEDLE_CODEGEN_END

::: ::: code-group-item Extending Generated C#

using UnityEditor;

// you can add code above or below the NEEDLE_CODEGEN_ blocks

// NEEDLE_CODEGEN_START
// auto generated code - do not edit directly

#pragma warning disable

namespace Needle.Typescript.GeneratedComponents
{
	public partial class MyCustomComponent : UnityEngine.MonoBehaviour
	{
		public float @myFloatValue = 42f;
		public UnityEngine.Transform @myOtherObject;
		public UnityEngine.Transform[] @prefabs = new UnityEngine.Transform[]{ };
		public void start(){}
		public void update(){}
	}
}

// NEEDLE_CODEGEN_END

namespace Needle.Typescript.GeneratedComponents
{
    // This is how you extend the generated component (namespace and class name must match!)
	public partial class MyCustomComponent : UnityEngine.MonoBehaviour
	{
		
		public void MyAdditionalMethod()
		{
		}

		private void OnValidate()
		{
			myFloatValue = 42;
		}
	}

    // of course you can also add custom editors
	[CustomEditor(typeof(MyCustomComponent))]
	public class MyCustomComponentEditor : Editor
	{
		public override void OnInspectorGUI()
		{
			EditorGUILayout.HelpBox("This is my sample component", MessageType.None);
			base.OnInspectorGUI();
		}
	}
}

::: ::::

扩展生成的组件

组件的 C# 类是使用 partial 标志生成的,这样可以方便地扩展其功能。这对于绘制 gizmos、添加上下文菜单或添加不属于内置组件的其他字段或方法很有帮助。

成员命名

导出的成员将以小写字母开头。例如,如果你的 C# 成员命名为 MyString,它将被赋值给 myString。

Page automatically translated using AI 页面由 AI 自动翻译

Suggest changes
最近更新:: 2025/4/22 08:44
Prev
Creating and using Components
Next
Scripting Examples