Edit

Needle Engineプロジェクトの構造

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

flowchart TD
    A[**Editor Project**<br>Unity or Blender,<br>with Needle Integration] -->|exports 3D content to| B[**Web Project**<br>with Needle Engine,<br>HTML, CSS, JS]
    B -->|runs in| C[**Web Browser**]

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

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

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

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

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

:::: tabs @tab Unity

シーン内でNeedle Engineコンポーネントを見つけるか追加し、Generate Projectをクリックします。これにより、指定したフォルダーに新しいウェブプロジェクトが作成されます。

Unityからウェブプロジェクトを作成

@tab Blender

SceneパネルとNeedle Engineセクションを見つけ、Generate Web Projectをクリックします。これにより、指定したフォルダーに新しいウェブプロジェクトが作成されます。

Blenderからウェブプロジェクトを作成

@tab コマンドラインから

ターミナルを開き、npx create needleコマンドを実行して、新しいNeedle Engineウェブプロジェクトを作成します。このコマンドは、プロジェクト名、フレームワーク、その他の設定を求めます。プロジェクトを作成するフォルダーも指定できます。

:::tip まずNode.jsをインストールしてください システムにNode.jsがインストールされていることを確認してください。 ターミナルでnode -vを実行することで、インストールされているかどうかを確認できます。 インストールされていない場合は、Node.jsウェブサイトからダウンロードしてインストールしてください。 :::

% 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, ...)

::::

::: tip 独自のプロジェクトを持参する Needle Engineは非常に柔軟です。既存のウェブプロジェクトを変更したり、独自のプロジェクトを使用したりできます。これにより、既存のプロジェクトに統合したり、異なるビルドシステムを使用したり、React、Vue、Angularなどの異なるフレームワークを使用したりできます。 :::

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

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

::: tabs @tab Unity

Needle EngineコンポーネントのOpen Code Editorをクリックします。これにより、すべてのフォルダーとファイルが含まれた状態で、ウェブプロジェクトがVisual Studio Codeで開きます。

Unityからコードエディターを開く

@tab Blender

Scene > Needle EngineパネルのOpen Code Editorをクリックします。これにより、すべてのフォルダーとファイルが含まれた状態で、ウェブプロジェクトがVisual Studio Codeで開きます。

Blenderからコードエディターを開く

@tab ExplorerまたはFinderで見つける

.code-workspaceファイルをダブルクリックします。これにより、すべてのフォルダーとファイルが含まれた状態で、ウェブプロジェクトがVisual Studio Codeで開きます。もちろん、他のコードエディターでウェブプロジェクトフォルダーを開くこともできます。

Finderからコードエディターを開く

:::

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

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

:::tip 最も頻繁に操作する場所はsrc/scripts/とbuild/です。 独自のコンポーネントをsrc/scripts/に追加します。これらはTypeScriptで記述します。

ウェブプロジェクトをビルドする際、エディターで「Build」をクリックするかnpm run buildを実行すると、最終的なファイルはdist/フォルダーに配置されます。これは、ウェブアプリをホストするためにウェブサーバーにアップロードできるフォルダーです。 :::

:::: file-tree name="ウェブプロジェクトファイル"

::: file index.html ウェブプロジェクトの開始ページです。ここにHTML、スタイルシート、スクリプトのインポートを追加できます。カスタムNeedleコンポーネントはsrc/scripts/フォルダーに入れる必要があります。 また、3Dコンテンツを表示する<needle-engine>ウェブコンポーネントもここにあります。その属性を変更して、環境、読み込みスタイル、コンタクトシャドウなどを変更できます。利用可能な属性のリストについては、ウェブコンポーネント属性リファレンスを参照してください。

:::

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

::: file .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の特徴です。

:::tip 追加ファイルをアウトプットフォルダーにコピーする ビルド時に出力フォルダーにコピーしたい追加ファイルをプロジェクトに追加できます。include/フォルダーに入れるか、needle.config.jsonファイルでコピーを設定してください。 :::

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

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

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

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

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を使用して、ウェブプロジェクトにエクスポートされたアセットをロードします。

引き続き読む

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

PreviousネットワーキングNextサンプルプロジェクト

Last updated