Reference Source

Function

Static Public Summary
public

DrawShaderSource(mesh: *)

public

Creates box-shaped Geometry.

public

Creates a box-shaped lines Geometry.

public

Creates a box-shaped lines Geometry from AABB.

public

Creates a cylinder-shaped Geometry.

public

Creates a grid-shaped Geometry.

public

Creates a plane-shaped Geometry.

public

Creates a 3D polyline Geometry.

public

Creates a 3D polyline from curve 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.

public

rebucketPositions(mesh: {positionsCompressed: number[], indices: number[], edgeIndices: number[]}, bitsPerBucket: number, checkResult: boolean): {positionsCompressed: number[], indices: number[], edgeIndices: number[]}[]

public

rebucketPositions(mesh: {positionsCompressed: number[], indices: number[], edgeIndices: number[]}, bitsPerBucket: number, checkResult: boolean): {positionsCompressed: number[], indices: number[], edgeIndices: number[]}[]

public

uniquifyPositions(mesh: {positionsCompressed: number[], indices: number[], edgeIndices: number[]}): [Uint16Array, Uint32Array, Uint32Array]

This function obtains unique positionsCompressed in the provided object .positionsCompressed array and calculates an index mapping, which is then applied to the provided object .indices and .edgeindices.

Static Public

public DrawShaderSource(mesh: *) source

Params:

NameTypeAttributeDescription
mesh *

public buildBoxGeometry(cfg: *): Object source

Creates box-shaped Geometry.

Usage

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

[Run this example]

import {Viewer, Mesh, buildBoxGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.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 buildBoxLinesGeometry(cfg: *): Object source

Creates a box-shaped lines Geometry.

Usage

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

[Run this example]

import {Viewer, Mesh, buildBoxLinesGeometry, ReadableGeometry, PhongMaterial} from "xeokit-sdk.es.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, buildBoxLinesGeometry({
        center: [0,0,0],
        xSize: 1,  // Half-size on each axis
        ySize: 1,
        zSize: 1
     })),
     material: new PhongMaterial(viewer.scene, {
        emissive: [0,1,0]
     })
});

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 buildBoxLinesGeometryFromAABB(cfg: *): Object source

Creates a box-shaped lines Geometry from AABB.

Usage

In the example below we'll create a Mesh with a box-shaped ReadableGeometry that has lines primitives. This box will be created from AABB of a model.

[Run this example]

    import {Viewer, Mesh, Node, buildBoxGeometry, buildBoxLinesGeometryFromAABB, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";

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

    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
    viewer.scene.camera.look = [0, -5.75, 0];
    viewer.scene.camera.up = [0.37, 0.91, -0.11];

    const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
        xSize: 1,
        ySize: 1,
        zSize: 1
    }));

    new Node(viewer.scene, {
        id: "table",
        isModel: true, // <--------------------- Node represents a model
        rotation: [0, 50, 0],
        position: [0, 0, 0],
        scale: [1, 1, 1],

        children: [

            new Mesh(viewer.scene, { // Red table leg
                id: "redLeg",
                isObject: true, // <---------- Node represents an object
                position: [-4, -6, -4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1, 0.3, 0.3]
                })
            }),

            new Mesh(viewer.scene, { // Green table leg
                id: "greenLeg",
                isObject: true, // <---------- Node represents an object
                position: [4, -6, -4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [0.3, 1.0, 0.3]
                })
            }),

            new Mesh(viewer.scene, {// Blue table leg
                id: "blueLeg",
                isObject: true, // <---------- Node represents an object
                position: [4, -6, 4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [0.3, 0.3, 1.0]
                })
            }),

            new Mesh(viewer.scene, {  // Yellow table leg
                id: "yellowLeg",
                isObject: true, // <---------- Node represents an object
                position: [-4, -6, 4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1.0, 1.0, 0.0]
                })
            }),

            new Mesh(viewer.scene, { // Purple table top
                id: "tableTop",
                isObject: true, // <---------- Node represents an object
                position: [0, -3, 0],
                scale: [6, 0.5, 6],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1.0, 0.3, 1.0]
                })
            })
        ]
    });

    let aabb = viewer.scene.aabb;
    console.log(aabb);

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildBoxLinesGeometryFromAABB({
            id: "aabb",
            aabb: aabb,
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 1,]
        })
    });

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.id String
  • optional

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

cfg.aabb Number[]
  • optional

AABB for which box will be created.

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, Mesh, buildCylinderGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.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 buildGridGeometry(cfg: *): Object source

Creates a grid-shaped Geometry.

Usage

Creating a Mesh with a GridGeometry and a PhongMaterial:

[Run this example]

import {Viewer, Mesh, buildGridGeometry, VBOGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.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 VBOGeometry(viewer.scene, buildGridGeometry({
         size: 1000,
         divisions: 500
     })),
     material: new PhongMaterial(viewer.scene, {
         color: [0.0, 0.0, 0.0],
         emissive: [0.4, 0.4, 0.4]
     }),
     position: [0, -1.6, 0]
});

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.size Number
  • optional
  • default: 1

Dimension on the X and Z-axis.

cfg.divisions Number
  • optional
  • default: 1

Number of divisions on X and Z axis..

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, Mesh, buildPlaneGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.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 buildPolylineGeometry(cfg: *): Object source

Creates a 3D polyline Geometry.

Usage

In the example below we'll create a Mesh with a polyline ReadableGeometry that has lines primitives.

