モデル

はじめに

Studioには、球体、ボックス、平面などのプリミティブが組み込まれており、エディタ内ですばやくカスタマイズして配置することができます。 より複雑なデザインの場合、Studioは、ウェブベースの3Dコンテンツに最適なGLTF/GLB形式の外部3Dモデルや、アップロード後にGLBに変換できるFBXファイルをサポートしています。 このセットアップにより、流線型のバーチャルシーンを作成する場合でも、非常に詳細なバーチャルシーンを作成する場合でも、豊富な3D要素を使用することができます。

プリミティブ

以下の組み込みプリミティブが利用可能です:

Type	属性
SphereGeometry	{radius}
BoxGeometry	{width, height, depth}
PlaneGeometry	{width, height}
CapsuleGeometry	{radius, height}
ConeGeometry	{radius, height}
CylinderGeometry	{radius, height}
PolyhedronGeometry	{radius}
CircleGeometry	{radius}
RingGeometry	{innerRadius, outerRadius}

プリミティブの追加

3Dモデルは、Meshコンポーネントを介したStudioインターフェース、またはコードでエンティティに追加できます。 スタジオでこれらを追加するには、階層の（+）ボタンを使用するか、エンティティ上のカスタムコンポーネントにジオメトリを追加します。

例

ecs.SphereGeometry.set(world, eid, {radius: 5})

GLTFコンポーネント

対応フォーマット

GLTFとGLB

GLTFとGLBモデルがサポートされており、ウェブ上で3Dを扱うのに理想的です。

FBX

FBXのアップロードはサポートされていますが、Niantic Studioではアップロード後にモデルをGLBに変換する必要があります。 **GLBに変換する前に、テクスチャがFBXファイルに埋め込まれていることを確認してください。

モデルの設定

次の例は、実行時にエンティティにGLTFまたはGLBを設定する方法を示しています。

インフォメーション

この方法では、コンポーネントがエンティティに適用されると、コンポーネントのプロパティからカスタムモデルを選択する必要があります。

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
    name: 'loaded-model',
    schema: {
        // @asset
        model: ecs.string,
    },
    add: (world, component) => {
        ecs.GltfModel.set(world, eid, {
            url: component.schema.model,
        })
    }
})

モデルのプロパティを設定する

モデル特性

プロパティを見るここ。

例

次の例は、実行時にエンティティに Model を設定する方法を示しています。

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
    name: 'loaded-model',
    schema: {
        // @asset
        model: ecs.string,
    },
    add: (world, component) => {
        ecs.GltfModel.set(world, eid, {
            url: component.schema.model,
            animationClip: 'clip1',
            loop: true,
            paused: false,
            time: 0,
            timeScale: 1,
        })
    }
})

マテリアル・プロパティの設定

マテリアルはコードを通して、またはエディターのMeshコンポーネント内で直接設定することができます。

素材の種類

素材

標準的なPBR素材。

アンライトマテリアル

照明や影の影響を受けない素材。

シャドウマテリアル

影だけに反応する素材。

ハイダーマテリアル

背後の物体を隠す特殊素材。

材料特性

プロパティを見るここ。

例

次の例は、実行時にエンティティにマテリアルを設定する方法を示しています。

// 標準マテリアルの設定
ecs.Material.set(world, component.eid, {r: 255, g: 0, b: 100, roughness: 1})

// シャドウマテリアルの設定
ecs.ShadowMaterial.set(world, component.eid, {r: 255, g: 0, b: 100})