インタラクティブな Web サイトまたは HTML コンテンツをシーンに追加する

Web エンジンを作成して、VRED シーンにインタラクティブな Web サイトまたは HTML コンテンツを追加します。コンテンツは、リアルタイムでマテリアル テクスチャ チャネルにストリーム入力され、表示のためのマテリアルのプロパティを使用します。

Web エンジンを作成する方法

  1. メニュー バーで、[シーン] > [メディア エディタ]を選択してメディア エディタを開きます。
  2. Web エンジンを作成するには、下部のアイコン バーにある[+]アイコンを選択してから、[Web エンジン]を選択します。
  3. Web エンジンをダブルクリックして、名前を付けます。

  4. 幅と高さを設定する:

    • URL に HTML コンテンツを使用する場合は、コードから既知の幅と高さを入力します。
    • URL に Web サイトを使用する場合は、Web サイトがオブジェクトに表示されるときに幅と高さを調整します。

  5. コンテンツの URL を追加する:

    • Web サイトに追加するには、[URL]フィールドにそれを入力します(www.autodesk.co.jp など)。
    • ローカルの HTML ファイルを追加するには、[参照]アイコンを使用します。HTML には、オーディオとビデオを含めることができます。HTML ファイルは埋め込まれているオーディオ ファイルやビデオ ファイルを参照できます。サポートされているメディア フォーマットは、WebM (.webm)、OGG (.ogg/.ogv)、WAV (.wav)です。

  6. マテリアル エディタから、Web エンジンに割り当てられたマテリアルを[マテリアル]フィールドにドラッグします。

  7. 次のテクスチャ タイプを設定します。

    • 拡散:

      環境がこのテクスチャに反映されます。

      1. マテリアル エディタのプロパティの[マテリアル]で、[拡散光色]を白に設定します。
      2. マテリアル エディタのプロパティの[拡散テクスチャ]で、[テクスチャを使用]をクリックして、[マッピング タイプ]を UV に設定します。 必要に応じて拡散テクスチャを回転します。

    • 白熱光:

      レイトレーシングでは、[光源として使用]がアクティブになると、マテリアルはシーンに光を放出します。

      1. マテリアル エディタのプロパティの[マテリアル]で、[拡散光色]を黒に設定します。
      2. マテリアル エディタのプロパティの[白熱光]で、[強度]を 1.00 に、色を白に設定します。
      3. [マッピング タイプ]を UV に設定します。 必要に応じて白熱光テクスチャを回転します。

    • 拡散光 + 白熱光:

      このテクスチャは、白熱光とアルファ チャネル([拡散光]でのみ使用可能)のプロパティが必要な場合に使用します。

      この HTML サンプル コードは Web ページの背景を透明(アルファ)に設定します。

      `html

body{

background-color: rgba(0, 0, 0, 0);

}

  ```

  1. マテリアル エディタのプロパティの[マテリアル]で、[拡散光色]を白に設定します。
  2. マテリアル エディタのプロパティの[拡散テクスチャ]で、[アルファを使用]をオンにします。
  3. マテリアル エディタのプロパティの[白熱光]で、[強度]を 1.00 に、色を白に設定します。
  4. [拡散テクスチャ]または[白熱光]で、[マッピング タイプ]を UV に設定します。必要に応じてテクスチャを回転します。

VRED から HTML5 へのコミュニケーション

VRED と HTML5 の間ではコミュニケーションとインタラクションが双方向で行われます。ここでは VRED から HTML5 へのコミュニケーションの例を示します。

Python 関数((sendToWebEngine))が関連付けられているバリアント セット((Home\_Button))を実行すると、特定の Web エンジン((Webengine\_A))がトリガされ、Web ページに HTML イベント((VRED\_HOME\_Btn))が送信されます。Web ページには、メッセージを受信するためのイベント リスナーが必要です。

次に、メッセージを受信するための HTML コードの例を示します。

<script>

document.addEventListener("VRED\_HOME\_Btn", Icon_HomeClick);

</script>

VRED から HTML5 へ

HTML5 から VRED へのコミュニケーション

Web サーバを使用して Web ページから VRED に Python コマンドを送信するには、Img 要素と URL を使用できます。たとえば、src = "http://localhost:8888?.....。基本設定で Web サーバを有効にする必要があります。

スイッチ マテリアルを選択肢 0 に設定する HTML コード:

<script>

function r(){

var i = document.createElement("img");

i.src = "http://localhost:8888/python?value=setSwitchMaterialChoice('SwitchColor', 0)";

};

</script>

Icon_Anim という VarianSet をトリガする HTML コード:

<script>

Icon_Click = function(event) {

var i = document.createElement("img");

i.src = "http://localhost:8888/variants?value=selectVariantSet('Icon_Anim')";

};

</script>
親ページ: メディア