Displaying Geometory - actnwit/RhodoniteTS GitHub Wiki

Basic Shapes

Several basic shapes can be created using the MeshHelper class. These functions return the entities of the basic shapes created.

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

The following basic shapes are available.

Here is a sample for reference.

Primitives

If you prepare your own vertex data

Vertex data can be defined as follows The defined vertex data is set to the Primitive class.

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;
}

The entire code is shown below.

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');
    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/