<needle-engine> ウェブコンポーネントには、組み込み属性の優れたコレクションが付属しており、three.js シーンを直接追加または編集することなく、ロードされたシーンの見た目と操作感を変更するために使用できます。 以下の表は、最も重要な属性のリストを示しています。

属性説明
ローディング
src1つ以上の glTF または glb ファイルへのパス。
サポートされているタイプは string、string[]、または文字列化された配列 (, 区切り) です
dracoDecoderPathDraco デコーダーへの URL
dracoDecoderTypeDraco デコーダーのタイプ。オプションは wasm または js です。three.js ドキュメント を参照してください
ktx2DecoderPathKTX2 デコーダーへの URL
レンダリング
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-styleオプションは light または dark です
loading-background-colorPRO — ローディング背景色を変更します (例: =#dd5500)
loading-text-colorPRO — ローディングテキスト色を変更します
loading-logo-srcPRO — ローディングロゴ画像を変更します
primary-colorPRO — プライマリーローディング色を変更します
secondary-colorPRO — セカンダリーローディング色を変更します
hide-loading-overlayPRO — ローディングオーバーレイを表示しません。Needle Engine > 3.17.1 に追加されました
内部
hash内部で使用されます。ロードされるファイルに付加され、更新を強制します (例: ブラウザが glb ファイルをキャッシュしている場合)。手動で編集しないでください。

例

<!-- ロードするカスタム glb へのパスを設定する -->
<needle-engine src="path/to/your.glb"></needle-engine>
<!-- Draco デコーダーの場所をオーバーライドする -->
<needle-engine src="path/to/your.glb" dracoDecoderPath="path/to/draco/folder"></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により自動翻訳されました