Needle Engine Webコンポーネントの属性

Needle Engineは、ウェブコンポーネントとして利用可能です: <needle-engine>。このコンポーネントは、ウェブブラウザで3Dシーン、モデルなどをロードして表示するために使用できます。その動作、見た目、操作感を設定できる一連の属性が付属しています。これらの設定はすべてコードで上書きできますが、属性はHTMLで設定する便利な方法です。

ウェブコンポーネントは index.html にあります

UnityやBlenderを介して、あるいは直接コードでプロジェクトを作成する場合でも、<needle-engine> ウェブコンポーネントを使用し、調整することができます。通常、ウェブプロジェクトの index.html ファイルでこれを見つけることができます。

以下の表に、利用可能な属性とその説明を示します。

属性説明
ローディング
src1つまたは複数のglTFまたはglbファイルへのパス。
サポートされている型は string、string[]、または文字列化された配列 (,区切り) です
dracoDecoderPathDracoデコーダーへのURL。例: ローカルDracoデコーダーを使用するための./include/draco/
dracoDecoderTypeDracoデコーダーのタイプ。オプションは wasm または js です。three.jsドキュメントを参照してください
ktx2DecoderPathKTX2デコーダーへのURL。例: ローカルKTX2デコーダーを使用するための./include/ktx2/
レンダリング
background-colorオプション。背景色として使用される16進数カラー。例: rgb(255, 200, 100)、#dddd00
background-imageオプション。スカイボックス画像 (背景画像) またはプリセット文字列へのURL: studio、blurred-skybox、quicklook、quicklook-ar
background-blurrinessオプション。background-imageのぼかし度。0 (ぼかしなし) から1 (最大のぼかし) までの値。例: background-blurriness="0.5"
environment-imageオプション。環境画像 (環境光) またはプリセット文字列へのURL: studio、blurred-skybox、quicklook、quicklook-ar
contactshadowsオプション。コンタクトシャドウをレンダリングします
tone-mappingオプション。サポートされている値は none、linear、neutral、agx です
tone-mapping-exposureオプションの数値。例: tone-mapping-exposure="1.5"で露出を上げます。tone-mappingが設定されている必要があります
インタラクション
autoplayアニメーションを自動再生するために追加するか、trueに設定します。例: <needle-engine autoplay
camera-controlsシーンにカメラコントロールが見つからない場合、OrbitControlsを自動的に追加するために追加するか、trueに設定します
auto-rotate自動回転を有効にするために追加します (camera-controlsと一緒に使用した場合のみ)
イベント
loadstartローディングが開始されたときに呼び出す関数の名前。引数は (ctx:Context, evt:Event) であることに注意してください。デフォルトのローディングオーバーレイを隠すために evt.preventDefault() を呼び出すことができます
progressローディングが更新されたときに呼び出す関数の名前。onProgress(ctx:Context, evt: {detail: {context:Context, name:string, index:number, count:number, totalProgress01:number}) { ... }
loadfinishedローディングが完了したときに呼び出す関数の名前
ローディング表示Needle Engineのローディング表示の外観を変更するために利用可能なオプションです。簡単に編集するには ?debugloadingrendering を使用してください
loading-backgroundPRO — デフォルト: transparent。ローディング背景色を変更します (例: #dd5500)
loading-logo-srcPRO — ローディングロゴ画像を変更します (例: https://yourdomain.com/logo.pngまたは/logo.png)
hide-loading-overlayPRO — ローディングオーバーレイを表示しません
内部
hash内部で使用され、ロードされるファイルに付加されて更新を強制します (例: ブラウザがglbファイルをキャッシュしている場合)。手動で編集しないでください。

アップグレード通知:

  • Needle Engine 4.5.0で削除された属性: loading-style、loading-background-color、loading-text-color、primary-color、secondary-color

例

<!-- ロードするカスタム glb へのパスを設定する -->
<needle-engine src="path/to/your.glb"></needle-engine>
<!-- Draco デコーダーの場所をオーバーライドする -->
<needle-engine src="path/to/your.glb" dracoDecoderPath="./include/draco/"></needle-engine>

環境画像の設定、アニメーションの再生、自動カメラコントロール。stackblitzでライブを見る

<needle-engine
      camera-controls
      auto-rotate
      autoplay
      skybox-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
      environment-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
      src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF-Embedded/DamagedHelmet.gltf"
      >
      </needle-engine>

needle-engineコンテキストのローディングが完了したときにイベントを受け取る:

<needle-engine loadfinished="onLoadFinished"> </needle-engine>
<script>
    function onLoadFinished() {
        console.log("Needle Engine has finished loading");
    }
</script>

カスタムローディングスタイル (PRO)

<needle-engine>ウェブコンポーネントに適切な属性を設定することで、Needle Engineの外観を簡単に変更できます。詳細については、上記の表を参照してください。

custom loadinggithubでコードを見る

AIにより自動翻訳されました