[Run this example]

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {buildPolylineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

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

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

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with polyline shape
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometry({
        points: [
            0, 2.83654, 0,
            -0.665144, 1.152063, 0,
            -2.456516, 1.41827, 0,
            -1.330288, 0, 0,
            -2.456516, -1.41827, 0,
            -0.665144, -1.152063, 0,
            0, -2.83654, 0,
            0.665144, -1.152063, 0,
            2.456516, -1.41827, 0,
            1.330288, 0, 0,
            2.456516, 1.41827, 0,
            0.665144, 1.152063, 0,
            0, 2.83654, 0,
        ]
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 1,]
    })
});

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.id String
  • optional

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

cfg.points Number[]
  • optional

3D points indicating vertices position.

Return:

Object

Configuration for a Geometry subtype.

public buildPolylineGeometryFromCurve(cfg: *): Object source

Creates a 3D polyline from curve Geometry.

Usage

In the example below we'll create a Mesh with a polyline ReadableGeometry created from curves.

[Run this example]

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {buildPolylineGeometryFromCurve, Viewer, Mesh, PhongMaterial, NavCubePlugin, CubicBezierCurve, SplineCurve, QuadraticBezierCurve, ReadableGeometry} from "../../dist/xeokit-sdk.min.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

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

new NavCubePlugin(viewer, {
    canvasId: "myNavCubeCanvas",
    visible: true,
    size: 250,
    alignment: "bottomRight",
    bottomMargin: 100,
    rightMargin: 10
});

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

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with polyline shape from Spline
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
        id: "SplineCurve",
        curve: new SplineCurve(viewer.scene, {
            points: [
                [-65.77614, 0, -88.881992],
                [90.020852, 0, -61.589088],
                [-67.766247, 0, -22.071238],
                [93.148164, 0, -13.826507],
                [-14.033343, 0, 3.231558],
                [32.592034, 0, 9.20188],
                [3.309023, 0, 22.848332],
                [23.210098, 0, 28.818655],
            ],
        }),
        divisions: 100,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [1, 0, 0]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with polyline shape from CubicBezier
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
        id: "CubicBezierCurve",
        curve: new CubicBezierCurve(viewer.scene, {
            v0: [120, 0, 100],
            v1: [120, 0, 0],
            v2: [80, 0, 100],
            v3: [80, 0, 0],
        }),
        divisions: 50,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 1, 0]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with polyline shape from QuadraticBezier
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
        id: "QuadraticBezierCurve",
        curve: new QuadraticBezierCurve(viewer.scene, {
            v0: [-100, 0, 100],
            v1: [-50, 0, 150],
            v2: [-50, 0, 0],
        }),
        divisions: 20,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 1]
    })
});

Params:

NameTypeAttributeDescription
cfg *
  • optional

Configs

cfg.id String
  • optional

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

cfg.curve Object
  • optional

Curve for which polyline will be created.

cfg.divisions Number
  • optional

The number of divisions.

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, Mesh, buildSphereGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.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, Mesh, buildTorusGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.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, Mesh, buildVectorTextGeometry, ReadableGeometry, PhongMaterial} from "xeokit-sdk.es.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, Mesh, load3DSGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.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, Mesh, loadOBJGeometry, ReadableGeometry,
     MetallicMaterial, Texture} from "xeokit-sdk.es.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.

public rebucketPositions(mesh: {positionsCompressed: number[], indices: number[], edgeIndices: number[]}, bitsPerBucket: number, checkResult: boolean): {positionsCompressed: number[], indices: number[], edgeIndices: number[]}[] source

Params:

NameTypeAttributeDescription
mesh {positionsCompressed: number[], indices: number[], edgeIndices: number[]}
bitsPerBucket number
checkResult boolean

Return:

{positionsCompressed: number[], indices: number[], edgeIndices: number[]}[]

public rebucketPositions(mesh: {positionsCompressed: number[], indices: number[], edgeIndices: number[]}, bitsPerBucket: number, checkResult: boolean): {positionsCompressed: number[], indices: number[], edgeIndices: number[]}[] source

Params:

NameTypeAttributeDescription
mesh {positionsCompressed: number[], indices: number[], edgeIndices: number[]}
bitsPerBucket number
checkResult boolean

Return:

{positionsCompressed: number[], indices: number[], edgeIndices: number[]}[]

public uniquifyPositions(mesh: {positionsCompressed: number[], indices: number[], edgeIndices: number[]}): [Uint16Array, Uint32Array, Uint32Array] source

This function obtains unique positionsCompressed in the provided object .positionsCompressed array and calculates an index mapping, which is then applied to the provided object .indices and .edgeindices.

The input object items are not modified, and instead new set of positionsCompressed, indices and edgeIndices with the applied optimization are returned.

The algorithm, instead of being based in a hash-like LUT for identifying unique positionsCompressed, is based in pre-sorting the input positionsCompressed...

(it's possible to define a "consistent ordering" for the positionsCompressed as positionsCompressed are quantized and thus not suffer from float number comparison artifacts)

... so same positionsCompressed are adjacent in the sorted array, and then it's easy to scan linearly the sorted array. During the linear run, we will know that we found a different position because the comparison function will return != 0 between current and previous element.

During this linear traversal of the array, a unique counter is used in order to calculate the mapping between original indices and unique indices.

Params:

NameTypeAttributeDescription
mesh {positionsCompressed: number[], indices: number[], edgeIndices: number[]}

The input mesh to process, with positionsCompressed, indices and edgeIndices keys.

Return:

[Uint16Array, Uint32Array, Uint32Array]

An array with 3 elements: 0 => the uniquified positionsCompressed; 1 and 2 => the remapped edges and edgeIndices arrays