library logo

O3D

Module: O3D

O3D provides Model management and 3D primitives. Here you’ll find methods for creating 3D models and primitives that are compatible with the Scene class.

O3D Class: O3D.Model

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

Properties:

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

O3D.Model Method: constructor

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

Syntax:

var model = new PhiloGL.O3D.Model(options);

Arguments:

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

Options:

Notes:

New in version 1.3:

Examples:

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

var pyramid = new PhiloGL.O3D.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 PhiloGL.O3D.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)
        }
    }
  });

O3D.Model Method: 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 = {
    x: 10,
    y: 10,
    z: 20
  };
  
  pyramid.update();

O3D Class: O3D.Cube

Creates a Cube model. Inherits methods from O3D.Model.

Extends

O3D.Model

O3D.Cube Method: constructor

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

Syntax:

var model = new PhiloGL.O3D.Cube(options);

Arguments:

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

Examples:

Create a white cube.

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

O3D Class: O3D.Sphere

Creates a Sphere model. Inherits methods from O3D.Model.

Extends

O3D.Model

O3D.Sphere Method: constructor

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

Syntax:

var model = new PhiloGL.O3D.Sphere(options);

Arguments:

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

Options:

Examples:

Create a white Sphere of radius 2.

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

O3D Class: O3D.IcoSphere

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

Extends

O3D.Model

O3D.IcoSphere Method: constructor

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

Syntax:

var model = new PhiloGL.O3D.IcoSphere(options);

Arguments:

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

Options:

Examples:

Create a white IcoSphere of radius 1.

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

O3D Class: O3D.Plane

Creates a plane. Inherits methods from O3D.Model.

Extends

O3D.Model

O3D.Plane Method: constructor

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

Syntax:

var model = new PhiloGL.O3D.Plane(options);

Arguments:

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

Options:

Examples:

Create a white XZ plane.

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

O3D Class: O3D.Cylinder

Creates a Cylinder model. Inherits methods from O3D.Model.

Extends

O3D.Model

O3D.Cylinder Method: constructor

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

Syntax:

var model = new PhiloGL.O3D.Cylinder(options);

Arguments:

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

Options:

Examples:

Create a white Cylinder of radius 2 and height 3.

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

O3D Class: O3D.Cone

Creates a Cone model. Inherits methods from O3D.Model.

Extends

O3D.Model

O3D.Cone Method: constructor

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

Syntax:

var model = new PhiloGL.O3D.Cone(options);

Arguments:

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

Options:

Examples:

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

var whiteCone = new PhiloGL.O3D.Cone({
  radius: 2,
  height: 3,
  cap: true,
  colors: [1, 1, 1, 1]
});
Copyright © Nicolas Garcia Belmonte.