メインコンテンツまでスキップ

<pc-entity>

<pc-entity>タグはエンティティを定義するために使用されます。

使用法

属性​

属性タイプデフォルト説明
enabledBoolean"true"エンティティの有効状態
nameString-エンティティの名前識別子
positionVector3"0 0 0"「X Y Z」値としてのローカル空間位置
rotationVector3"0 0 0"度単位の「X Y Z」オイラー角としてのローカル空間回転
scaleVector3"1 1 1"「X Y Z」値としてのローカル空間スケール
tagsString-コンマ区切りのタグのリスト

イベント​

これらのイベントは、addEventListener()を使用するか、このインターフェースのoneventnameプロパティにイベントリスナーを割り当てることでリッスンできます。

イベント説明
clickエンティティ上でプライマリボタンが押され、そして離されたときに発生します。
pointerdownポインターがエンティティ上で押下されたときに発生します。
pointerenterポインターがエンティティに入ったときに発生します。
pointerleaveポインターがエンティティを離れたときに発生します。
pointermoveポインターがエンティティ上で移動したときに発生します。
pointerupポインターがエンティティから解放されたときに発生します。

6つすべてがPointerEventオブジェクトとして配信され、要素ツリーをバブリングします。そのため、祖先要素に1つリスナーを置けばサブツリー全体を扱えます。

これらのイベントは、インラインの onclick および onpointer* 属性を使って宣言的に処理することもできます。これらは標準のインラインイベントハンドラーであり、ブラウザ自身によってコンパイル・実行されるため、任意のHTML要素の onclick とまったく同じように動作します。属性を（実行時であっても）設定すると以前のハンドラーが置き換えられ、削除するとハンドラーが削除されます。ハンドラー内では、this は <pc-entity> 要素であり、event はディスパッチされたイベントです。

<pc-entity name="cube"
           onpointerenter="this.entity.script.tweener.play(0)"
           onpointerleave="this.entity.script.tweener.play(1)"
           onclick="this.entity.script.tweener.play(2)">
    <pc-render type="box"></pc-render>
</pc-entity>

クリック​

クリックによる選択を実装したいときに使うのがclickです。pointerdownとpointerupから自分で組み立てるのではなく、これを使う理由を知っておく価値があります。

  • プライマリボタンを必要とするため、右クリックでは発生しません。pointerupだけではこれを区別できません。
  • 押下と解放の両方を必要とするため、pointerdownのようにカメラのドラッグ開始ごとに発生することはありません。
  • 押下と解放が別のジオメトリ上で起きた場合、クリックは両者の最も近い共通の祖先で発生します。あるオブジェクトから兄弟オブジェクトへドラッグすると共通の親でクリックが発生し、背景へドラッグして離すとどこでもクリックは発生しません。これは、ネストしたHTML上のネイティブなクリックにブラウザが適用するのと同じルールです。

ブラウザが取り消した押下 — たとえばスクロールと解釈し直されたタッチ — はクリックとして成立せず、破棄されます。

例​

エンティティのトランスフォームは階層を通じて合成されます。小さいキューブは大きいキューブの子なので、大きいキューブにポインタを乗せると両方が一緒に動きます。どちらのキューブをクリックしても2つとも回転します。子にはハンドラがないため、そのクリックが親までバブリングするからです。親の rotation や scale、インラインのハンドラを編集してみましょう:

ライブサンプル
<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 1 4">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 30 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="parent" rotation="0 30 0" tags="interactive"
                   onpointerenter="this.entity.setLocalPosition(0, 0.25, 0)"
                   onpointerleave="this.entity.setLocalPosition(0, 0, 0)"
                   onclick="this.entity.rotate(0, 45, 0)">
            <pc-render type="box"></pc-render>
            <pc-entity name="child" position="0.75 0.75 0" scale="0.5 0.5 0.5">
                <pc-render type="box"></pc-render>
            </pc-entity>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScriptインターフェース​

EntityElement APIを使用して、<pc-entity>要素をプログラムで作成および操作できます。

エンティティのサブツリーのコピーを大量に作るには、ネイティブの <template> 要素の中に一度だけ宣言してクローンしてください — テンプレートによる再利用可能なシーンを参照してください。