シーンを構築する

PlayCanvas Web Components を使用して、シンプルな3Dシーンをステップバイステップで構築しましょう。ライトが当たった球体のある基本的なシーンを作成します。

開始点

まず、<pc-app> および <pc-scene> 要素を使用して、アプリケーションの基本構造をHTMLの body に追加しましょう。

<pc-app>
    <pc-scene>
    </pc-scene>
</pc-app>

これにより、空の3Dシーンが作成されます。しかし、まだ何もレンダリングされたものは見えません。カメラとコンテンツが必要です。

注記

すべての pc- 要素は適切に閉じられる必要があります。自己終了タグ（例：<pc-camera />）はサポートされていません。

カメラを追加する

シーンを表示するには、カメラが必要です。<pc-entity> および <pc-camera> 要素を使用してシーンにカメラを追加できます。

<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 0 5">
            <pc-camera></pc-camera>
        </pc-entity>
    </pc-scene>
</pc-app>

正のZ軸方向に5単位離れた位置にカメラエンティティを追加しました。デフォルトでは、カメラは負のZ軸方向を向くため、カメラは現在原点を見ています。この時点では、レンダリングされたシーンは単色の灰色です（カメラのデフォルトのクリアカラー）。

ライトを追加する

<pc-light> 要素を使用して、シーンを照らすための指向性ライトを追加しましょう。

<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 0 5">
            <pc-camera></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 45 0">
            <pc-light type="directional"></pc-light>
        </pc-entity>
    </pc-scene>
</pc-app>

ライトは角度を付けて回転されており、オブジェクトにより興味深いシェーディングが作成されます。

オブジェクトを追加する

<pc-render> 要素を使用して、シーンに球体を追加しましょう。

<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 0 5">
            <pc-camera></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 45 0">
            <pc-light type="directional"></pc-light>
        </pc-entity>
        <pc-entity name="sphere">
            <pc-render type="sphere"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

これで、画面の中央に白い球体が表示されているはずです！