---
title: ThreeJS图层
source: https://vjmap.com/guide/threejs.html
---
# ThreeJS图层
::: warning 提示！！！
下面文档中的`vjthree`已弃用，如需叠加`threejs`的三维图层，请用最新的[唯杰地图3D库](https://vjmap.com/map3d/) https://vjmap.com/map3d/
:::
threejs图层以插件形式提供
可以通过
```
npm intall vjthree
import { } from 'vjthree'
// vjthree 和 THREE 对象将做为window全局变量
```
或者需要通过
```js
vjmap.addScript([{
src: "js/plugins/vjthree.min.js"
},{
src: "js/plugins/vjthree.min.css"
}])
```
加载其脚本。
::: tip 提示
vjthree 和 THREE 对象将做为window全局变量
:::
### 开始
```js
if (typeof vjThree !== "object") {
// 如果没有环境
await vjmap.addScript([{
src: "js/plugins/vjthree.min.js"
},{
src: "js/plugins/vjthree.min.css"
}])
}
const threeContext = map.createThreeJsContext({
defaultLights: true
});
const lineOptions = {
geometry: line,
color: 0xff0000
}
let lineMesh = threeContext.line(lineOptions);
threeContext.add(lineMesh);
map.addLayer(new vjmap.ThreeLayer({context: threeContext}));
```
- - -
#### createThreeJsContext 选项
```js
const threeContext = map.createThreeJsContext(options);
```
`options` 参数是可选的，可以包含以下值：
|选项 |必填 |默认 |类型 |说明 |
|-----------|----------|---------|--------|----------------------------------------------------------------------------------------------|
| `defaultLights` | no | false | boolean | 是否为场景添加一些默认光照。如果没有添加光照，场景中的大部分物体都会渲染为黑色 |
| `realSunlight` | no | false | boolean | 它为地图中心坐标“map.getCenter”和用户本地日期时间“new Date()”设置模拟太阳位置的灯光。这个阳光可以通过 `threeContext.setSunlight` 方法更新。它在内部调用 suncalc 模块。 |
| `realSunlightHelper` | no | false | boolean | 它设置当 `realSunlight` 为真时是否显示灯光助手。 |
| `passiveRendering` | no | true | boolean | 线的颜色。与其他对象不同，此颜色将按照指定在屏幕上精确渲染，而与场景照明无关 |
| `enableSelectingFeatures` | no | false | boolean |启用鼠标悬停和选择填充挤出功能。这将触发事件 [`SelectedFeatureChange`](#SelectedFeatureChange) |
| `enableSelectingObjects` | no | false | boolean | 启用鼠标悬停和选择 3D 对象。这将触发事件 [`SelectedChange`](#SelectedChange)。该值将设置所创建对象的 `options.bbx` 值。|
| `enableDraggingObjects` | no | false | boolean | 启用拖动 3D 对象的选项。这将触发事件 [`ObjectDragged`](#ObjectDragged) where `draggedAction = 'translate'` 或 `draggedAction = 'altitude'` |
| `enableRotatingObjects` | no | false | boolean | 启用拖动 3D 对象的选项。这将触发事件 [`ObjectDragged`](#ObjectDragged) where `draggedAction = 'rotate'`|
| `enableToltips` | no | false | boolean | 启用填充拉伸特征和 3D 对象的默认工具提示|
| `multiLayer` | no | false | boolean | 启用多层页面的选项，其中将在内部创建一个默认层来管理 [`threeContext.update`](#update) 调用 |
| `orthographic` | no | false | boolean | 启用选项以设置 `THREE.OrthographicCamera` |
| `fov` | no | threeContextConstants.FOV_DEGREES | number | 允许设置默认 [`THREE.PerspectiveCamera`](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) 的 FOV。如果 `orthographic: true`，此值无效 |
| `sky` | no | false | boolean | 它设置了一个内置的大气层，最初设置了时间和地图中心位置。如果 `realSunlight` 也为真，则该图层会自动更新，但可以通过调用 `threeContext.updateSunSky(threeContext.getSunSky())` 方法单独更新。 |
| `terrain` | no | false | boolean | 它设置了一个内置的地形图层，最初设置了时间和地图中心位置。如果 `realSunlight` 也为真，则该图层会自动更新，但可以通过调用 `threeContext.updateSunSky(threeContext.getSunSky())` 方法单独更新。 |
- - -
### 加载 3D 模型
可以选择从不同格式的外部文件加载 3D 模型（支持 OBJ/MTL、GLTF/GLB、FBX、DAE）。模型加载并添加到 threeContext 后，默认情况下该对象会使用一些方法、交互、事件和动画来驱动。
一旦对象被加载并添加到 threeContext 实例，它就可以是**selectable**、**draggable**和**rotable**（在 z 轴上）
如果 threeContext 实例属性 [`enableSelectingObjects`](#enableselectingfeatures)、[`enableDraggingObjects`](#enableDraggingObjects) 和
[`enableRotatingObjects`](#enableRotatingObjects) 设置为 `true`。
- 要**拖动**一个对象，您必须选择对象，然后按**SHIFT**键并移动鼠标以更改其Lnglat位置，并按**CTRL**键更改其高度。
- 要**旋转**和对象，您必须选择对象，然后按 **ALT** 键并移动鼠标。对象将始终在其定义的中心上旋转。
如果 threeContext 实例属性 [`threeContext.enableTooltips`](#enableTooltips) 设置为 true，则任何 3D 对象（包括通过填充挤出映射框层创建的 3D 挤出）都将具有工具提示。
- - -
### 方法
#### add
```js
threeContext.add(obj [, layerId, sourceId])
```
将对象添加到 threeContext 场景的方法。它会将其添加到 `threeContext.world.children` 数组中。
#### clear
```js
async threeContext.clear([layerId, dispose])
```
此方法从“threeContext.world”中删除所有子项。如果它收到一个“layerId”，这只会影响该层中的对象。如果它接收到 `true` 作为参数，它还将在内部调用 `obj.dispose` 以释放这些对象保留的所有资源。
#### createSkyLayer
```js
threeContext.createSkyLayer()
```
这个内部方法创建了一个新的天空大气层，它被属性“threeContext.sky”内部使用。
#### createTerrainLayer
```js
threeContext.createTerrainLayer()
```
这个内部方法创建了一个新的地形层，它被属性“threeContext.terrain”内部使用。
#### defaultLights
```js
threeContext.defaultLights()
```
此方法创建 threeContext `scene` 的默认照明。
默认情况下，它会创建一个 [`THREE.AmbientLight`](https://threejs.org/docs/#api/en/lights/AmbientLight) 并分配给 [`threeContext.lights.ambientLight`]() 两个 [`THREE.DirectionalLight`]（https://threejs.org/docs/#api/en/lights/DirectionalLight）。
可以手动覆盖这些灯光，将自定义灯光添加到 threeContext `scene`。
#### dispose
```js
threeContext.dispose() : Promise (async)
```
如果 threeContext 被用作 Web 应用程序的一部分，建议在任何时候显式地处理 threeContext 的实例
它的实例将不再被使用，或者在导航到另一个不包含 threeContext 的页面之前，否则它是
您可能会面临**内存泄漏**问题，这不仅是由于 threeContext，还因为内部使用了管理对象所需的 *Map* 和 *Three.js* 实例。
要完全释放 threeContext 可以积累的所有资源和内存，包括 *Three.js* 和 *Map* 的内部资源，需要调用 `dispose` 方法。
此方法将遍历创建的场景以处理 *Three.js* 中的每个对象、几何体、材质和纹理，然后将处理 *Map* 中的所有资源，包括 `WebGLRenderingContext` 和 threeContext 实例本身。
调用此方法后，threeContext 和 *Map* 地图实例将被完全释放，因此仅建议在导航到其他页面之前使用。
#### findParent3DObject
```js
threeContext.findParent3DObject(mesh) : Object3D
```
此方法通过网格在 threeContext 场景中找到父 Object3D。此方法与返回对象数组的 `threeContext.queryRenderedFeatures` 结合使用，其中大多数是 [`THREE.Raycaster`](https://threejs.org/docs/#api/en/core/ Raycaster) 相交。
#### getFeatureCenter
```js
threeContext.getFeatureCenter(feature, model, level): lnglat
```
计算要素几何坐标的中心，包括给定 [*GeoJson*](https://geojson.org/) 要素的高度（以米为单位），该要素可以包含或不包含已加载的 3D 模型以及给定级别。
此方法在内部调用“threeContext.getObjectHeightOnFloor”，可用于填充拉伸的 Poligon 特征或 3D 模型的点特征。
#### getObjectHeightOnFloor
```js
threeContext.getObjectHeightOnFloor(feature, obj, level) : number
```
计算给定 [*GeoJson*](https://geojson.org/) 功能的高度（以米为单位），该功能可以包括或不包括加载的 3D 模型和给定级别。
此方法可用于填充拉伸的 Poligon 特征或 3D 模型的点特征。
#### getSunPosition
```js
threeContext.getSunPosition(date, coords)
```
此方法基于`suncalc.js`模块获取太阳光位置（方位角，高度），该模块计算给定日期，时间，lng，lat组合的太阳位置。
#### getSunSky
```js
threeContext.getSunSky(date, sunPos)
```
此方法基于“suncalc.js”模块获取太阳天空层位置“[方位角，高度]”，该模块计算给定日期、时间、lng、lat 组合的太阳位置。
如果提供了`date`，它将使用它，否则它将使用`new Date()`。如果提供了`sunPos`，它将使用它，否则它将基于map.getCenter()调用`threeContext.getSunPosition`方法来计算它。
#### getSunTimes
```js
threeContext.getSunTimes(date, coords)
```
此方法基于“suncalc.js”模块获取太阳时间，该模块计算来自给定日期时间、lng、lat 和 alt 的不同光照阶段（日出、日落等）的时间。这用于根据日/夜时间更改地图样式。
返回具有以下属性的对象（每个都是“日期”对象）：
#### loadObj
```js
async threeContext.loadObj(options, callback(obj));
```
此异步方法从其各自的文件加载不同格式的 3D 模型。
它会自动缓存每个资源 url 的第一个对象，以便从 `obj.duplicate` 返回下一个实例。
请注意，与所有其他对象类不同，这是异步的，并将对象作为回调函数的参数返回。
在内部，使用 [THREE.OBJLoader](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/OBJLoader.js)、[THREE.FBXLoader](https: //github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/FBXLoader.js), [THREE.GLTFLoader](https://github.com/mrdoob/three.js/blob /dev/examples/jsm/loaders/GLTFLoader.js) 或 [THREE.ColladaLoader](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/ColladaLoader.js)分别将资产获取到每种 3D 格式。 [THREE.FBXLoader](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/FBXLoader.js) 也依赖于[Zlib](https://github.com /imaya/zlib.js) 打开此格式所基于的压缩文件。
| 选项 |必填 |默认 |类型 |描述 |
|-----------|----------|---------|--------|----------|
| `type` | yes | "mtl" | string (`"mtl"`, `"gltf"`, `"fbx"`, `"dae"`) | 类型 |
| `obj` | yes | NA | string | OBJ 模型所需的资产 .obj 文件的 URL 路径 |
| `mtl` | no | NA | string | OBJ 模型所需的资产 .obj 文件的 URL 路径|
| `bin` | no | NA | string | URL path to assets .bin files needed for GLTF models respectively|
| `units` | no | scene | string (`"scene"` or `"meters"`) | 建议使用“米”以获得精度。用于解释对象顶点的单位。如果是米，threeContext 还会随着纬度的变化重新缩放对象，以显示与附近的对象和地理一起缩放。|
| `rotation` | no | 0 | number or {x, y, z} | 沿三个轴旋转对象，以在未来旋转之前将其对齐到所需的方向。请注意，未来的旋转将应用于此转换，并且不要覆盖它。 `rotate` 属性必须以数字或每个轴的形式提供（（即对于在 x 轴上旋转 90 度的对象`rotation: {x: 90, y: 0, z: 0}`|
| `scale` | no | 1 | number or {x, y, z} | 沿三个轴缩放对象，以便在未来变换之前适当调整其大小。请注意，未来的缩放适用于此转换，而不是覆盖它。 `scale` 属性必须以数字或每个轴的形式提供（（即对于转换为比其默认大小高 3 倍的对象`scale: {x: 1, y: 1, z: 3}`|
| `anchor` | no | `bottom-left` | string () | 此参数将 3D 模型的关键中心定位到它所定位的坐标。这可能有以下值`top`，`bottom`，`left`，`right`，`center`，`top-left`，`top-right`，`bottom-left`，`bottom-right`。默认值为“左下角”。 `auto` 值不会做任何事情，因此模型将使用模型中定义的锚点，无论它是什么。 |
| `adjustment` | no | 1 | {x, y, z} | 3D 模型通常不在其轴上居中，因此对象定位和旋转错误。 `adjustment` 参数必须以每个轴的单位提供（即 `adjustment: {x: 0.5, y: 0.5, z: 0}`），因此模型将校正对象的中心位置 |
| `normalize` | no | true | bool | 此参数允许对某些 3D 模型的高光值进行归一化|
| `feature` | no | 1 | [*GeoJson*](https://geojson.org/) feature | `GeoJson` 特征实例。例如`height`、`base_height`、`color`|
| `tooltip` | no | false | bool | 此参数允许有或没有工具提示，默认情况下设置为 `threeContext.enableTooltips` 的值|
| `bbox` | no | false | bool | 此参数允许有或没有边界框，默认情况下设置为 `threeContext.enableSelectingObjects` 的值 |
| `raycasted` | no | true | bool | 此参数允许单独从光线投射中隐藏对象 |
| `clone` | no | true | bool | 默认情况下，此参数允许加载对象而不克隆它，但它会降低性能，因为新对象将消耗额外的内存，因为不会克隆任何纹理。当动画和纹理不能很好地用于克隆时，某些对象可能需要全新的实例，然后 `clone: false` 将解决问题。默认情况下，“克隆”参数为 true。|
| `defaultAnimation` | no | 0 | number | 这允许通过参数分配默认动画。如果对象不包含动画则忽略 |
| `callback` | yes | NA | function | 在对象加载后运行的函数。第一个参数将是成功加载的对象，通常用于完成模型的配置并通过 `threeContext.add()` 方法将其添加到 threeContext 场景中。
对象将具有以下已可用于侦听的事件，这些事件使 UI 能够对这些事件做出反应。您可以将以下这些 `addEventListener` 行添加到 `threeContext.loadObj` 中：
```js
threeContext.loadObj(options, function (model) {
soldier = model.setCoords(origin);
soldier.addEventListener('SelectedChange', onSelectedChange, false);
soldier.addEventListener('Wireframed', onWireframed, false);
soldier.addEventListener('IsPlayingChanged', onIsPlayingChanged, false);
soldier.addEventListener('ObjectDragged', onDraggedObject, false);
soldier.addEventListener('ObjectMouseOver', onObjectMouseOver, false);
soldier.addEventListener('ObjectMouseOut', onObjectMouseOut, false);
threeContext.add(soldier);
})
```
通过这种方式，一旦这些事件被触发，您就可以通过函数在您的 UI 中进行管理。请参阅下面的 `onSelectedChange` 示例，以使用 Map 中的方法 `map.flyTo(options[, eventData])`：
```js
// 激活停用 UI 按钮的方法。
// 这个例子使用 jQuery
// 此示例需要在 threeContext.loadObj(options) 的选项中包含 GeoJson 功能
function onSelectedChange(e) {
let selected = e.detail.selected; // 如果在事件之后选择了对象，我们会得到
$('#deleteButton')[0].disabled = !selected; // 我们用 jquery 找到删除按钮
// if selected
if (selected) {
selectedObject = e.detail; //
// 我们平稳地飞向选定的对象
map.flyTo({
center: selectedObject.userData.feature.properties.camera,
zoom: selectedObject.userData.feature.properties.zoom,
pitch: selectedObject.userData.feature.properties.pitch,
bearing: selectedObject.userData.feature.properties.bearing
});
}
threeContext.update();
map.repaint = true;
}
```
##### 3D 格式和 MIME 类型
大多数流行的 3D 格式扩展名（.glb、.gltf、.fbx、.dae、...）都不是标准的 `MIME 类型`，因此您将需要配置您的 Web 服务器引擎以接受此扩展，否则下载它们时您会收到不同的 HTTP 错误。
如果您从 ASP.Net 应用程序使用 IIS 服务器，请在 web.config 文件的 `` 节点中添加以下 xml 行：
```xml
...
```
如果您使用的是 ASP.net 核心服务器，请在 `Startup` 类的 `Configure` 方法中添加以下：
```C#
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".mtl"] = "model/mtl";
provider.Mappings[".obj"] = "model/obj";
provider.Mappings[".glb"] = "model/gltf-binary";
provider.Mappings[".gltf"] = "model/gltf+json";
provider.Mappings[".fbx"] = "application/octet-stream";
provider.Mappings[".dae"] = "application/vnd.oipf.dae.svg+xml";
app.UseStaticFiles(new StaticFileOptions
{
ContentTypeProvider = provider
});
...
}
```
如果您使用的是 nginx 服务器，请将以下行添加到 `http` 对象中的 nginx.conf 文件中：
```
http {
include /etc/nginx/mime.types;
types {
model/mtl mtl;
model/obj obj;
model/gltf+json gltf;
model/gltf-binary glb;
application/octet-stream fbx;
application/vnd.oipf.dae.svg+xml dae;
}
...
}
```
如果您使用的是Apache服务器，请在mime中添加以下行。文件类型：
```
model/mtl mtl
model/obj obj
model/gltf+json gltf
model/gltf-binary glb
application/octet-stream fbx
application/vnd.oipf.dae.svg+xml dae
```
#### memory
```js
threeContext.memory() : Object
```
这将从 `THREE.WebGLRenderer.info` 返回成员`memory`
#### programs
```js
threeContext.programs() : int
```
这将从 `THREE.WebGLRenderer.info` 返回 `programs` 成员的长度
#### projectToWorld
```js
threeContext.projectToWorld(lnglat) : THREE.Vector3
```
计算给定 `lnglat` 对应的 `THREE.Vector3` 。它的逆方法是 `threeContext.unprojectFromWorld` 。
#### queryRenderedFeatures
```js
threeContext.queryRenderedFeatures(point) : Array
```
此方法使用 `THREE.Raycaster` 计算与拾取射线相交的对象，并返回场景中按距离从近到远排序的 threeContext 对象数组。将 `{x: number, y: number}` 的输入作为一个对象，其值表示屏幕坐标（由 Map 鼠标事件返回为 `e.point`）。
#### realSunlight
```js
threeContext.realSunlight([helper = true])
```
此方法为 threeContext 的“场景”创建模拟太阳光的照明。它创建一个 `THREE.HemisphereLight` 和一个 `THREE.DirectionalLight`，它基于 suncalc.js. 模块定位，该模块计算给定日期、时间、lng、lat 组合的太阳位置。它以 `map.getCenter` 和 `new Date()` 作为值在内部调用 `threeContext.setSunlight`。可以手动覆盖这些灯光，将自定义灯光添加到 threeContext `scene`。如果 `helper` 为真，则显示一个助手。
#### remove
```js
threeContext.remove(obj)
```
从 threeContext 场景和“threeContext.world.children”数组中移除对象的方法。
#### removeByName
```js
threeContext.removeByName(name)
```
从 threeContext 场景和 `threeContext.world.children` 数组中删除对象的方法，搜索对象及其子对象，从对象本身开始，并删除具有匹配名称的第一个对象。
#### removeLayer
```js
threeContext.removeLayer(layerId)
```
从 map 中移除图层的方法，包括 threeContext 场景中的所有 3D 对象和 `threeContext.world.children` 数组。
#### setLayerHeigthProperty
```js
threeContext.setLayerHeigthProperty(layerId, level)
```
设置关卡中所有对象高度的方法。此方法仅适用于对象具有 `GeoJson` 功能，并且在其属性中具有“级别”属性的情况。
#### setLayerZoomRange
```js
threeContext.setLayerZoomRange(layerId, minZoomLayer, maxZoomLayer)
```
自定义图层不适用于 minzoom 和 maxzoom 属性，因为每个图层都在渲染整个场景，并且如果图层包含标签，它们也不会在 minzoom 上隐藏。此方法设置任何自定义图层的缩放范围，并管理 3D 对象和 CSS2D 标签切换操作，与通过 `threeContext.setLayoutProperty` 设置的图层可见性同步。
#### setLayerZoomVisibility
```js
threeContext.setLayerZoomVisibility(layerId)
```
此方法根据当前缩放设置或重置图层可见性。不同的方法使用它来设置图层的可见性。
#### setLayoutProperty
```js
threeContext.setLayoutProperty(layerId, name, value)
```
当自定义图层受到影响时，此方法复制了`map.setLayoutProperty` 的行为，但它可以用于任何图层类型。
#### setObjectsScale
```js
threeContext.setObjectsScale()
```
此方法缩放来自 `threeContext.world.children` 的所有 `fixedZoom` 对象。
#### setStyle
```js
threeContext.setStyle(styleId[, options])
```
此方法复制`map.setStyle`的行为，以从 `threeContext.world` 中删除 3D 对象。这是对 `map.setStyle` 的直接传递，但它也在内部调用 `threeContext.clear(true)` 以从 `threeContext.world` 中删除子项，并处理这些对象保留的所有资源。
#### setSunlight
```js
threeContext.setSunlight(newDate = new Date(), coords)
```
该方法基于`suncalc.js.`模块更新太阳光位置，该模块计算给定日期、时间、lng、lat组合的太阳位置。它以 `map.getCenter` 和 `new Date()` 作为值在内部调用 `threeContext.setSunlight`。
#### toggleLayer
```js
threeContext.toggleLayer(layerId, visible)
```
此方法用于切换任何图层的可见性，但它是专门为自定义图层设计的。如果您想避免区分 map 图层（包括自定义图层），此方法将替换对 `map.setLayoutProperty(layerId, 'visibility', visible)` 的调用
#### update
```js
threeContext.update()
```
使用 `threeContext.loadObj(options, callback(obj))` 这可能是 threeContext 中最重要的方法，因为它负责调用 `THREE.WebGLRenderer.render(scene, camera)` 方法。
#### updateLightHelper
```js
threeContext.updateLightHelper()
```
这个方法更新了`threeContext.lights.dirLightHelper`的位置，如果我们想在灯光移动时看到助手正确渲染，就需要它。
#### updateSunGround
```js
threeContext.updateSunGround(sunPos)
```
如果 `threeContext.realSunlight` 为 `true`，此方法会根据太阳高度更新卫星样式（如果应用）上的光照。
#### updateSunSky
```js
threeContext.updateSunSky(sunPos)
```
如果 `threeContext.sky` 为 `true`，此方法会使用接收到的太阳位置更新天空大气层。
#### unprojectFromWorld
```js
threeContext.unprojectFromWorld(Vector3): lnglat
```
计算给定 [`THREE.Vector3`] 对应的 `lnglat`。它的逆方法是`threeContext.projectToWorld`。
#### versions
```js
threeContext.version() : string
```
这将返回 threeContext 的版本
- - -
### threeContext properties
在下面的所有示例中，threeContext 的实例将始终称为“tb”。
#### altitudeStep
```js
threeContext.altitudeStep : Number
```
此 getset 属性接收并返回垂直拖动对象时要使用的步长大小（以米为单位）。默认设置为 0.1 = 10cm。
#### defaultCursor
```js
threeContext.defaultCursor : string
```
此 getset 属性接收并返回地图画布容器 `this.getCanvasContainer().style.cursor` 的默认光标值，初始设置为 `'default'`。
#### enableDraggingObjects
```js
threeContext.enableDraggingObjects : Boolean
```
此 getset 属性接收并返回值以启用垂直或水平拖动使用 threeContext 创建的 3D 对象的选项。此属性要求将 `threeContext.enableSelectingFeature` 设置为 true。当此属性为 true 并且选择了一个对象时，按住 [Shift] 键并单击鼠标，该对象将在其 x-y 轴上（水平）移动。按住 [Ctrl] 键并单击鼠标，对象将在其 z 轴（垂直）上移动。当对象被放下时，这个拖动动作会触发 `ObjectDragged` 事件，可以按如下方式监听：
```js
obj.addEventListener('ObjectDragged', onDraggedObject, false)
```
此属性不影响 map 的“填充挤出”层。
#### enableRotatingObjects
```js
threeContext.enableRotatingObjects : Boolean
```
此getset属性接收并返回值，以启用垂直或水平拖动使用threeContext创建的3D对象的选项。此属性需要'threeContext'。enableSelectingFeature'设置为true。当此属性为true，并且选择了一个对象时，按住[Alt]键并单击鼠标，该对象将绕其z轴上的定位点旋转。按住[Ctrl]键并单击鼠标，对象将沿其z轴（垂直）移动。此拖动操作会在对象被丢弃时触发“ObjectDrawed”事件，可按如下方式监听：
```js
obj.addEventListener('ObjectDragged', onDraggedObject, false)
```
此属性不影响map“填充拉伸”图层。
#### enableSelectingFeatures
```js
threeContext.enableSelectingFeatures : Boolean
```
此getset属性接收并返回值，以启用从“填充拉伸”图层选择要素的选项。此属性不影响对三维对象的访问。此selectionunselection操作在选择或取消选择对象时触发“SelectedFeatureChange”事件（由于选择了其他功能而显式或隐式），可以按如下方式进行监听：
```js
obj.addEventListener('SelectedFeatureChange', onSelectedFeatureChange, false)
```
#### enableSelectingObjects
```js
threeContext.enableSelectingObjects : Boolean
```
此getset属性接收并返回值，以启用选择使用threeContext创建的三维对象的选项。此selectionunselection操作在选择或取消选择对象时触发“SelectedChange”事件（由于选择了其他对象而显式或隐式），可以按如下方式进行监听：
```js
obj.addEventListener('SelectedChange', onSelectedChange, false)
```
此属性不影响map“填充拉伸”图层。
#### enableTooltips
```js
threeContext.enableTooltips : Boolean
```
此getset属性接收并返回值，以使选项在对象上具有工具提示（自定义或默认）。此属性需要'threeContext'。enableSelectingFeature'设置为true。当此属性为true，并且对象被覆盖或选中时，将显示其工具提示。
#### fov
```js
threeContext.fov : Number (degrees)
```
默认情况下是`threeContextConstants.FOV_DEGREES`.
此getset属性设置并返回相机中使用的视野（FOV）的值。此值仅在“threeContext”时有效。`orthographic`为false，这意味着正在使用的相机是 `THREE.PerspectiveCamera` 。
#### gridStep
```js
threeContext.gridStep : Number(integer)
```
此getset属性接收并返回水平拖动对象时要使用的步骤的大小（以精度小数为单位），以减少map在其坐标中管理的小数数。默认情况下，此步骤的精度设置为6小数=11.1厘米，将此属性设置为7，网格将减少到1.1厘米。FOV的map最小值为“0.01”，因此，如果它收到“0”值，map地图会将其转换为“0.01”。使改变fov属性到它的最小值。
#### lights
```js
threeContext.lights : Object
```
此get\set属性接收并返回应用于场景的完整灯光集。
- `threeContext.lights.ambientLight` 由`threeContext.defaultLights()`方法用实例`THREE.AmbientLight`初始化，但可以手动重写。
- `threeContext.lights.dirLight` 可以通过`threeContext.defaultLights()`或`threeContext.setSunlight`使用实例`THREE.DirectionalLight`初始化。不建议使用[`realSunlight`]（realSunlight）属性覆盖此灯光。
- `threeContext.lights.dirLightHelper` 由[`threeContext.setSunlight`]（setSunlight）使用实例`THREE.DirectionalLightHelper`初始化。
- threeContext.lights.hemiLight` 由`threeContext.setSunlight`使用实例`THREE.HemisphereLight`初始化。
- `threeContext.lights.pointLight` 默认情况下未初始化。
#### multiLayer
```js
threeContext.multiLayer : Boolean
```
默认情况下为“false”。
此getset属性接收并返回值，以使选项具有多个3D层，其中将在内部创建一个默认层来管理“threeContext”。update calls尽管此值可以在运行时更改，但除非通过`threeContext` 进行样式更改，否则该值不会生效。设置样式`。因此，如果您知道页面可能有多个3D层，建议使用初始化参数 “multiLayer:true” 在构造函数中将其初始化为true。
#### orthographic
```js
threeContext.orthographic : Boolean
```
默认情况下为“false”。此getset属性设置并返回要使用的相机的值。
#### rotationStep
```js
threeContext.rotationStep : Number
```
此getset属性接收并返回拖动和旋转对象时要使用的步长大小（以度为单位）。默认情况下，该值设置为5。
#### sky
```js
threeContext.sky: Boolean
```
默认情况下为“false”。此属性由threeContext构造函数中的init参数'sky:true'设置。此getset属性设置并返回一个选项，使内置大气层最初设置为时间和地图中心位置。如果“realSunlight”也是真的，则该层会自动更新，但可以通过“threeContext”单独更新。updateSunSky（threeContext.getSunSky()）`方法调用。如果在创建大气天空层后将此属性设置为“false”，它将删除该层。
#### terrain
```js
threeContext.terrain: Boolean
```
默认情况下为“false”。此属性由threeContext构造函数中的init param`terrain:true`设置。此getset属性设置并返回具有内置地形层的选项。如果“realSunlight”也为真，则该层会自动更新，调整其光照，但可以通过“threeContext”单独更新。updateSunGround（threeContext.getSunPosition()）`方法调用。如果在创建地形层后将此属性设置为“false”，它将删除该层。
## Objects
threeContext提供了方便的函数，可以构建各种类型的网格。js网格，以及3D模型。在引擎盖下，它们调用`THREE.Object3D`的子类。物体分为两大类。静态对象放置后不会移动或更改，通常用于显示背景或地理特征。它们可能具有复杂的内部几何结构，主要以lnglat坐标表示。相比之下，动态对象可以在地图上移动，只需一个lnglat点即可定位。它们的内部几何图形主要在局部场景单元中生成，无论是通过外部obj文件还是下面这些方便的方法。
### Static objects
#### Line
```js
threeContext.line(options);
```
在完整的三维空间中向地图添加一条线。颜色渲染独立于场景照明。在内部，调用`custom line shader`。
|选项|必需|默认|类型|用途 |
|-----------|----------|---------|--------|----------------------------------------------------------------------------------------------|
| `geometry` | yes | NA | lineGeometry | 绘制直线的lnglat坐标数组 |
| `color` | no | black | color | 线条的颜色。与其他threeContext对象不同，无论场景照明如何，该颜色都将精确地按指定在屏幕上渲染 |
| `width` | no | 1 | number | 线条宽度。此宽度以显示像素为单位，而不是米或场景单位。 |
| `opacity` | no | 1 | Number | Line opacity |
### Dynamic objects
#### Extrusion
```js
threeContext.extrusion(options);
```
将拉伸形状添加到地图中。
|选项|必需|默认|类型|说明 |
|-----------|----------|---------|--------|-------|
| `coordinates` | no | [[[]]] or Vector2 array | 嵌套数组|遵循geoJson特性标准的嵌套数组。几何学用“多边形”或“坐标数组。 |
| `geometryOptions` | no | {} | Object | 对象，该对象包含以下选项`ExtradeGeometry`|
| `height` | no | 100 | Number |拉伸形状的长度。|
| `units` | no | `scene` | string ("scene" or "meters") | 用于解释对象顶点的单位。如果是米，threeContext也会随着纬度的变化重新缩放对象，使其看起来与附近的对象和地理位置成比例。|
| `scale` | no | 1 | number or {x, y, z} | 沿三个轴缩放对象，以便在未来变换之前适当调整其大小。请注意，未来的缩放将应用于此转换之上，而不是覆盖它`scale`属性必须以数字或每轴的形式提供（即，对于转换为比默认大小高3倍的对象，`比例：{x:1，y:1，z:3}`|
| `rotation` | no | 0 | number or {x, y, z} | 沿三个轴旋转对象，以便在未来旋转之前将其与所需方向对齐。请注意，未来的旋转将应用于此转换之上，并且不会覆盖它`rotate`属性必须以数字或每轴的形式提供（即，对于在x轴上旋转90度的对象，`旋转：{x:90，y:0，z:0}`|
| `materials` | no | `THREE.MeshPhongMaterial({ color: 0x660000, side: THREE.DoubleSide })` | threeMaterial or threeMaterials array |`THREE material `使用。可以通过文本字符串或预定义的材质对象本身调用。|
| `anchor` | no | `bottom-left` | string | 该参数将3D模型的关键中心定位到其定位的坐标上。它可以有以下值“top”、“bottom”、“left”、“right”、“center”、“top left”、“top right”、“bottom left”、“bottom right”。默认值为“左下角”` |
| `adjustment` | no | 1 | {x, y, z} | 对于几何图形，中心默认为{0,0,0}位置，这是用于定位和旋转的点。为了从地板计算中获得完美的定位和高度，这可以用标准化单位重新定义，“调整”参数必须以每个轴的单位提供（即“调整：{x:-0.5，y:-0.5，z:0}”，因此模型将校正对象的中心位置减去x轴长度的一半，减去y轴长度的一半）。如果使用此方法创建的立方体的默认中心位于0高度上的混凝土“lnglat”中，则该立方体的一半将位于地面地图标高以下，对象将位于其{x，y}中心，所以你可以定义`调整：{x:-0.5，y:-0.5，z:0.5}`来改变中心到左下角，而这个角正好在地平面上的'lnglat'位置`工具提示“|no | false | bool |此参数允许有或没有工具提示，默认情况下，该参数的值设置为“threeContext”。启用工具提示`|
| `bbox` | no | false | bool | 此参数允许有或没有边界框，默认情况下，该参数的值设置为'threeContext'。启用选择对象` |
| `raycasted` | no | true | bool | 此参数允许对光线投射单独隐藏对象 |
#### Label
```js
threeContext.label(options);
```
创建一个新的HTML标签对象，该对象可以通过`obj'定位。setCoords（coords）`然后通过'threeContext'添加到threeContext场景。加上（obj）`。在内部，此方法使用由 `THREE.css2drender`呈现的`CSS2DObject`创建`THREE的实例。CSS2DObject`将与'obj'关联。
|选项|必需|默认|类型|说明 |
|-----------|----------|---------|--------|-------|
| `htmlElement` | yes | null | htmlElement | HTMLElement将被呈现为`CSS2DObject` |
| `cssClass` | no | " label3D" | string | CssClass将被聚合以管理标签对象的样式。 |
| `alwaysVisible` | no | false | number | 宽度和高度段的数量。数字越大，球体越平滑。 |
| `topMargin` | no | -0.5 | int | 如果“topMargin”是以数字定义的，它将以单位添加到其垂直位置，其中1是对象高度。默认情况下，标签将位于对象的垂直中间（`topMargin:-0.5`）|
| `feature` | no | null | `GeoJson`功能|`GeoJson`功能分配给工具提示。它将用于动态定位|
#### Object3D
```js
threeContext.Object3D(options)
```
将任何几何体添加为`THREE.Object3D`或`THREE.Mesh`
|选项|必需|默认|类型|说明 |
|-----------|----------|---------|--------|------------|
| `obj` | yes | null |`THREE.Mesh`|要使用此方法添加新属性来丰富对象。 |
| `units` | no | `scene` | string ("scene" or "meters") | 用于解释对象顶点的单位。如果是米，threeContext也会随着纬度的变化重新缩放对象，使其看起来与附近的对象和地理位置成比例。|
| `anchor` | no | `bottom-left` | string |该参数将3D模型的关键中心定位到其定位的坐标上。它可以有以下值“top”、“bottom”、“left”、“right”、“center”、“top left”、“top right”、“bottom left”、“bottom right”。默认值为“左下角”`|
| `adjustment` | no | 1 | {x, y, z} |对于几何图形，中心默认为{0,0,0}位置，这是用于定位和旋转的点。为了从地板计算中获得完美的定位和高度，这可以用标准化单位重新定义，“调整”参数必须以每个轴的单位提供（即“调整：{x:-0.5，y:-0.5，z:0}”，因此模型将校正对象的中心位置减去x轴长度的一半，减去y轴长度的一半）。如果使用此方法创建的立方体的默认中心位于0高度上的混凝土“lnglat”中，则该立方体的一半将位于地面地图标高以下，对象将位于其{x，y}中心，所以你可以定义'adjustment:{x:-0.5，y:-0.5，z:0.5}'来改变中心到左下角，而这个角正好在地平面的'lnglat'位置。 |
| `tooltip` | no | false | bool |此参数允许有或没有工具提示，默认情况下设置为'threeContext'值。启用工具提示`|
| `bbox` | no | false | bool | 此参数允许有或没有边界框，默认情况下，该参数的值设置为'threeContext'。启用选择对象` |
| `raycasted` | no | true | bool | 此参数允许对光线投射单独隐藏对象 |
#### Sphere
```js
threeContext.sphere(options);
```
向地图添加一个球体。 在内部，使用 `THREE.SphereGeometry` 调用 `THREE.Mesh`，并调用 `Object3D(options)` 以将其转换为动态对象。
|选项|必需|默认|类型|说明 |
|-----------|----------|---------|--------|-------|
| `radius` | no | 50 | number | Radius of sphere. |
| `units` | no | `scene` | string ("scene" or "meters") | 用于解释对象顶点的单位。如果是米，threeContext也会随着纬度的变化重新缩放对象，使其看起来与附近的对象和地理位置成比例。|
| `sides` | no | 8 | number | 宽度和高度段的数量。数字越大，球体越平滑。 |
| `color` | no | black | color |球体的颜色。
| `material` | no | MeshLambertMate`THREE material` 使用。可以通过文本字符串或预定义的材质对象本身调用。|
| `anchor` | no | `bottom-left` | string | 该参数将3D模型的关键中心定位到其定位的坐标上。它可以有以下值“top”、“bottom”、“left”、“right”、“center”、“top left”、“top right”、“bottom left”、“bottom right”。默认值为“左下角”`|
| `adjustment` | no | 1 | {x, y, z} |对于几何图形，中心默认为{0,0,0}位置，这是用于定位和旋转的点。为了从地板计算中获得完美的定位和高度，这可以用标准化单位重新定义，“调整”参数必须以每个轴的单位提供（即“调整：{x:-0.5，y:-0.5，z:0}”，因此模型将校正对象的中心位置减去x轴长度的一半，减去y轴长度的一半）。如果使用此方法创建的立方体的默认中心位于0高度上的混凝土“lnglat”中，则该立方体的一半将位于地面地图标高以下，对象将位于其{x，y}中心，所以你可以定义'adjustment:{x:-0.5，y:-0.5，z:0.5}'来改变中心到左下角，而这个角正好在地平面的'lnglat'位置。 |
| `tooltip` | no | false | bool | 此参数允许有或没有工具提示，默认设置为 `threeContext.enableTooltips` |
| `bbox` | no | false | bool |此参数允许有或没有边界框，默认设置为 `threeContext.enableSelectingObjects` |
| `raycasted` | no | true | bool | 此参数允许对光线投射单独隐藏对象|
#### Tooltip
```js
threeContext.tooltip(options);
```
创建一个新的类似浏览器的工具提示对象，该对象可以通过“obj”定位。setCoords（coords）`然后通过'threeContext'添加到threeContext场景。加上（obj）`。在内部，此方法使用由`THREE.css2drender`呈现的`CSS2DObject`创建`THREE的实例。CSS2DObject`将与'obj'关联。工具提示`属性。
|选项|必需|默认|类型|说明 |
|-----------|----------|---------|--------|-------|
| `text` | yes | "" | string |将用于渲染为`CSS2DObject` |
| `cssClass` | no | "toolTip text-xs" | string | CssClass将被聚合以管理标签对象的样式。 |
| `mapStyle` | no | false | int | 如果“mapStyle”为true，则应用与Map弹出窗口相同的样式。|
| `topMargin` | no | 0 | int |如果“topMargin”是以数字定义的，它将以单位添加到其垂直位置，其中1是对象高度。默认情况下，标签将位于对象的顶部（`topMargin:0`）|
| `feature` | no | null | `GeoJson`功能|`GeoJson`功能分配给工具提示。它将用于动态定位 |
#### Tube
```js
threeContext.tube(options);
```
以等边多边形作为横截面，沿特定的线几何图形挤出管。在内部使用自定义管几何图形生成器，还可以使用“Object3D（选项）”将其转换为动态对象。
|选项|必需|默认|类型|说明 |
|-----------|----------|---------|--------|----------|
| `geometry` | yes | NA | lineGeometry | 形成管主干的线坐标 |
| `radius` | no | 20 | number | 管横截面的半径，或管宽度的一半。|
| `sides` | no | 8 | number | 沿管的面数。高度越高，管子越接近光滑圆柱体。 |
| `material` | no | MeshLambertMaterial | threeMaterial | [THREE material]（https:github.commrdoobthree.jstreemastersrcmaterials）使用。可以通过文本字符串或预定义的材质对象本身调用。|
| `color` | no | black | color | 管颜色。如果“material”是预定义的“THREE”，则忽略。实物。 |
| `opacity` | no | 1 | Number | 管不透明度|
| `anchor` | no | `bottom-left` | string | 该参数将3D模型的关键中心定位到其定位的坐标上。它可以有以下值“top”、“bottom”、“left”、“right”、“center”、“top left”、“top right”、“bottom left”、“bottom right”。默认值为“左下角”`|
| `adjustment` | no | 1 | {x, y, z} | 对于几何图形，中心默认为{0,0,0}位置，这是用于定位和旋转的点。为了从地板计算中获得完美的定位和高度，这可以用标准化单位重新定义，“调整”参数必须以每个轴的单位提供（即“调整：{x:-0.5，y:-0.5，z:0}”，因此模型将校正对象的中心位置减去x轴长度的一半，减去y轴长度的一半）。如果使用此方法创建的立方体的默认中心位于0高度上的混凝土“lnglat”中，则该立方体的一半将位于地面地图标高以下，对象将位于其{x，y}中心，所以你可以定义'adjustment:{x:-0.5，y:-0.5，z:0.5}'来改变中心到左下角，而这个角正好在地平面的'lnglat'位置。 |
| `tooltip` | no | false | bool | 此参数允许有或没有工具提示，默认设置为`threeContext.enableTooltips` |
| `bbox` | no | false | bool | 此参数允许有或没有边界框，默认设置为 `threeContext.enableSelectingObjects` |
| `raycasted` | no | true | bool | 此参数允许对光线投射单独隐藏对象 |
#### mapToWorld
```js
mapToWorld(coords);
```
地图几何坐标转threejs世界坐标.
#### worldToMap
```js
worldToMap(coords);
```
threejs世界坐标转地图几何坐标.
#### mapToWorldLength
```js
mapToWorldLength(coords);
```
地图几何长度转threejs世界坐标长度.
#### worldToMapLength
```js
worldToMapLength(coords);
```
threejs世界坐标长度转地图几何长度
#### getWorldSize
```js
getWorldSize();
```
threejs世界坐标总长度
#### loadTexture
```js
loadTexture(img, defaultImg);
```
加载材质，要使用base64图片，返回 `THREE.Texture` 对象.
#### coneMesh
创建一个四棱锥
```typescript
/**
* 创建一个四棱锥
**/
coneMesh(co: GeoPoint, opts?: {
size?: number /* 大小，默认 1024 */
height?: number /* 大小，默认 4096 */
color?: string | number /* 颜色，默认 0xffcc00 */
animation?: boolean /* 是否有动画，默认 true */
animationUpDown?: boolean /* 是否有上升下降动画。默认如果有z值就有动画，默认 true */
obj3dOpts?: object /* Object3D选项 */
}): any
```
选项参数列表:
|选项|必需|类型|说明 |
|-----------|----------|--------|----------|
| `size` | no | number | 大小，默认 1024 |
| `height` | no | number | 高，默认 4096 |
| `color` | no | string, number | 颜色，默认 0xffcc00 |
| `animation` | no | boolean | 是否有动画，默认 true |
| `animationUpDown` | no | boolean | 是否有上升下降动画。默认如果有z值就有动画，默认 true |
| `obj3dOpts` | no | number | Object3D选项 |
#### wall
创建一个立体光墙
```typescript
/**
* 创建一个立体光墙
**/
wall(pts: GeoPoint[], opts?: {
height?: number /* 立体光墙高度，默认 10000 */
flyline?: boolean /* 光墙旁边有飞线效果，默认有 */
repeatX?: number /* 光墙飞线纹理x重复贴图次数，默认 3 */
repeatY?: number /* 光墙飞线纹理y重复贴图次数，默认 3 */
offsetX?: number /* 光墙飞线纹理x动画每次偏移值，默认 0.02 */
offsetY?: number /* 光墙飞线纹理y重复贴图次数，默认 0 */
color1?: string | number /* 光墙飞线颜色，默认 0xffff00 */
texture1?: string /* 光墙飞线纹理图片 */
color2?: string | number /* 立体光墙颜色，默认 0x00ffff */
texture2?: string /* 立体光墙纹理图片 */
opacity?: number /* 立体光墙透明度，默认 0.5 */
obj3dOpts?: object /* Object3D选项 */
}): any
```
选项参数列表:
|选项|必需|类型|说明 |
|-----------|----------|--------|----------|
| `height` | no | number | 立体光墙高度，默认 10000 |
| `flyline` | no | boolean | 光墙旁边有飞线效果，默认有 |
| `repeatX` | no | number | 光墙飞线纹理x重复贴图次数，默认 3 |
| `repeatY` | no | number | 光墙飞线纹理y重复贴图次数，默认 3 |
| `offsetX` | no | number | 光墙飞线纹理x动画每次偏移值，默认 0.02 |
| `offsetY` | no | number | 光墙飞线纹理y重复贴图次数，默认 0 |
| `color1` | no | string , number | 光墙飞线颜色，默认 0xffff00 |
| `texture1` | no | number | 光墙飞线纹理图片 |
| `color2` | no | string , number | 立体光墙颜色，默认 0x00ffff |
| `texture2` | no | number | 立体光墙纹理图片 |
| `opacity` | no | number | 立体光墙透明度，默认 0.5 |
| `obj3dOpts` | no | object | Object3D选项 |
#### wave
创建一个波动光圈
```typescript
/**
* 创建一个波动光圈
**/
wave(co: GeoPoint, opts?: {
size?: number /* 大小，默认 3413 */
color?: string | number /* 颜色，默认 0x22ffcc */
texture?: string /* 波动光圈纹理图片 */
speed?: number /* 速度，默认 0.4 */
}): any
```
选项参数列表:
|选项|必需|类型|说明 |
|-----------|----------|--------|----------|
| `size` | no | number | 大小，默认 3413 |
| `color` | no | string , number | 颜色，默认 0x22ffcc |
| `texture` | no | string | 波动光圈纹理图片 |
| `speed` | no | number | 速度，默认 0.4 |
#### radialGradient
创建一个径向渐变球
```typescript
/**
* 创建一个径向渐变球
**/
radialGradient(co: GeoPoint, opts?: {
size?: number /* 大小，默认 10240 */
color?: string | number | any/* 颜色，默认 new THREE.Vector3(0.0,1.0,1.0) */
speed?: number /* 速度，默认 0.02 */
}): any
```
选项参数列表:
|选项|必需|类型|说明 |
|-----------|----------|--------|----------|
| `size` | no | number | 大小，默认 10240 |
| `color` | no | string , number |颜色，默认 new THREE.Vector3(0.0,1.0,1.0) |
| `speed` | no | number | 速度，默认 0.02 |
#### radar
创建一个扫描雷达
```typescript
/**
* 创建一个扫描雷达
**/
radar(co: GeoPoint, opts?: {
size?: number /* 大小，默认 20480 */
color1?: string | number /* 雷达扫描颜色，默认 0x00ffff */
texture1: string /* 雷达扫描纹理图片 */
color2?: string | number /* 雷达刻度颜色，默认 0x00cccc */
texture2: string /* 雷达刻度纹理图片 */
speed?: number /* 速度，默认 0.02 */
}): any
```
选项参数列表:
|选项|必需|类型|说明 |
|-----------|----------|--------|----------|
| `size` | no | number | 大小，默认 20480 |
| `color` | no | string , number |雷达扫描颜色，默认 0x00ffff |
| `texture1` | yes | string | 雷达扫描纹理图片 |
| `color2` | no | string , number |雷达刻度颜色，默认 0x00cccc |
| `texture1` | yes | string | 雷达刻度纹理图片 |
| `speed` | no | number | 速度，默认 0.02 |
#### waveWall
创建一个波动光圈
```typescript
/**
* 创建一个波动光圈
**/
waveWall(co: GeoPoint, opts?: {
size?: number /* 大小，默认 10240 */
height?: number /* 大小，默认 2000 */
color?: string | number /* 颜色，默认 0x00ffff */
texture?: string /* 纹理图片 */
speed?: number /* 速度，默认 0.1 */
opacity?: number /* 透明度，默认 0.5 */
}): any
```
选项参数列表:
|选项|必需|类型|说明 |
|-----------|----------|--------|----------|
| `size` | no | number | 大小，默认 10240 |
| `height` | no | number |高 ，默认 2000|
| `color` | no | string , number |颜色，默认 0x00ffff |
| `texture` | no | string | 纹理图片 |
| `speed` | no | number | 速度，默认 0.1 |
| `opacity` | no | number | 透明度，默认 0.5 |
#### flyline
创建一条飞行线
```typescript
/**
* 创建一条飞行线
**/
flyline(opts: {
source: GeoPoint, /* 起点 */
target: GeoPoint /* 终点，*/
height?: number /* 插值中点值的高度 */
size?: number /* 粒子大小，默认 3 */
color: string | number /* 颜色 */
color2?: string | number /* 如果需要渐变颜色，设置这个值 */
count?: number /* 粒子总数 默认 1000 */
range?: number /* 显示粒子的范围数，默认 500 */
opacity?: number /* 透明度，默认 1.0 */
speed?: number /* 速度，默认 1 */
}): any
```
选项参数列表:
|选项|必需|类型|说明 |
|-----------|----------|--------|----------|
| `source` | yes | GeoPoint | 起点 |
| `target` | yes | GeoPoint | 终点 |
| `size` | no | number | 粒子大小，默认 30 |
| `height` | no | number |插值中点值的高度|
| `color` | yes | string , number |颜色 |
| `color2` | no | string , number |如果需要渐变颜色，设置这个值 |
| `count` | no | number | 粒子总数 默认 1000 |
| `range` | no | number | 显示粒子的范围数，默认 500 |
| `speed` | no | number | 速度，默认 1 |
| `opacity` | no | number | 透明度，默认 1.0 |
---
### Object methods
#### addCSS2D
```js
obj.addCSS2D(element, objName [, center = obj.anchor, height = 0])
```
这是一种通用方法，它使用收到的Dom Htmlement在屏幕上相对于包含它的对象的相对位置绘制它。
`objName` 需要命名对象，并可能删除以前的对象。
`center`定义将渲染标签的位置，默认情况下为对象定位`obj.anchor`.
`height` 定义此对象位置，其中0为对象底部，1为对象顶部，默认情况下为对象的底部中心（0）。
#### addHelp
```js
obj.addHelp(helpText [,objName = helpName, mapSyle = false, center = obj.anchor, height = 0])
```
此方法创建一个类似浏览器的帮助工具提示实例，可通过“obj”访问该实例。救命。此帮助工具提示仅在拖动对象以进行平移、旋转或高度更改时可见。如果“mapStyle”为true，则应用与Map弹出窗口相同的样式。
`center` 定义将渲染标签的位置，默认情况下为对象定位 `obj.anchor`.
`height`定义此对象位置，其中0为对象底部，1为对象顶部，默认情况下为对象的底部中心（0）。
#### addLabel
```js
obj.addLabel(HTMLElement [, visible, center = obj.anchor, height = 0.5])
```
它使用收到的DOM HtmleElement在屏幕上相对于包含它的对象的位置绘制它。
如果“visible”为true，则标签将始终可见，否则默认情况下其值为false，其常规行为仅显示在鼠标上方。
`center` 定义将渲染标签的位置，默认情况下为对象定位 `obj.anchor`.
`height` 定义此对象位置，其中0为对象底部，1为对象顶部，默认情况下为对象的中间中心（0.5）.
#### addTooltip
```js
obj.addTooltip(tooltipText [, mapSyle = false, center = obj.anchor, custom = true, height = 1])
```
此方法使用tooltipText为对象创建类似浏览器的工具提示。如果“mapStyle”为true，则应用与Map弹出窗口相同的样式。
`center` 定义将渲染标签的位置，默认情况下为对象定位`obj.anchor`.
`custom` 除非工具提示是由threeContext自动生成的，否则对于用户显式添加的工具提示，始终为true.
`height` 定义此对象位置，其中0为对象底部，1为对象顶部，默认情况下为对象的顶部中心（1）。
#### copyAnchor
```js
obj.copyAnchor(anchor)
```
复制在中内部使用的锚属性`obj.duplicate`.
#### drawBoundingBox
```js
obj.drawBoundingBox
```
此方法使用创建两个边界框 [`THREE.Box3Helper`](https://threejs.org/docs/#api/en/helpers/BoxHelper)
第一个边界框将被指定给 `obj.boundingBox` 属性，第二个将被分配给 `obj.boundingBoxShadow`.
#### drawLabelHTML
```js
obj.drawLabelHTML(HTMLElement [, visible = false, center = obj.anchor])
```
它使用接收到的 DOM [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) 将其绘制在屏幕上与包含它的对象的相对位置。
如果 `visible` 为 true，则标签将始终可见，否则默认情况下其值为 false，并且它的常规行为仅在 MouseOver 上显示。
`center` 定义了在 3D 对象中通过 `options.adjustment` 参数定义的对象位置和旋转中心。 由于标签是
根据物体的中心计算，这个值会改变物体的位置。
它的位置始终相对于包含它的对象，并在该标签可见时重新渲染。
在内部，此方法使用由 [`THREE.CSS2DRenderer`](https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer) 渲染的 `CSS2DObject` 来创建 `THREE.CSS2DObject` 的实例，该实例将是 关联到 `obj.label` 属性。
#### duplicate
```js
obj.duplicate()
```
返回对象的克隆。通过重用材料和几何图形，在处理多个相同对象时，性能提高约95%。
#### removeCSS2D
```js
obj.removeCSS2D(objName)
```
通过'objName.CSS2DObject'的实例并处置其资源。
#### removeHelp
```js
obj.removeHelp()
```
移除 `obj.help` 中存储的 `CSS2DObject` 实例。
它在内部调用 `obj.removeCSS2D` 方法。
#### removeLabel
```js
obj.removeLabel()
```
移除 `obj.label` 中存储的 `CSS2DObject` 实例。它在内部调用 `obj.removeCSS2D` 方法。
#### removeTooltip
```js
obj.removeTooltip()
```
移除 `obj.tooltip` 中存储的 `CSS2DObject` 实例。它在内部调用 `obj.removeCSS2D` 方法。
#### set
```js
obj.set(options)
```
只需一次调用即可更新对象的位置、旋转和缩放的广泛方法。它在内部调用 `obj._setObject(options)` 方法。如果 `options.duration` 有值，此方法也可用于为对象设置动画。查看下面的类型部分了解详细信息。
**options object on animations (`duration > 0`)**
| option | required | default | type | description |
|-----------|----------|---------|--------|------------|
| `coords` | no | NA | `lnglat` |将对象移动到的位置 |
| `rotation` | no | NA | `rotationTransform` |旋转以设置对象，以度为单位 |
| `scale` | no | NA | `scaleTransform` | 缩放以设置对象，其中1是默认比例 |
| `duration` | no | 1000 | number | 动画的持续时间，以毫秒为单位，以完成其他属性“缩放”、“旋转”和“坐标”中指定的值。如果为0或未定义，它将直接将值应用于对象，而无需动画。 |
**options object without animations (`duration == 0`)**
| option | required | default | type | description |
|-----------|----------|---------|--------|------------|
| `position` | no | NA | `lnglat` |将对象移动到的位置 |
| `rotation` | no | NA | `rotationTransform` |旋转以设置对象，以度为单位 |
| `scale` | no | NA | `scaleTransform` | 缩放以设置对象，其中1是默认比例|
| `worldCoordinates` | no | NA | `Vector3` | 动画的持续时间，以毫秒为单位，以完成其他属性“缩放”、“旋转”和“坐标”中指定的值。如果为0或未定义，它将直接将值应用于对象，而无需动画。 |
| `quaternion` | no | NA | [`Vector3`, `radians`] | 旋转设置为“Vector3”接收的轴，以弧度为单位设置角度|
| `translate` | no | NA | `lnglat` |增量到坐标位置以平移对象。 |
| `worldTranslate` | no | NA | `Vector3` | 增量到对象世界位置以平移对象。|
#### setAnchor
```js
obj.setAnchor(anchor)
```
从字符串参数自动设置位置和关键锚点。动态计算位置锚和关键锚`anchor`是一个字符串值，可以有以下值：`top`、`bottom`、`left`、`right`、`center`、`top left`、`top right`、`bottom left`、bottom right`。定位精度的默认值为“左下角”
#### setBoundingBoxShadowFloor
```js
obj.setBoundingBoxShadowFloor()
```
每次对象接收到新坐标以将 obj.boundingBoxShadow 定位在地板的高度时，都会从 obj.setCoords 调用此方法。
因此，通过这种方式，如果一个对象改变了它的高度，阴影框总是投影在地板上，拖动它更容易可视化、定位和旋转。
#### setCoords
```js
obj.setCoords(lnglat)
```
将对象定位在定义的 `lnglat` 坐标处，如果它是用 `units: "meters"` 实例化的，则适当调整其大小。可以在将对象添加到地图之前调用。
#### setFixedZoom
```js
obj.setFixedZoom(scale)
```
根据 `fixedZoom` 值设置用于转换对象的比例。接收到的参数 `scale` 应该总是等于 `map.transform.scale`。该方法是从 obj.setScale 和其他加载方法中调用的，因此不需要在 UI 之外单独调用。
#### setObjectScale
```js
obj.setObjectScale(scale)
```
设置用于转换对象的比例，考虑对象当前 `obj.unitsPerMeter` 并取决于对象以 `scene` 或 `meters` 为单位。接收到的参数 `scale` 应该总是等于 `map.transform.scale`。此方法在内部依次调用 `obj.setScale(scale)`、`obj.setBoundingBoxShadowFloor()`、`obj.setReceiveShadowFloor()`。
#### setRotation
```js
obj.setRotation(xyz)
```
在 3 个轴上将对象旋转到其定义的中心，该值必须以度为单位提供，并且可以是数字（它将将旋转应用于 3 个轴）或作为 {x, y, z} 对象。此旋转应用在通过 loadObj(options) 提供的旋转之上。
#### setRotationAxis
```js
obj.setRotationAxis(xyz)
```
在 z 轴上的一个底角上旋转对象，该值必须以度为单位提供，并且可以是数字（它将旋转应用于 3 个轴）或作为 {x, y, z} 对象。此旋转应用在通过 loadObj(options) 提供的旋转之上。
#### setScale
```js
obj.setScale(scale)
```
设置用于转换对象的比例，考虑对象当前 `obj.unitsPerMeter` 并取决于对象以 `scene` 或 `meters` 为单位。接收到的参数 `scale` 应该总是等于 `map.transform.scale`，如果它为 null，则使用 `obj.userData.mapScale` 代替。此方法在内部调用 `obj.setFixedZoom`。
#### setTranslate
```js
obj.setTranslate(lnglat)
```
将对象从其当前位置移动，添加 `lnglat` 坐标。不要将此方法与 `obj.setCoords` 混淆 该方法必须在将对象添加到地图后调用。
### Object properties
在下面的所有示例中，threeContext 对象的实例将始终称为“obj”。
#### boundingBox
```js
obj.boundingBox : THREE.Box3Helper
```
此 getset 属性接收并返回一个 `THREE.Box3Helper`，其中包含初始大小的对象。 `boundingBox` 表示对象在 MouseOver（黄色）或 Selected（绿色）上时可见。根据 threeContext 的设计，`.boundingBox` 对于 `THREE.Raycaster` 是隐藏的，即使它对相机可见。 TODO：在 threeContext 的下一个版本中，此对象材质将是可配置的。在这个版本中仍然在 Objects.prototype 中预定义
#### boundingBoxShadow
```js
obj.boundingBoxShadow : THREE.Box3Helper
```
此 getset 属性接收并返回一个 `THREE.Box3Helper`，其中包含初始大小但高度为 0 的对象，并独立于其高度位置投影到地图的地板上，因此它充当形状的影子。 `boundingBoxShadow` 表示一旦对象在 MouseOver 上或以黑色选择时可见。根据 threeContext 的设计，`.boundingBoxShadow` 对于 `THREE.Raycaster` 是隐藏的，即使它对相机可见。 TODO：在 threeContext 的下一个版本中，此对象材质将是可配置的。在这个版本中仍然在 Objects.prototype 中预定义
#### castShadow
```js
obj.castShadow : boolean
```
此 getset 属性接收并返回对象选项的值以投射阴影。它创建一个以对象为中心的具有“THREE.PlaneBufferGeometry”和“THREE.ShadowMaterial()”的平面，以对象的最长维度（x、y、z）大小投影阴影并将其设为 10大几倍，才能容纳完整的影子。
#### color
```js
obj.color : integer hex
```
此 getset 属性从十六进制值接收并返回颜色值。此方法调用 `color.setHex`
#### help
```js
obj.help : CSS2DObject
```
此 get 属性返回一个 `CSS2DObject` `THREE.CSS2DObject` 值，该值表示由 `obj 创建的 `THREE.Object3D` 的帮助工具提示.addHelp` 方法，在拖动时显示旋转、平移或高度变化的值。尽管这是可访问的，但这是一个内部对象，仅在对象上的拖放操作中可见。
#### hidden
```js
obj.hidden : boolean
```
此 getset 属性接收并返回对象隐藏状态的值。此属性覆盖 `obj.visibility` 的值。
#### fixedZoom
```js
obj.fixedZoom : Number
```
此 getset 属性接收并返回低于对象在任何缩放级别具有固定比例的缩放值。超过该值，对象将像往常一样重新缩放。此属性对于需要在非常低的缩放级别上可见的模型（即描述世界航线的飞机）非常有用，但它们也需要在缩放较高时可见。重要的是要知道 `fixedZoom` 将使用 `scene` 单位的模型，而不是 `meters`。
#### label
```js
obj.label : CSS2DObject
```
此 get 属性返回一个 `CSS2DObject` `THREE.CSS2DObject` 值，该值表示由 `obj. addLabel 方法。标签可以用作在鼠标悬停时显示或始终可见的元素。它通常用于显示对象的属性或状态，并且可以包含任何 HTMLElement。
#### modelHeight
```js
obj.modelHeight : Number
```
此 get 属性以米为单位返回对象的高度。
#### raycasted
```js
obj.raycasted : boolean
```
如果为 false，此 getset 属性接收并返回一个布尔值以隐藏 `THREE.Raycaster` 中的 `THREE.Object3D` 。默认情况下，所有对象对于 raycaster 都是可见的。这个值可以默认通过 `threeContext.loadObj` 或 `threeContext.Object3D` 初始化。
#### receiveShadow
```js
obj.receiveShadow : boolean
```
此 getset 属性接收并返回接收阴影的对象选项的值。
#### tooltip
```js
obj.tooltip : CSS2DObject
```
此 get 属性返回一个 `CSS2DObject``THREE.CSS2DObject` 值，该值表示由 `obj. addTooltip` 方法。默认情况下，工具提示显示对象的 `uuid` 值，并且只有在 `threeContext.enableTooltips` 为 true 时才可见。
#### unitsPerMeter
```js
obj.unitsPerMeter : Number
```
此 get 属性返回对象当前纬度处每米单位的转换值。
#### visibility
```js
obj.visibility : boolean
```
此 getset 属性接收并返回一个布尔值以覆盖 `THREE.Object3D` 的属性 `visible`，还为 `obj.label` 和 `obj 添加相同的可见性值.tooltip` 该属性被 `obj.hidden` 覆盖，因此如果 `obj.hidden` 为 false，`obj.visibility` 将被忽略。根据 threeContext 的设计，`.boundingBoxShadow` 对于 `THREE.Raycaster` 是隐藏的，即使它对相机可见。
#### wireframe
```js
obj.wireframe : boolean
```
此 getset 属性接收并返回一个布尔值，以在线框或纹理中转换 `THREE.Object3D` 。根据 threeContext 的设计，只要将对象转换为线框，它也会对 `THREE.Raycaster` 隐藏，即使它对相机可见。
---
### Object events
在下面的所有示例中，threeContext 对象的实例将始终称为“obj”
#### IsPlayingChanged
```js
obj.addEventListener('IsPlayingChanged', onIsPlayingChanged, false)
```
一旦对象改变其动画播放状态，就会触发此事件，这意味着它将在对象动画开始和停止播放时触发。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 `eventArgs.detail` 中返回更改的对象的实例。
```js
map.addLayer({
...
threeContext.loadObj(options, function (model) {
soldier = model.setCoords(origin);
soldier.addEventListener('IsPlayingChanged', onIsPlayingChanged, false);
threeContext.add(soldier);
})
...
});
...
function onIsPlayingChanged(eventArgs) {
if (e.detail.isPlaying) {
//do something in the UI such as changing a button state
}
else {
//do something in the UI such as changing a button state
}
}
```
#### ObjectChanged
```js
obj.addEventListener('ObjectChanged', onObjectChanged, false)
```
当对象被任何方法（包括动画）更改时会触发此事件。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 `eventArgs.detail` 中返回更改的对象实例，对对象执行的操作可能是以下一项或多项： - `position`：定义为 lnglat + alt 坐标（即 `[-122.43471544901193 , 37.73719686062993, 0]`), `undefined` 如果更改不影响位置。 - `rotation`：定义为 Vector3 格式的弧度（即`{x: 0, y: 0, z: -3.026900303641103}`），如果更改不影响旋转，则为`undefined`。 - `scale`：定义为 Vector3（即`{x: 1, y: 1, z: 1}`），, `undefined` 如果更改不影响比例。
```js
map.addLayer({
...
threeContext.loadObj(options, function (model) {
model.setCoords(origin);
model.addEventListener('ObjectChanged', onObjectChanged, false);
threeContext.add(model);
})
...
});
...
function onObjectChanged(e) {
let object = e.detail.object; // the object that has changed
let action = e.detail.action; // the action that defines the change
//do something in the UI such as changing a button state or updating the new position and rotation
}
```
#### ObjectDragged
```js
obj.addEventListener('ObjectDragged', onDraggedObject, false)
```
当一个对象改变被拖放到不同的位置时，该事件被触发，并且只有在 `map.once('mouseup'` 和 `map.once('mouseout'` 时触发一次。该事件可以随时监听一次正在执行 `threeContext.loadObj` 回调方法。在 `eventArgs.detail` 中返回更改的对象的实例，如果对象已旋转，则在拖动期间所做的操作可能是 `"rotate"`如果对象已移动到其他位置，则它的中心轴或“平移”“高度”。
```js
map.addLayer({
...
threeContext.loadObj(options, function (model) {
soldier = model.setCoords(origin);
soldier.addEventListener('ObjectDragged', onDraggedObject, false);
threeContext.add(soldier);
})
...
});
...
function onDraggedObject(e) {
let draggedObject = e.detail.draggedObject; // the object dragged
let draggedAction = e.detail.draggedAction; // the action during dragging
//do something in the UI such as changing a button state or updating the new position and rotation
}
```
#### ObjectMouseOver
```js
obj.addEventListener('ObjectMouseOver', onObjectMouseOver, false)
```
当鼠标指针悬停在对象上时会触发此事件。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 `eventArgs.detail` 中返回更改的对象的实例。
```js
map.addLayer({
...
threeContext.loadObj(options, function (model) {
soldier = model.setCoords(origin);
soldier.addEventListener('ObjectMouseOver', onObjectMouseOver, false);
threeContext.add(soldier);
})
...
});
...
function onObjectMouseOver(e) {
//do something in the UI such as adding help or showing this object attributes
}
```
#### ObjectMouseOut
```js
obj.addEventListener('ObjectMouseOut', onObjectMouseOut, false)
```
当鼠标指针离开已被越过的对象时触发此事件。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 `eventArgs.detail` 中返回更改的对象的实例。
```js
map.addLayer({
...
threeContext.loadObj(options, function (model) {
soldier = model.setCoords(origin);
soldier.addEventListener('ObjectMouseOut', onObjectMouseOut, false);
threeContext.add(soldier);
})
...
});
...
function onObjectMouseOut(e) {
//do something in the UI such as removing help
}
```
#### SelectedChange
```js
obj.addEventListener('SelectedChange', onSelectedChange, false)
```
一旦一个对象改变了它的选择状态，这个事件就会被触发，这意味着它会在一个对象被选中或取消选中时被触发。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 `eventArgs.detail` 中返回更改的对象的实例。
```js
map.addLayer({
...
threeContext.loadObj(options, function (model) {
soldier = model.setCoords(origin);
soldier.addEventListener('SelectedChange', onSelectedChange, false);
threeContext.add(soldier);
})
...
});
...
function onSelectedChange(e) {
let selectedObject = e.detail; //we get the object selected/unselected
let selectedValue = selectedObject.selected; //we get if the object is selected after the event
}
```
#### SelectedFeature
```js
map.on('SelectedFeature', onSelectedFeature)
```
此事件由 threeContext 触发，使用与 map 相同的模式 `feature-state` `select` 和 `hover` TODO 一旦对象改变其选择状态，这意味着它会在对象被选择或未选择时触发。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 `eventArgs.detail` 中返回更改的对象的实例。
```js
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': 'floorplan',
'paint': {
// See the map Style Specification for details on data expressions.
// Get the fill-extrusion-color from the source 'color' property.
'fill-extrusion-color':
[
'case',
['boolean', ['feature-state', 'select'], false],
'#ffff00',
['boolean', ['feature-state', 'hover'], false],
'#0000ff',
['get', 'color']
],
// Get fill-extrusion-height from the source 'height' property.
'fill-extrusion-height': ['get', 'height'],
// Get fill-extrusion-base from the source 'base_height' property.
'fill-extrusion-base': ['get', 'base_height'],
// Make extrusions slightly opaque for see through indoor walls.
'fill-extrusion-opacity': 0.5
}
});
//selected extrusion feature event
map.on('SelectedFeature', onSelectedFeature);
...
function onSelectedFeature(e) {
let selectedObject = e.detail; //we get the object selected/unselected
let selectedValue = selectedObject.selected; //we get if the object is selected after the event
}
```
#### Wireframed
```js
obj.addEventListener('Wireframed', onWireframed, false)
```
一旦对象更改其线框状态，就会触发此事件，这意味着它将在对象再次进行线框或纹理化时触发。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 `eventArgs.detail` 中返回更改的对象的实例。
```js
map.addLayer({
...
threeContext.loadObj(options, function (model) {
soldier = model.setCoords(origin);
soldier.addEventListener('Wireframed', onWireframed, false);
threeContext.add(soldier);
})
...
});
...
function onWireframed(e) {
if (e.detail.wireframe) {
//do something in the UI such as changing a button state
}
else {
//do something in the UI such as changing a button state
}
}
```
---
### Object animations
#### playDefault
```js
obj.playDefault(options)
```
播放加载的三维模型的默认嵌入动画。
**options object**
|选项|必需|默认|类型|说明 |
|-----------|----------|---------|--------|------------|
| `duration` | no | 1000 | number |动画的持续时间，以毫秒为单位 |
| `speed` | no | 1 | number | 此值更改“obj”。搅拌机。正在播放的动画的时间刻度，其中1是动画的默认持续时间，<1将使动画变慢，>1将使动画变快 |
#### playAnimation
```js
obj.playAnimation(options)
```
播放加载的三维模型的一个嵌入动画。必须在“选项”属性中设置动画索引。动画`
**options object**
| option | required | default | type | description |
|-----------|----------|---------|--------|------------|
| `animation` | yes | NA | number | 三维模型中动画的索引。如果你需要检查动画的索引，你可以使用'obj'获得完整的数组。动画`。|
| `duration` | no | 1000 | number | 动画的持续时间，以毫秒为单位 |
| `speed` | no | 1 | number |此值更改“obj”。搅拌机。正在播放的动画的时间刻度，其中1是动画的默认持续时间，<1将使动画变慢，>1将使动画变快 |
#### followPath
```js
obj.followPath(options [, callback] )
```
沿指定路径平移对象。动画结束时执行的可选回调函数
|选项|必需|默认|类型|说明 |
|-----------|----------|---------|--------|------------|
| `path` | yes | NA | lineGeometry | 对象要遵循的路径 |
| `duration` | no | 1000 | number | 沿路径移动的持续时间，以毫秒为单位 |
| `trackHeading` | no | true | boolean | 旋转对象，使其在整个动画中与移动方向保持对齐 |
#### stop
```js
obj.stop()
```
停止对象的所有当前动画。
- - -
## threeContext types
#### pointGeometry
`[longitude, latitude(, meters altitude)]`
由2-3个数字组成的数组，代表经度、纬度和可选高度（以米为单位）。如果省略高度，则假定为0。从`GeoJson`点填充此数组时，可以在`点访问此数组。几何学坐标`。虽然`GeoJson`规范中没有标准化海拔高度，但threeContext将接受这样的海拔高度来沿z轴定位对象。
#### lineGeometry
`[pointGeometry, pointGeometry ... pointGeometry]`
由至少两个lnglat组成的阵列，形成一条直线。当从`GeoJson`行字符串填充此数组时，可以通过`Linestring'访问此数组。几何学坐标`。
#### rotationTransform
`number` or `{x: number, y: number, z: number}`
旋转对象的角度（以度为单位）。可以表示为对象或数字。对象形式沿三个主轴采用三个可选参数：x平行于赤道，y平行于纵线，z垂直于地平面。数字形式沿z轴旋转，相当于“{z:number}”。
#### scaleTransform
`number ` or `{x: number, y: number, z: number}`
缩放对象的数量，其中1是默认大小。可以表示为对象或数字。这三个轴与“旋转变换”的轴相同。然而，以数字形式表示时，所有三个轴都会按该数量进行缩放。
#### threeMaterial
`string` or instance of `THREE.Material()`
表示用于对象的材质。这通常可以通过'color'和'opacity'参数进一步定制，其中的'opacity'参数可以表示为对应材质类型的字符串（例如'THREE.MeshPhysicalMaterial()''的'MeshPhysicalMaterial'，或直接预建的THREE材质。
- - -
## Performance considerations
- 使用`obj.duplicate()` 当添加许多相同的对象时。如果您的对象包含不在`obj.children` 的集合，那么这些对象也需要克隆。
**`threejs`具体用法请参考[threejs](https://threejs.org/)官网**
### 示例
####
```js
(async () => {
// --threejs 3d线--
// 地图服务对象
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: env.exampleMapId, // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
message.error(res.error)
}
// 获取地图范围
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapExtent);
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), // 样式，这里是栅格样式
center: prj.toLngLat(mapExtent.center()),
zoom: 2,
pitch: 60,
antialias:true,
renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
// 根据地图本身范围缩放地图至全图显示
//map.fitMapBounds();
await map.onLoad();
const mapBounds = map.getGeoBounds(0.6);
if (typeof vjThree !== "object") {
// 如果没有环境
await vjmap.addScript([{
src: "js/plugins/vjthree.min.js"
},{
src: "js/plugins/vjthree.min.css"
}])
}
const threeContext = map.createThreeJsContext({
defaultLights: true
});
const arcSegments = 25;
const lineQuantity = 50;
for (let i = 0; i < lineQuantity; i++){
const line = [];
const destination = [300*(Math.random()-0.5), 140*(Math.random()-0.5)];
const maxElevation = Math.pow(Math.abs(destination[0]*destination[1]), 0.5) * 80000;
const increment = destination.map(function(direction){
return direction/arcSegments;
})
for (let l = 0; l<=arcSegments; l++){
const waypoint = increment.map(function(direction){
return direction * l
})
const waypointElevation = Math.sin(Math.PI*l/arcSegments) * maxElevation;
waypoint.push(waypointElevation);
line.push(waypoint);
}
const lineOptions = {
geometry: line,
color: (line[1][1]/180) * 0xffffff, // color based on latitude of endpoint
width: Math.random() + 1 // random width between 1 and 2
}
let lineMesh = threeContext.line(lineOptions);
threeContext.add(lineMesh)
}
map.addLayer(new vjmap.ThreeLayer({context: threeContext}));
})();
```