Skip to main content

@mapmost/mapmost-webgl-transformControls

A customized plug-in for Mapmost SDK for WebGL that provides support for 3D model translation, rotation and scaling operations.

Depends on Mapmost SDK for WebGL, version correspondence is as follows:

transformControls versionSDK version
v 1.0.0v 2.10.0+
v 2.0.0v 3.2.0+
v 3.0.0v 9.1.0+
v 3.1.0v 9.11.1-beta+

Install​

npm install @mapmost/mapmost-webgl-transformControls@3.1.0

Usage​

Using modules​

import mapmost from '@mapmost/mapmost-webgl';
import MapmostTransformControls from '@mapmost/mapmost-webgl-transformControls';
import '@mapmost/mapmost-webgl-transformControls/dist/mapmost-webgl-transformControls.css'

Use CDN​

<script src ='https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js'></script>
<script src='https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-transformControls/v3.1.0/mapmost-webgl-transformControls.js'></script>
<link rel='stylesheet' href='https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-transformControls/v3.1.0/mapmost-webgl-transformControls.css' type='text/css' />

Usage​

new MapmostTransformControls(model, layer, options);
  • model: Obejct3D (required) model object.
  • layer: ModelLayer (required) 3D layer instance.
  • options: Object (optional) optional parameters
    • isShowTool: Boolean (optional) Whether to display the operation control, the default is true.
    • isShowAllAxis: Boolean (optional) Whether to display all axes, the default is false, only the XYZ three axes are displayed.

Usage example​


let models_obj = ["./data/Olympic.glb"].map(item => ({
    type: 'glb',
    url: item
}));

let options = {
    id: 'model_id',
    type: 'model',
    models: models_obj,
    center: [120.74603465203592, 31.30605899929158, 0.0],
    callback: function (group, layer) {
        let model = group.children[0]
        new MapmostTransformControls(model, layer);
    }
};
map.addLayer(options);

Refer to Example.

method​

getStateInfo​

Get model status information.

-The return value is in the following form:

```js
{
    "center": [ // The origin of model placement
        120.74610481430044,
        31.30605392875909,
        68.19268619625325
    ],
    "rotate": { // rotation value
        "x": 0,
        "y": 0,
        "z": 0
    },
    "scale": { // scale value
        "x": 1,
        "y": 1,
        "z": 1
    }
}
```

Case​

let trans=new MapmostTransformControls(model, layer);
trans.control.addEventListener('mouseUp', function (e) {
    console.log(trans.getStateInfo()) // Output model status information
})

quit​

Exit operating mode.

Case​

let control=new MapmostTransformControls(model, layer, {isShowTool:false});
control.quit()

setMode​

Set the operating mode.

Parameters​

NameTypeDescription
modeStringRequiredTranslation, rotation, and scaling are "translate", "rotate", and "scale" respectively.

Case​

let control=new MapmostTransformControls(model, layer, {isShowTool:false});
control.setMode('translate') //Set translation mode

reset​

Reset model objects.

Case​

let control=new MapmostTransformControls(model, layer, {isShowTool:false});
control.reset() // Reset