Adding Models

This section introduces how to add modeling objects JSGhostSymbol using 3DS model files.

Learn how to load model files into the map, create objects, and place them at the required locations.

Each model data is stored and managed in JSGhostSymbolMap.

The stored model data is used as shape information in JSGhostSymbol objects.

Therefore, model data must be entered into JSGhostSymbolMap before creating a JSGhostSymbol object.

JSGhostSymbol objects with specified model information can freely specify location, rotation, and scale values.

JSGhostSymbol data is visualized through the following steps:

1. Load model data into the ghost symbol map

2. Set model texture (optional)

3. Create and configure the ghost symbol object

4. Create a layer and store the object

Below is the complete code for creating a JSGhostSymbol object.

var ghostSymbolMap = Module.getGhostSymbolMap();

function createGhostSymbol() {
    // 1. Load model data into the ghost symbol map
    ghostSymbolMap.insert({
        id: "MY_MODEL",
        url: "./data/my_model_file.3ds",
        callback: function (e) {
            // 2. Set model texture (optional)
            ghostSymbolMap.setModelTexture({
                id: e.id,
                face_index: 0,
                url: "./data/my_model_file_texture.jpg",
                callback: function (e) {
                    console.log("Complete.");
                },
            });

            // 3. Create and configure the ghost symbol object
            var copyModel = Module.createGhostSymbol("MY_COPY_MODEL");

            copyModel.setGhostSymbol("MY_MODEL");

            var modelHeight = ghostSymbolMap.getGhostSymbolSize("MY_MODEL");
            copyModel.setBasePoint(0, -modelHeight.height * 0.5, 0);

            copyModel.setRotation(0, 90.0, 0);
            copyModel.setScale(new Module.JSSize3D(1.5, 1.5, 1.5));
            copyModel.setPosition(new Module.JSVector3D(129.126135, 35.170643, 5.807222));

            // 4. Create a layer and store the object
            var layerList = new Module.JSLayerList(true);
            layer = layerList.createLayer("GHOST_SYMBOL_LAYER", Module.ELT_GHOST_3DSYMBOL);
            layer.addObject(copyModel, 0);
        },
    });
}

Let's delve into the details of the code step by step.

Step 1. Load Model Data into the Ghost Symbol Map

Call getGhostSymbolMap from the Module to return the JSGhostSymbolMap API object and then register the model data using the insert API.

// 1. Load model data into the ghost symbol map
ghostSymbolMap.insert({
    id: "MY_MODEL",
    url: "./data/my_model_file.3ds",
    format: "3ds",
    callback: function (e) {
        // ... (omitted) ...
    },
});

The id value is essential for distinguishing models and must not be duplicated.

The format attribute can be omitted if the URL ends with the file extension (.3ds), but it's good practice to explicitly specify the file data format.

When the file specified by the URL is loaded, the function specified in the callback attribute is called.

You can check the model information in the function call parameter.

The faceCount and faceTexture parameter properties are used in the next step for Set Model Texture

Step 2. Set Model Texture (Optional)

Models often come with texture images in addition to shape information.

Texture images can be specified for each face of the model and can also be left unspecified.

// 2. Set model texture (optional)
ghostSymbolMap.setModelTexture({
    id: e.id,
    face_index: 0,
    url: "./data/my_model_file_texture.jpg",
    callback: function (e) {
        console.log("Complete.");
    },
});

Similar to the insert API, the file is requested asynchronously, and the specified callback function is called upon texture specification completion.

Step 3. Create and Configure the Ghost Symbol Object

Use the registered model shape to create a ghost symbol object.

The created object can freely set its location, scale, and rotation direction, and multiple ghost symbols can reference one ghost symbol map model.

First, use the code below to create the object.

var copyModel = Module.createGhostSymbol("MY_COPY_MODEL");

Specify Model Shape

Specify the model shape to use by entering the previously registered model ID.

copyModel.setGhostSymbol("MY_MODEL");

Specify Object Origin

The initial origin of the object is the model's center point.

The origin affects the setting of the model's location, scale, and rotation values. You can see the difference in scale between two objects with different origins in the image below.

• Model Center Origin

scale = 1.0	scale = 1.5

• Model Bottom Origin

scale = 1.0	scale = 1.5

In the code above, the object's origin is lowered by half the model's height so that the object can stand on the ground centered at the bottom.

var modelHeight = ghostSymbolMap.getGhostSymbolSize("MY_MODEL");
copyModel.setBasePoint(0, -modelHeight.height * 0.5, 0);

Rotate the Object

Rotate the object based on the specified axis. The axis perpendicular to the ground is entered as the second parameter.

copyModel.setRotation(0, 90.0, 0);

Adjust Object Scale

Adjust the object's scale centered on the previously specified origin.

copyModel.setScale(new Module.JSSize3D(1.5, 1.5, 1.5));

Set Object Position

Set the object's location.

copyModel.setPosition(new Module.JSVector3D(129.126135, 35.170643, 5.807222));

Step 4. Create a Layer and Store the Object

Store the configured object in a layer.

The layer type is set to ELT_GHOST_3DSYMBOL.

var layerList = new Module.JSLayerList(true);
layer = layerList.createLayer("GHOST_SYMBOL_LAYER", Module.ELT_GHOST_3DSYMBOL);
layer.addObject(line, 0);

Model Creation Result

The result of creating a ghost symbol object based on a 3DS file through the process above.

Interested in seeing live code for the ghost symbol object creation process? Please click here.