Needle Engineプロジェクトの構造

Needle EngineはUnityやBlenderのような3Dソフトウェアと深く統合されており、同時に最新のウェブ開発の完全な柔軟性も備えています。このため、Needleで作成されたプロジェクトは通常、2つの部分から構成されます。エディタープロジェクトとウェブプロジェクトです。使用するエディターに応じて、エディタープロジェクトを「Unityプロジェクト」または「Blenderプロジェクト」と呼ぶことがよくあります。

エディタープロジェクトとウェブプロジェクト

エディタープロジェクトでは、3Dシーンの作成、オブジェクトへのコンポーネントの追加、マテリアルやライトの追加、環境設定、アニメーションなどを行います。3Dソフトウェアの強力なツールをすべて使用して、ウェブにエクスポートされるコンテンツを作成できます。UnityまたはBlenderを使用している場合は、Unity用Needle EngineパッケージまたはBlender用Needle Engineアドオンをインストールすることをお勧めします。

ウェブプロジェクトは、ウェブアプリが一体となる場所です。エクスポートされた3Dアセット、アプリの動作を制御するスクリプト、そして外観と操作性を定義するHTMLとCSSが含まれます。ウェブプロジェクトはNeedle Engineによって駆動され、3Dコンテンツの読み込みと表示、スクリプトコンポーネントとそのライフサイクルの管理、そしてWebXR、オーディオ、ネットワーキングなどのウェブプラットフォームの機能の活用を担当します。

ウェブプロジェクトの作成

デフォルトでは、ウェブプロジェクトはNeedleによって作成および管理されます。これは、パッケージのセットアップ、依存関係の追加、またはビルドについて心配する必要がなく、コンテンツの作成に集中できることを意味します。UnityおよびBlenderとの統合により、エディターから直接ウェブプロジェクトを簡単に作成できます。

% npm create needle

> create-needle

create-needle version 0.1.1-alpha

┌  Welcome to Needle Engine! 🌵
│
◇  Where should we create your project?
│  my-project
│
◇  What framework do you want to use?
│  HTML, CSS, JavaScript with Vite
│
└  Your project is ready!

Next steps:
  1: cd my-project
  2: npm install (or npm i)
  3: npm start (or npm run dev)
  4: Connect an integration (Unity, Blender, ...)

コードエディターでウェブプロジェクトを開く

コードエディターとしては、ウェブ開発全般、特にTypeScriptに対する優れたサポートがあるため、Visual Studio Codeをお勧めします。ウェブプロジェクトを生成すると、Visual Studio Codeで開くことができる.code-workspaceファイルが自動的に作成されます。このファイルには、含めるフォルダーやエディターの設定など、ワークスペースの構成が含まれています。

ウェブプロジェクトのファイルとフォルダーを理解する

デフォルトのウェブプロジェクトは、最新のウェブ開発プラクティスに従った標準的な構造に基づいています。優れたViteを開発環境、バンドラー、ビルドツールとして使用しています。以下のセクションでは、典型的なNeedle Engineウェブプロジェクトの構造について説明します。

File Tree: ウェブプロジェクトファイル

ウェブプロジェクトファイルDescription

index.html

ウェブプロジェクトの開始ページです。ここにHTML、スタイルシート、スクリプトのインポートを追加できます。カスタムNeedleコンポーネントはsrc/scripts/フォルダーに入れる必要があります。

また、3Dコンテンツを表示する<needle-engine>ウェブコンポーネントもここにあります。その属性を変更して、環境、読み込みスタイル、コンタクトシャドウなどを変更できます。利用可能な属性のリストについては、ウェブコンポーネント属性リファレンスを参照してください。

assets/

アセットフォルダーには、統合によってエクスポートされた3Dファイルやその他のファイルが含まれます。これには、.glbファイル、オーディオファイル、またはビデオファイルが含まれます。このフォルダーは統合によって管理されるため、追加のアセットを追加したい場合は、代わりにinclude/に入れてください。

assets/MyScene.glb

UnityまたはBlenderからエクスポートされた3Dシーンは、自動的にここに配置されます。ファイル名は、UnityまたはBlenderのシーン名によって異なります。プロジェクトのセットアップ方法によっては、このフォルダーにさらに多くのファイルがある場合があります。たとえば、複数のシーンがある場合、またはオーディオファイルやビデオファイルを使用する場合もここにあります。

src/

ウェブプロジェクトのソースコードです。ここにスクリプト、スタイル、およびウェブアプリを構成するその他のコードを記述します。Needleはここに一部の生成ファイルを配置し、独自のコードも追加できます。

src/main.ts

このスクリプトはindex.htmlからインクルードされ、起動時に実行されます。@needle-tools/engineをインポートし、メインエンジンコードをロードします。ここにNeedle Engine用のプラグインを追加できます。

src/scripts/

このフォルダーにカスタムスクリプトを追加します。コンポーネントコンパイラが、それらからUnityおよびBlender用のスタブコンポーネントを自動的に生成します。

src/scripts/MyComponent.ts

UnityのC#コンポーネントまたはBlenderのパネルにコンパイルされるカスタムスクリプトの例です。ここに独自のスクリプトを追加でき、それらはコンポーネントコンパイラによって自動的に認識されます。

src/styles/

スタイルフォルダーには、ウェブプロジェクトのスタイルシートが含まれています。ここにスタイルシートを追加し、index.htmlでインポートできます。

src/styles/main.css

ウェブプロジェクトのデフォルトスタイルシートです。ここに独自のスタイルを追加するか、src/styles/フォルダーに追加のスタイルシートを作成できます。index.htmlでインポートできます。

src/generated/

