Web ComponentとしてのNeedle Engine

Needle Engineは、数行のコードでリッチでインタラクティブな3DシーンをHTMLに直接表示できる使いやすいWeb Componentを提供します。これは、私たちの統合を支えているのと同じWeb Componentです。

Web Componentの設定オプションだけでは物足りなくなった場合は、カスタムスクリプトやコンポーネント、そして完全なプログラムによるシーングラフアクセスで拡張できます。

統合を活用しましょう！

複雑な3Dシーンや迅速な反復開発には、いずれかの統合を使用してNeedle Engineを利用することをお勧めします。これらは、ライブプレビュー、ホットリロード、3D最適化を含む高度な制作ワークフローを提供します。

クイックスタート

index.html

<!DOCTYPE html>
<html>
<head>
    <!-- Optional import map if you want to add additional JS modules and let's use use `import { Behaviour } from "@needle-tools/engine"` -->
    <script type="importmap">
        {
          "imports": {
            "@needle-tools/engine": "https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"
          }
        }
    </script>
    <!-- Import the Needle Engine module -->
    <script 
        type="module" 
        src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js">
    </script>
</head>
<body style="margin:0; padding:0;">
    <!-- 
    Add the <needle-engine> HTML component to your page, and specify a source file.
    This .glb file contains interactions, sounds, a skybox, and animations,
    because it was exported from our Unity integration.
    -->
    <needle-engine src="https://cloud.needle.tools/-/assets/ZUBcksQ0gIz-Q0gIz/file" background-blurriness="0.8"></needle-engine>
</body>
</html>

結果

<iframe src="/docs/code-samples/basic-webcomponent.html" style="
    width: 100%;
    aspect-ratio: 16/9;
    outline: none;
    border: none;
    "
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking"
    allowfullscreen
    ></iframe>

Stackblitzでこの例を開く

npmからインストール

統合を使用せずにNeedle Engineを直接扱うことができます。Needle Engineは、シーングラフおよびレンダリングライブラリとしてthree.jsを使用しているため、three.jsのすべての機能がNeedleでも利用可能です。

`npm`からNeedle Engineをインストールするには、以下を実行します。
npm i @needle-tools/engine

CDNからneedle-engineをインストール

デフォルトのテンプレートはviteを使用していますが、Needle EngineはバニラJavascript（バンドラーを使用しない）でも直接使用できます。

完全に事前にバンドルされたNeedle Engineを、たった1行のコードでウェブサイトに追加できます。これには、コアコンポーネント、物理演算、パーティクル、ネットワーク、XRなどが含まれます。どれを使うか迷ったらこれを使用してください！

<script type="module"
    src="https://cdn.jsdelivr.net/npm/@needle-tools/engine@4/dist/needle-engine.min.js">
</script>

多くの例はStackBlitzで見つけることができます。

StackBlitzでの迅速なプロトタイピング

ちょっとした実験には、すぐに始められる新しいプロジェクトを作成するための便利なリンクを提供しています：engine.needle.tools/new 豊富な例は、私たちのNeedle Engine Stackblitz Collectionでも利用可能です。

VS Codeでのローカル開発

統合を使用せずにNeedle Engineを使いたい場合は、ウェブサイトのローカルサーバーを実行したいと思うでしょう。Visual Studio Codeを使ってそれを行う方法は以下の通りです。

Visual Studio CodeでHTMLファイルのあるフォルダを開きます。
LiveServer拡張機能をインストールします。
Live Serverを起動します（VSCodeのフッターに「Go Live」ボタンがあります）。
自動的に開かない場合は、Webブラウザでhttp://localhost:5500/index.htmlを開きます。

three.jsとNeedle Engine

Needle Engineはシーングラフおよびレンダリングライブラリとしてthree.jsを使用しているため、three.jsのすべての機能がNeedleでも利用可能であり、コンポーネントスクリプトから使用できます。私たちはthree.jsのフォークを使用しており、特にWebXR、アニメーション、USDZエクスポートに関連する追加機能と改善が含まれています。

ヒント

<needle-engine src="myScene.glb"> のパスが既存のglbファイルを指しているか確認してください。または、このサンプルglbをダウンロードして、index.htmlと同じフォルダに置き、myScene.glbという名前にするか、srcパスを更新してください。

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Made with Needle</title>

    <!-- importmap -->
    <script type="importmap">
        {
          "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
            "three/": "https://cdn.jsdelivr.net/npm/three",
          }
        }
    </script>
    <!-- parcel require must currently defined somewhere for peerjs -->
    <script> var parcelRequire; </script>
    
    <!-- the .light version does not include dependencies like Rapier.js (so no physics) to reduce the bundle size, if your project needs physics then just change it to needle-engine.min.js -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"></script>

    <style>
        body { margin: 0; }
        needle-engine {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            background: grey;
        }
    </style>

</head>

<body>

    <!-- load a gltf or glb here as your scene and listen to the finished event to start interacting with it -->
    <needle-engine src="myScene.glb" loadfinished="onLoaded"></needle-engine>

</body>

<script>
    function onLoaded(ctx) {
        console.log("Loading a glb file finished 😎");
        console.log("This is the scene: ", ctx.scene);
    }
</script>

</html>

githubで表示

AIによる自動翻訳ページ