Reference Source

Function

Static Public Summary
public

Creates a box-shaped Geometry.

public

Creates a cylinder-shaped Geometry.

public

Creates a plane-shaped Geometry.

public

Creates a sphere-shaped Geometry.

public

Creates a torus-shaped Geometry.

public

Creates wireframe vector text Geometry.

public

load3DSGeometry(scene: Scene, cfg: *): Object

Loads Geometry from 3DS.

public

loadOBJGeometry(scene: Scene, cfg: *): Object

Loads Geometry from OBJ.

Static Public

public buildBoxGeometry(cfg: *): Object source

Creates a box-shaped Geometry.

Usage

In the example below we'll create a Mesh with a box-shaped ReadableGeometry.

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildBoxGeometry} from "../src/scene/geometry/builders/buildBoxGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";

const viewer = new Viewer({
        canvasId: "myCanvas"
});

viewer.scene.camera.eye = [0, 0, 5];
viewer.scene.camera.look = [0, 0, 0];
viewer.scene.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildBoxGeometry({
        center: [0,0,0],
        xSize: 1,  // Half-size on each axis
        ySize: 1,
        zSize: 1
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.id String
  • optional

Optional ID, unique among all components in the parent Scene, generated automatically when omitted.

cfg.center Number[]
  • optional

3D point indicating the center position.

cfg.xSize Number
  • optional
  • default: 1.0

Half-size on the X-axis.

cfg.ySize Number
  • optional
  • default: 1.0

Half-size on the Y-axis.

cfg.zSize Number
  • optional
  • default: 1.0

Half-size on the Z-axis.

Return:

Object

Configuration for a Geometry subtype.

public buildCylinderGeometry(cfg: *): Object source

Creates a cylinder-shaped Geometry.

Usage

Creating a Mesh with a cylinder-shaped ReadableGeometry :

[Run this example]


import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildCylinderGeometry} from "../src/scene/geometry/builders/buildCylinderGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
 });

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildCylinderGeometry({
         center: [0,0,0],
         radiusTop: 2.0,
         radiusBottom: 2.0,
         height: 5.0,
         radialSegments: 20,
         heightSegments: 1,
         openEnded: false
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.id String
  • optional

Optional ID for the Geometry, unique among all components in the parent Scene, generated automatically when omitted.

cfg.center Number[]
  • optional

3D point indicating the center position.

cfg.radiusTop Number
  • optional
  • default: 1

Radius of top.

cfg.radiusBottom Number
  • optional
  • default: 1

Radius of bottom.

cfg.height Number
  • optional
  • default: 1

Height.

cfg.radialSegments Number
  • optional
  • default: 60

Number of horizontal segments.

cfg.heightSegments Number
  • optional
  • default: 1

Number of vertical segments.

cfg.openEnded Boolean
  • optional
  • default: false

Whether or not the cylinder has solid caps on the ends.

Return:

Object

Configuration for a Geometry subtype.

public buildPlaneGeometry(cfg: *): Object source

Creates a plane-shaped Geometry.

Usage

Creating a Mesh with a PlaneGeometry and a PhongMaterial with diffuse Texture:

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildPlaneGeometry} from "../src/scene/geometry/builders/buildPlaneGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildPlaneGeometry({
         center: [0,0,0],
         xSize: 2,
         zSize: 2,
         xSegments: 10,
         zSegments: 10
     }),
     material: new PhongMaterial(viewer.scene, {
         diffuseMap: new Texture(viewer.scene, {
             src: "textures/diffuse/uvGrid2.jpg"
         })
     })
 });

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.center Number[]
  • optional

3D point indicating the center position.

cfg.id String
  • optional

Optional ID for the Geometry, unique among all components in the parent Scene, generated automatically when omitted.

cfg.xSize Number
  • optional
  • default: 1

Dimension on the X-axis.

cfg.zSize Number
  • optional
  • default: 1

Dimension on the Z-axis.

cfg.xSegments Number
  • optional
  • default: 1

Number of segments on the X-axis.

cfg.zSegments Number
  • optional
  • default: 1

Number of segments on the Z-axis.

Return:

Object

Configuration for a Geometry subtype.

public buildSphereGeometry(cfg: *): Object source

Creates a sphere-shaped Geometry.

Usage

Creating a Mesh with a sphere-shaped ReadableGeometry :

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildSphereGeometry} from "../src/scene/geometry/builders/buildSphereGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";