このフォルダーのファイルは、Needle統合によって生成および管理されます。手動で編集しないでください。エクスポート時に上書きされます。

src/generated/gen.js

このファイルは生成されます。<needle-engine>ウェブコンポーネントに、最初にどのファイルをロードするかを指示します。

src/generated/meta.json

このファイルは生成されます。メインシーンの名前、使用されているNeedle Engineのバージョン、その他の情報など、プロジェクトに関するメタデータが含まれています。

src/generated/register_types.ts

このファイルは生成されます。プロジェクトで使用されるカスタムコンポーネントを、コードと依存関係パッケージの両方から自動的にインポートします。

include/

ランタイム時にロードしたいカスタムアセットがある場合は、includeフォルダーに追加してください。ビルド時にこのフォルダーは出力フォルダーにコピーされます。

dist/

ビルドされたウェブプロジェクトが配置される出力フォルダーです。ここに最終的なウェブアプリが生成されます。サーバーに公開する準備ができたバンドルされミニファイされたファイルが含まれます。

needle.config.json

Needle設定ファイルです。Needle統合およびビルドツールはこのファイルを使用します。アセットのエクスポート先とビルドフォルダーの場所に関する情報が含まれています。

vite.config.js

vite設定です。配布版のビルドと開発サーバーのホスティングに関する設定がここで行われます。通常、このファイルを変更する必要はありませんが、必要に応じて追加のプラグインを追加したり、ビルドプロセスを変更したりできます。

package.json

名前、バージョン、依存関係、開発スクリプトを含むプロジェクト設定です。ここにnpmパッケージを追加の依存関係として追加できます。

tsconfig.json

これはTypescriptコンパイラ設定です。TypeScriptに、最新のスクリプト機能を使用していることを伝えます。

.gitignore

このファイルは、gitバージョン管理システムによって無視されるべきファイルとフォルダーを指定します。デフォルトのウェブプロジェクトでは、/dist、node_modules、および.viteフォルダーが除外されます。git以外のバージョン管理システムを使用している場合は、これらのフォルダーを除外する必要があります。

当社のエクスポーターは、他のプロジェクト構造でも使用できます。Viteはその速度と柔軟性から、バンドラーとして選択されました。自由に独自のプロジェクト構造を設定したり、Webpackのような異なるバンドラーを使用したりしてください。Needle Engineは柔軟に設計されており、通常はニーズに合わせて適応させることができます。バンドルと他のフレームワークについて詳しく学ぶ。

ウェブプロジェクトの拡張

ウェブプロジェクトは業界標準の構造を使用しています。

• Node.jsとnpmによるパッケージ管理およびビルドスクリプト
• TypeScriptによるスクリプト作成
• Viteによる開発サーバーの実行とプロダクション版のビルド
• ウェブアプリの構造とスタイルを定義するHTMLとCSS

独自のスクリプト、スタイル、アセットを追加することで、ウェブプロジェクトを拡張できます。必要に応じて追加のnpmパッケージをプロジェクトに追加したり、vite.config.jsファイルを変更してビルドプロセスをカスタマイズしたりできます。アプリにPWAサポートを追加するなどの一部のカスタマイズについては、Needleがすでにヘルパーを提供しており、それらをより簡単にしています。一般的に、ウェブプロジェクトは自由に修正でき、これは特定のプロジェクト構造の使用を要求する他のエンジンとは異なるNeedle Engineの特徴です。

ウェブプロジェクトにHTMLインターフェースを追加する

Needle Engineプロジェクトは3Dコンテンツに限定されません。HTMLとCSSを使用して2Dユーザーインターフェースを作成し、3Dシーンと連携させることができます。これにより、3Dと2Dの要素を組み合わせたリッチでインタラクティブなウェブアプリケーションを作成できます。

HTMLとCSSがより複雑になる場合、Svelte、React、Vueなどのフロントエンドフレームワークの使用を検討することをお勧めします。Needle Engineはこれらのフレームワークとうまく連携するように設計されており、それらを統合する方法に関する例とドキュメントを提供しています。詳細については、フロントエンドフレームワークのサンプルを参照してください。

Needle Engineで2D UIを始めるためのリソースを以下に示します。

• Needle EngineでHTMLとCSSを使用する
• SvelteKitサンプル
• Reactサンプル
• Vueサンプル

Needle Engineは、ビルドプロセスをカスタマイズし、追加のアセットを追加し、ウェブプロジェクトのビルド方法を設定できる構成ファイル（needle.config.json）を提供します。

統合なしでエディターを使用する

UnityおよびBlenderの統合は、Needle Engineを使用するために必須ではありません。つまり、ウェブプロジェクトはエディタープロジェクトに依存せず、エクスポートされた3Dアセットのみを使用します。異なるエディターを使用したり、3Dアセットを手動で作成したりしたい場合は、そうすることができます。3DアセットをglTFまたはGLB形式でエクスポートし、ウェブプロジェクトに追加してください。

既存のウェブプロジェクトと統合を使用する

Needle Engineと統合したい既存のウェブプロジェクトがある場合は、次の手順に従って統合できます。

1. UnityまたはBlender用のNeedle Engineパッケージをインストールします。
2. シーンを設定します
3. ウェブプロジェクトの場所を統合に伝えます。
4. エクスポートされたファイルをウェブプロジェクトのどこに配置するかを設定します。これはneedle.config.jsonファイルで行います。
5. Needle EngineのAPIを使用して、ウェブプロジェクトにエクスポートされたアセットをロードします。

引き続き読む

• Unity開発者のためのTypescriptガイド
• Typescriptの基礎
• カスタムスクリプトの記述
• エブリウェア・アクション

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