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
    • Blender 用 Needle Engine
    • Web ComponentとしてのNeedle Engine
    • ウェブサイトでのNeedle Engine
    • Needle Cloud
  • Topics

    • Webプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
  • Advanced

    • ネットワーキング
    • VR & AR (WebXR)
    • HTMLからNeedle Engineを直接使用する
    • Editor Sync
  • 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 およびその他のデコレーター
    • 自動コンポーネント生成
    • 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
    • Blender 用 Needle Engine
    • Web ComponentとしてのNeedle Engine
    • ウェブサイトでのNeedle Engine
    • Needle Cloud
  • Topics

    • Webプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
  • Advanced

    • ネットワーキング
    • VR & AR (WebXR)
    • HTMLからNeedle Engineを直接使用する
    • Editor Sync
  • 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 およびその他のデコレーター
    • 自動コンポーネント生成
    • 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
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
    • デバッグの方法
    • よくある質問(FAQ)💡
  • Scripting

    • Needle Engineでのスクリプティング
    • Scripting Introduction for Unity Developers
    • Creating and using Components
    • 自動コンポーネント生成
    • Scripting Examples
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • ネットワーキング
    • Editor Sync
  • Reference

    • 機能概要
    • 技術概要
    • Needleコアコンポーネント
    • needle.config.json
    • <needle-engine> 設定
    • @serializable およびその他のデコレーター

Everywhere Actionsとは?

NeedleのEverywhere Actionsは、厳選されたコンポーネントセットであり、コードを一行も書かずにUnityでインタラクティブな体験を作成できます。 これらは、Web、モバイル、XR、iOS上の拡張現実を含む体験のための構成要素として機能するように設計されています。

低レベルのトリガーとアクションから、より高レベルの複雑なインタラクティブな振る舞いを構築できます。

対応プラットフォーム

  • デスクトップ
  • モバイル (Android / iOS)
  • VRグラス
  • ARデバイス
  • iOS AR – QuickLook (はい、本当に!)

Everywhere Actionsの使い方は?

iOSをサポートするには、シーンにUSDZExporterコンポーネントを追加します。WebXRコンポーネントと同じオブジェクトに追加するのが良い習慣ですが、必須ではありません。

シーン内の任意のオブジェクトにアクションを追加するには、 そのオブジェクトを選択し、Add Component > Needle > Everywhere Actions > [Action]をクリックします。

Everywhere Actionsリスト

アクション説明使用例
Play Animation on ClickAnimatorから選択したアニメーションステートを再生します。再生後、必要に応じて別のアニメーションに遷移できます。製品プレゼンテーション、インタラクティブチュートリアル、キャラクターの動き
Change Material on Clickマテリアルを別のものに切り替えます。そのマテリアルを持つすべてのオブジェクトが一緒に切り替わります。製品コンフィギュレーター、キャラクター
Look Atオブジェクトをカメラの方に向けます。UI要素、スプライト、インフォグラフィック、ビルボードエフェクト、クリック可能なホットスポット
Play Audio on Click選択したオーディオクリップを再生します。効果音、ナレーション、美術館の展示
Hide on Start後で表示するために、シーン開始時にオブジェクトを非表示にします。
Set Active on Clickオブジェクトを表示または非表示にします。
Change Transform on Clickオブジェクトを移動、回転、またはスケールします。絶対的または相対的な移動が可能です。キャラクター、製品、UIアニメーション(より複雑な動きにはアニメーションを使用)
Audio Source開始時にオーディオを再生し、ループを続けます。空間的または非空間的BGM、環境音
WebXR Image Tracking画像ターゲットをトラッキングし、オブジェクトを表示または非表示にします。AR体験、製品プレゼンテーション

サンプル

Musical Instrument

空間オーディオ、アニメーション、インタラクションをデモンストレーションします。

Simple Character Controllers

アニメーション、Look At、移動の組み合わせをデモンストレーションします。

Image Tracking

カスタム画像マーカーに3Dコンテンツをアタッチする方法をデモンストレーションします。以下のシーンをARで開始し、画面上の画像マーカーにスマートフォンのカメラを向けるか、印刷してください。

Image Marker

サンプル画像マーカーをダウンロード

Androidの場合: Chrome Flagsで「WebXR Incubations」をオンにしてください。これは、AndroidスマートフォンのChromeブラウザのアドレスバーに chrome://flags/#webxr-incubations を貼り付けることで見つけることができます。

Interactive Building Blocks Overview

独自のEverywhere Actionsを作成する

新しいEverywhere Actionsの作成には、ブラウザやWebXRで使用されるTypeScriptでアクションのコードを記述すること、そしてTriggerBuilderとActionBuilder APIを使用して、QuickLook経由でのiOS上の拡張現実のための対応するセットアップを作成することが含まれます。カスタムアクションを作成する際は、QuickLookでは利用できる機能セットが限られていることに留意してください。ブラウザとWebXRでは任意のコードを使用できますが、QuickLookの振る舞いは、利用可能なトリガーとアクションから構築された近似である必要がある場合があります。

ヒント

多くの場合、特定の振る舞いを構築するには、既にある低レベルのアクションを既成概念にとらわれずに創造的に適用することが必要です。「Tap to Place」アクションはその一例です。QuickLookにはレイキャスティングやヒットテストの機能はありませんが、配置したい領域を複数の見えないオブジェクトで覆い、「Tap」トリガーを使用して、タップされた見えないオブジェクトの位置に配置したいオブジェクトを移動させることができます。

QuickLookのトリガーとアクションは、AppleのPreliminary Interactive USD Schemasに基づいています。

コード例

以下はHideOnStartの実装例で、ブラウザとQuickLookの両方の実装を含むEverywhere Actionの作成方法を示しています。

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;
    }
}

ヒント

多くの場合、適切な振る舞いを得るには、利用可能な低レベルアクションから高レベルアクションを構成することが必要になります。例えば、私たちの「Change Material on Click」アクションは、多数のfadeActionsで構成されており、内部的には異なるマテリアルセットを持つオブジェクトを複製しています。これらのアクションを注意深く構成することで、複雑な振る舞いを実現できます。

独自のAction構築のための低レベルメソッド

トリガー
TriggerBuilder.sceneStartTrigger
TriggerBuilder.tapTrigger
アクション
ActionBuilder.fadeAction
ActionBuilder.startAnimationAction
ActionBuilder.waitAction
ActionBuilder.lookAtCameraAction
ActionBuilder.emphasize
ActionBuilder.transformAction
ActionBuilder.playAudioAction
グループアクション
ActionBuilder.sequence
ActionBuilder.parallel
GroupAction.addAction
GroupAction.makeParallel
GroupAction.makeSequence
GroupAction.makeLooping
GroupAction.makeRepeat

組み込みのEverywhere Actionsの実装を見るには、src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.tsを参照してください。

さらに読む

以下のページでは、すぐにテストして探索できるより多くの例とサンプルを提供しています。

  • iOS AR & Quicklookに焦点を当てた多くのインタラクティブなAR例がある、AR Showcase Websiteをご覧ください。
  • Needle Engine Everywhere Action Samples

このページはAIによって自動的に翻訳されました。

Suggest changes
最終更新:: 2025/04/22 17:38
Prev
Webプロジェクトの構造
Next
glTFへのアセットのエクスポート