ジオメトリの表示 - actnwit/RhodoniteTS GitHub Wiki

Rhodoniteが用意する基本形状を使う場合

MeshHelperクラスを使って、いくつかの基本形状を作ることができます。これらの関数は作成した基本形状のentityを返します。

  const cubeEntity = Rn.MeshHelper.createCube();
  cubeEntity.rotate = Rn.Vector3.fromCopy3(90, 0, 0);
  cubeEntity.translate = Rn.Vector3.fromCopy3(0, 3, 0);

以下の基本形状が用意されています。

参考となるサンプルです。

Primitives

マテリアルを渡す

各種生成関数では、引数にマテリアルを渡せます。

const material = Rn.MaterialHelper.createClassicUberMaterial();
material.setParameter(Rn.ShaderSemantics.DiffuseColorFactor, Rn.Vector4.fromCopy4(1, 0, 0, 1));
const cube = Rn.MeshHelper.createCube({
    material: material
});

頂点データを自前で用意する場合

次のようにして、頂点データを定義することができます。定義した頂点データはPrimitiveクラスに設定します。

function readyBasicVerticesData() {

    const positions = new Float32Array([
         0.0,  0.5, 0.0, // v0
        -0.5, -0.5, 0.0, // v1
         0.5, -0.5, 0.0  // v2
    ]);

    const colors = new Float32Array([
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
    ]);

    const indices = new Uint32Array([
        0, 1, 2
    ]);

    const primitive = Rn.Primitive.createPrimitive({
        indices: indices,
        attributeSemantics: [Rn.VertexAttribute.Position.XYZ, Rn.VertexAttribute.Color0.XYZ],
        attributes: [positions, colors],
        material: void 0,
        primitiveMode: Rn.PrimitiveMode.Triangles
    });

    return primitive;
}

コード全体を以下に示します。

function readyBasicVerticesData() {

    const positions = new Float32Array([
         0.0,  0.5, 0.0, // v0
        -0.5, -0.5, 0.0, // v1
         0.5, -0.5, 0.0  // v2
    ]);

    const colors = new Float32Array([
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
    ]);

    const indices = new Uint32Array([
        0, 1, 2
    ]);

    const primitive = Rn.Primitive.createPrimitive({
        indices: indices,
        attributeSemantics: [Rn.VertexAttribute.Position.XYZ, Rn.VertexAttribute.Color0.XYZ],
        attributes: [positions, colors],
        material: void 0,
        primitiveMode: Rn.PrimitiveMode.Triangles
    });

    return primitive;
}

const load = async function () {
    const c = document.getElementById('world');
    await Rn.System.init({
      approach: Rn.ProcessApproach.FastestWebGL2,
      canvas: c
    });

    resizeCanvas();
    
    window.addEventListener("resize", function(){
        resizeCanvas();
    });
    
    function resizeCanvas() {
        c.width = window.innerWidth;
        c.height = window.innerHeight;
        system.resizeCanvas(c.width, c.height);
    }
    
    const primitive = readyBasicVerticesData();

    const originalMesh = new Rn.Mesh();
    originalMesh.addPrimitive(primitive);
    
    const firstEntity = Rn.EntityHelper.createMeshEntity();

    const meshComponent = firstEntity.getMesh();
    meshComponent.setMesh(originalMesh);

    Rn.System.startRenderLoop(()=>{
      Rn.System.processAuto();
    });
}

document.body.onload = load;

jsfiddle版はこちらです。

https://jsfiddle.net/emadurandal/xgw9e3y7/4/