const viewer = new Viewer({
    canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
         center: [0,0,0],
         radius: 1.5,
         heightSegments: 60,
         widthSegments: 60
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.id String
  • optional

Optional ID for the Geometry, unique among all components in the parent Scene, generated automatically when omitted.

cfg.center Number[]
  • optional

3D point indicating the center position.

cfg.radius Number
  • optional
  • default: 1

Radius.

cfg.heightSegments Number
  • optional
  • default: 24

Number of latitudinal bands.

cfg.widthSegments Number
  • optional
  • default: 18

Number of longitudinal bands.

Return:

Object

Configuration for a Geometry subtype.

public buildTorusGeometry(cfg: *): Object source

Creates a torus-shaped Geometry.

Usage

Creating a Mesh with a torus-shaped ReadableGeometry :

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildTorusGeometry} from "../src/scene/geometry/builders/buildTorusGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildTorusGeometry({
         center: [0,0,0],
         radius: 1.0,
         tube: 0.5,
         radialSegments: 32,
         tubeSegments: 24,
         arc: Math.PI * 2.0
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.id String
  • optional

Optional ID for the Geometry, unique among all components in the parent Scene, generated automatically when omitted.

cfg.center Number[]
  • optional

3D point indicating the center position.

cfg.radius Number
  • optional
  • default: 1

The overall radius.

cfg.tube Number
  • optional
  • default: 0.3

The tube radius.

cfg.radialSegments Number
  • optional
  • default: 32

The number of radial segments.

cfg.tubeSegments Number
  • optional
  • default: 24

The number of tubular segments.

cfg.arc Number
  • optional
  • default: Math.PI*0.5

The length of the arc in radians, where Math.PI*2 is a closed torus.

Return:

Object

Configuration for a Geometry subtype.

public buildVectorTextGeometry(cfg: *): Object source

Creates wireframe vector text Geometry.

Usage

Creating a Mesh with vector text ReadableGeometry :

[Run this example]


import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildVectorTextGeometry} from "../src/scene/geometry/builders/buildVectorTextGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 100];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildVectorTextGeometry({
         origin: [0,0,0],
         text: "On the other side of the screen, it all looked so easy"
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.id String
  • optional

Optional ID, unique among all components in the parent Scene, generated automatically when omitted.

cfg.center Number[]
  • optional

3D point indicating the center position.

cfg.origin Number[]
  • optional

3D point indicating the top left corner.

cfg.size Number
  • optional
  • default: 1

Size of each character.

cfg.text String
  • optional
  • default: ""

The text.

Return:

Object

Configuration for a Geometry subtype.

public load3DSGeometry(scene: Scene, cfg: *): Object source

Loads Geometry from 3DS.

Usage

In the example below we'll create a Mesh with PhongMaterial, Texture and a ReadableGeometry loaded from 3DS.

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {load3DSGeometry} from "../src/scene/geometry/loaders/load3DSGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.scene.camera.eye = [40.04, 23.46, 79.06];
viewer.scene.camera.look = [-6.48, 13.92, -0.56];
viewer.scene.camera.up = [-0.04, 0.98, -0.08];

load3DSGeometry(viewer.scene, {
     src: "models/3ds/lexus.3ds",
     compressGeometry: false

 }).then(function (geometryCfg) {

     // Success

     new Mesh(viewer.scene, {

         geometry: new ReadableGeometry(viewer.scene, geometryCfg),

         material: new PhongMaterial(viewer.scene, {

             emissive: [1, 1, 1],
             emissiveMap: new Texture({  // .3DS has no normals so relies on emissive illumination
                 src: "models/3ds/lexus.jpg"
             })
         }),

         rotation: [-90, 0, 0] // +Z is up for this particular 3DS
     });
 }, function () {
     // Error
 });

Params:

NameTypeAttributeDescription
scene Scene

Scene we're loading the geometry for.

cfg *

Configs, also added to the result object.

cfg.src String
  • optional

Path to 3DS file.

Return:

Object

Configuration to pass into a Geometry constructor, containing geometry arrays loaded from the OBJ file.

public loadOBJGeometry(scene: Scene, cfg: *): Object source

Loads Geometry from OBJ.

Usage

In the example below we'll create a Mesh with MetallicMaterial and ReadableGeometry loaded from OBJ.

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {loadOBJGeometry} from "../src/scene/geometry/loaders/loadOBJGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {MetallicMaterial} from "../src/scene/materials/MetallicMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.scene.camera.eye = [0.57, 1.37, 1.14];
viewer.scene.camera.look = [0.04, 0.58, 0.00];
viewer.scene.camera.up = [-0.22, 0.84, -0.48];

loadOBJGeometry(viewer.scene, {

     src: "models/obj/fireHydrant/FireHydrantMesh.obj",
     compressGeometry: false

 }).then(function (geometryCfg) {

     // Success

     new Mesh(viewer.scene, {

         geometry: new ReadableGeometry(viewer.scene, geometryCfg),

         material: new MetallicMaterial(viewer.scene, {

             baseColor: [1, 1, 1],
             metallic: 1.0,
             roughness: 1.0,

             baseColorMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Base_Color.png",
                 encoding: "sRGB"
             }),
             normalMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Normal_OpenGL.png"
             }),
             roughnessMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Roughness.png"
             }),
             metallicMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Metallic.png"
             }),
             occlusionMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Mixed_AO.png"
             }),

             specularF0: 0.7
         })
     });
 }, function () {
     // Error
 });

Params:

NameTypeAttributeDescription
scene Scene

Scene we're loading the geometry for.

cfg *
  • optional

Configs, also added to the result object.

cfg.src String
  • optional

Path to OBJ file.

Return:

Object

Configuration to pass into a Geometry constructor, containing geometry arrays loaded from the OBJ file.