luma.gl

Models & Primitives

Class: Model {Model}

The Model class enables you to create 3D models which are compatible with the Scene class. All primitives (Sphere, etc) inherit from Model.

Properties:

A Model instance has a number of public properties that can be accessed/modified:

Model Method: constructor {Model:constructor}

The main constructor function for the Model class. Use this to create a new Model.

Syntax:

var model = new Model(options);

Arguments:

  1. options - (object) An object containing the following options:

Options:

Notes:

Examples:

Create a pyramid model (used in lesson 4 of learning WebGL examples).

var pyramid = new Model({
    vertices: [ 0,  1,  0,
               -1, -1,  1,
                1, -1,  1,
                0,  1,  0,
                1, -1,  1,
                1, -1, -1,
                0,  1,  0,
                1, -1, -1,
               -1, -1, -1,
                0,  1,  0,
               -1, -1, -1,
               -1, -1,  1],

    colors: [1, 0, 0, 1,
             0, 1, 0, 1,
             0, 0, 1, 1,
             1, 0, 0, 1,
             0, 0, 1, 1,
             0, 1, 0, 1,
             1, 0, 0, 1,
             0, 1, 0, 1,
             0, 0, 1, 1,
             1, 0, 0, 1,
             0, 0, 1, 1,
             0, 1, 0, 1]
  });

Create a pyramid model and add some extra buffer information and uniform color to be set before rendering the model.

var fromVertices =  [ 0,  1,  0,
                     -1, -1,  1,
                      1, -1,  1,
                      0,  1,  0,
                      1, -1,  1,
                      1, -1, -1,
                      0,  1,  0,
                      1, -1, -1,
                     -1, -1, -1,
                      0,  1,  0,
                     -1, -1, -1,
                     -1, -1,  1];

var toVertices = fromVertices.map(function(value) { return value * 2; });

var pyramid = new Model({
    vertices: fromVertices,

    uniforms: {
        colorUfm: [0.3, 0.2, 0.7, 1]
    },

    attributes: {
        endPosition: {
          //default is type: gl.FLOAT
          attribute: 'endPosition',
          size: 3,
          value: new Float32Array(toVertices)
        }
    }
  });

Model Method: update {Model:update}

Update the model matrix. Useful to update changes to the position, rotation or scale properties.

Syntax:

model.update();

Examples:

Change the position of the pyramid model and update its matrix.

  pyramid.position = new Vec3(10, 10, 20);

  pyramid.update();

Class: Cube {Cube}

Creates a Cube model. Inherits methods from Model.

Extends

Model

Cube Method: constructor {Cube:constructor}

The main constructor function for the Cube class. Use this to create a new Cube. Accepts the same properties and options as Model constructor but has preset for vertices, normals and indices.

Syntax:

var model = new Cube(options);

Arguments:

  1. options - (object) The same options as in Model constructor but has preset for vertices, normals and indices.

Examples:

Create a white cube.

var whiteCube = new Cube({
      colors: [1, 1, 1, 1]
    });

Class: Sphere {Sphere}

Creates a Sphere model. Inherits methods from Model.

Extends

Model

Sphere Method: constructor {Sphere:constructor}

The main constructor function for the Sphere class. Use this to create a new Sphere.

Syntax:

var model = new Sphere(options);

Arguments:

  1. options - (object) An object containing as properties:

Options:

Examples:

Create a white Sphere of radius 2.

var whiteSphere = new Sphere({
  radius: 2,
  colors: [1, 1, 1, 1]
});

Class: IcoSphere {IcoSphere}

Creates a Sphere model by subdividing an Icosahedron. Inherits methods from Model.

Extends

Model

IcoSphere Method: constructor {IcoSphere:constructor}

The main constructor function for the IcoSphere class. Use this to create a new IcoSphere.

Syntax:

var model = new IcoSphere(options);

Arguments:

  1. options - (object) An object containing as properties:

Options:

Examples:

Create a white IcoSphere of radius 1.

var whiteSphere = new IcoSphere({
  iterations: 1,
  colors: [1, 1, 1, 1]
});

Class: Plane {Plane}

Creates a plane. Inherits methods from Model.

Extends

Model

Plane Method: constructor {Plane:constructor}

The main constructor function for the Plane class. Use this to create a new Plane.

Syntax:

var model = new Plane(options);

Arguments:

  1. options - (object) An object containing as properties:

Options:

Examples:

Create a white XZ plane.

var whitePlane = new Plane({
  type: 'x,z',
  xlen: 10,
  zlen: 20,
  nx: 5,
  nz: 5,
  offset: 0,
  colors: [1, 1, 1, 1]
});

Class: Cylinder {Cylinder}

Creates a Cylinder model. Inherits methods from Model.

Extends

Model

Cylinder Method: constructor {Cylinder:constructor}

The main constructor function for the Cylinder class. Use this to create a new Cylinder.

Syntax:

var model = new Cylinder(options);

Arguments:

  1. options - (object) An object containing as properties:

Options:

Examples:

Create a white Cylinder of radius 2 and height 3.

var whiteCylinder = new Cylinder({
  radius: 2,
  height: 3,
  colors: [1, 1, 1, 1]
});

Class: Cone {Cone}

Creates a Cone model. Inherits methods from Model.

Extends

Model

Cone Method: constructor {Cone:constructor}

The main constructor function for the Cone class. Use this to create a new Cone.

Syntax:

var model = new Cone(options);

Arguments:

  1. options - (object) An object containing as properties:

Options:

Examples:

Create a white Cone of base radius 2 and height 3.

var whiteCone = new Cone({
  radius: 2,
  height: 3,
  cap: true,
  colors: [1, 1, 1, 1]
});