Viewer

三维视图对象是三维应用的入口对象，挂载了渲染管理器、相机控制器、场景管理器及常用方法。

// 实例化一个viewer
const viewer = new VT.Viewer(option);

属性成员

option

初始化配置参数如下：

{
    // 挂载HTMLElement对象
    "container": "",

    // 调试开关
    "debugger": {
        "enable": false,
        "showFPS": false,
        "showMilliseconds": false,
        "showMemory": false
    },

    // 默认视点
    "view": {
        "center": [
            0,
            0,
            0
        ],
        "far": 100000,
        "near": 0.05,
        "position": [
            6.2791192837739676,
            4.285399942474187,
            5.194127521520281
        ],
        "fov": 45,
        "aspect": null,
        "isOrtho": false
    },

    // 交互配置
    "interact": {
        // 是否允许交互
        "enabled": true,
        "mouseButtonLeft": "rotate",
        "mouseButtonRight": "pan",
        "mouseButtonWheel": "dolly",
        "mouseButtonMiddle": "pan",
        "dollySpeed": 0.5,
        "truckSpeed": 2
    },
    // 渲染器参数
    "renderer": {
        // 强制渲染
        "forceRender": true,

        // FPS帧率
        "fps": 60,
        // 像素比例
        "devicePixelRatio": 1,
        // 后处理
        "postEffect": {
            "enable": false,
            "bloom": {
                "enable": false,
                "strength": 0.14,
                "radius": 0.4,
                "threshold": 0.7
            },
            "SSAO": {
                "enable": false,
                "kernelRadius": 0.2,
                "kernelSize": 12
            },
            "colorCorrection": {
                "enable": false,
                "exposure": 0,
                "brightness": 0,
                "contrast": 1,
                "saturation": 1,
                "gamma": 0.6
            },
            "FXAA": {
                "enable": true
            },
            "outline": {
                "enable": true,
                "edgeStrength": 2,
                "edgeGlow": 1,
                "edgeThickness": 0.5,
                "pulsePeriod": 0,
                "visibleEdgeColor": "#ed2a2a",
                "hiddenEdgeColor": "#190a05"
            }
        }
    },
}

sceneManager

场景管理器，详见scenemanager

• 类型：{SceneManager}

scene

当前场景

• 类型：{VT.Scene}

rendererManager

渲染器管理器，详见rendererManager

• 类型：{RendererManager}

isMobileDevice

是否为移动端设备，不可修改

• 类型：{Boolean}

size

渲染器窗口大小

• 类型：{Object} {x, y}

fullscreen

是否为全屏，可修改

• 类型：{Boolean}

// 设置全屏
viewer.fullscreen = true;

spriteComputeParameter

标注计算参数，自动计算，不可修改

• 类型：{Number}

方法

resize

调整渲染器容器窗口大小，一般在挂载的容器节点container发生大小或位置变化时调用，触发resize事件。

• 类型：Function
• 参数：无
• 返回：无

// 监听页面resize事件
window.addEventListener("resize", () => {
    viewer.resize();
});

addControl

添加UI控件，主要用于UI控件

• addControl(control, position)
• 类型：Function
• 参数：
  • control {VT.Control} 控件对象
  • position {String} 位置 POSITION
• 返回：VT.Control

// 创建指北针
const compassControl = new VT.CompassControl();

// 添加指北针控件
viewer.addControl(compassControl, "bottomleft");

removeControl

删除UI控件，主要用于UI控件

• removeControl(control)
• 类型：Function
• 参数：
  • control {VT.Control} 控件对象
• 返回：VT.Control

setFullscreen

设置是否全屏

• setFullscreen(value)
• 类型：Function
• 参数：
  • value {Boolean} 是否全屏
• 返回：无

// 监听全屏事件
viewer.addEventListener("fullscreen", () => {
    // 代码执行
});

// 设置全屏
viewer.setFullscreen(true);


// 监听全屏退出事件
viewer.addEventListener("exitFullscreen", () => {
    // 代码执行
});

// 退出全屏
viewer.setFullscreen(false);

setView

设置当前视点和相机状态

• setView(view, enableTransition)
• 类型：Function
• 参数：
  • view {Object} 视点参数
  • enableTransition {Boolean} 是否开启过渡动画
• 返回：无

const view = {
    "center": [
        0,
        0,
        0
    ],
    "far": 100000,
    "near": 0.05,
    "position": [
        6.2791192837739676,
        4.285399942474187,
        5.194127521520281
    ],
    "fov": 45,
    "aspect": null,
    "isOrtho": false
};

viewer.setView(view, true);

getView

获取当前视点和相机状态

• getView(requestAspect)
• 类型：Function
• 参数：
  • requestAspect {Boolean} 是否保存当前窗口比例，默认不保存
• 返回：{Object}

const view = viewer.getView();

将返回：

{
    "center": [
        0,
        0,
        0
    ],
    "far": 100000,
    "near": 0.05,
    "position": [
        6.2791192837739676,
        4.285399942474187,
        5.194127521520281
    ],
    "fov": 45,
    "aspect": null,
    "isOrtho": false
}

getAspect

获取当前渲染器窗口的比例

• getAspect()
• 类型：Function
• 参数：无
• 返回：{Number}

pick

获取鼠标事件的拾取结果

• pick(event)
• 类型：Function
• 参数：
  • event {Object} 事件，必须包含clientX、clientY坐标：{clientX, clientY}
• 返回：{Object}
  • picked {Object} 拾取对象
    • picked {THREE.Object3D} 拾取的物体，过滤了一些不必要的物体，如不可见的、锁定的
    • raycasterPicked {THREE.Object3D} 经过射线拾取的物体，未过滤
    • raycasterSceneHelpersPicked {THREE.Object3D} 辅助场景拾取结果
  • position {Array} 拾取的三维坐标

const picked = viewer.pick({clientX: 155, clientY: 50});

coordScreenToWorldWithPick

使用pick方式将屏幕坐标转三维坐标

• coordScreenToWorldWithPick(x, y, height, filter)
• 类型：Function
• 参数：
  • x Number 屏幕的X坐标
  • y Number 屏幕的Y坐标
  • height Number 可选，拾取高度无效时的高度
  • filter Function 可选，对象过滤方法，参数为pick结果
• 返回：{Array} 三维坐标

// 过滤方法
function filter({picked, raycasterPicked, raycasterSceneHelpersPicked}) {
    // 代码
}

const position = viewer.coordScreenToWorldWithPick(155, 50, 0.1, filter);

coordScreenToWorld

屏幕坐标转三维坐标

• coordScreenToWorld(x, y, height)
• 类型：Function
• 参数：
  • x Number 屏幕的X坐标
  • y Number 屏幕的Y坐标
  • height Number 可选，拾取高度无效时的高度
• 返回：{Array} 三维坐标

const position = viewer.coordScreenToWorld(155, 50);

coordWorldToScreen

屏幕坐标转三维坐标

• coordWorldToScreen(x, y, z)
• 类型：Function
• 参数：
  • x Number 三维x坐标
  • y Number 三维y坐标
  • z Number 三维z坐标
• 返回：{Object} 二维坐标 {x, y}

const position = viewer.coordWorldToScreen(1.55, 2.5, 4.3);

getPixelLength

求两个三维坐标的屏幕像素距离

• getPixelLength(vertexA, vertexB)
• 类型：Function
• 参数：
  • vertexA THREE.Vector3|Array 三维坐标A
  • vertexB THREE.Vector3|Array 三维坐标B
• 返回：{Number}

const distance = viewer.getPixelLength([0, 0, 0], [0, 1.5, 0]);

getSize

获取窗口大小

• getSize()
• 类型：Function
• 参数：无
• 返回：{Object} 二维坐标 {x, y}

trigger

主动触发事件，模拟或远控事件

• trigger(eventType, event)
• 类型：Function
• 参数：
  • eventType String 事件类型，支持 click, mousedown, mouseover, dblclick, contexmenu
  • event Object 事件
• 返回：无

viewer.trigger("click", {clientX: 155, clientY: 50});

captureScreenshot

保存当前场景为图片，截图，可返回base64编码或下载文件

• captureScreenshot(option)
• 类型：Function
• 参数：
  • option Object 截图参数，以下均为可选
    • filename {String} 文件名称
    • mime {String} 图片类型，默认image/jpeg，可选 image/png
    • quality {Number} 质量，默认 0.8
    • saveAsFile {Boolean} 是否另存为，默认false
    • width {Integer} 图片宽度
    • height {Integer} 图片高度
• 返回：{String|undefined} 返回base64编码或下载文件

// 获取场景截图 base64 编码
viewer.captureScreenshot({
    quality: 0.5,
    width: 320,
    height: 240
});

// 下载场景图片
viewer.captureScreenshot({
    filename: "scene.jpg",
    mime: "image/jpeg",
    quality: 1.0,
    saveAsFile: true,
});

setCursor

设置鼠标样式

• setCursor(cursor)
• 类型：Function
• 参数：
  • cursor String 鼠标样式
• 返回：无

initExplodeModel

初始化展开效果模型，在调用explodeModel展开模型方法前，必须要先调用本方法。

• initExplodeModel(modelObject)
• 类型：Function
• 参数：
  • modelObject VT.Model 模型
• 返回：无

explodeModel

展开模型，模型构件爆炸效果

• explodeModel(modelObject, scalar)
• 类型：Function
• 参数：
  • modelObject VT.Model 模型
  • scalar Number 比例
• 返回：无

// 添加模型
const model = new VT.Model({
    modelType: "gltf",
    src: "./resources/models/1.gltf"
});
viewer.scene.add(model);

// 初始化模型展开
viewer.initExplodeModel(model);

// 展开模型
viewer.explodeModel(model, 2.0);

destroy

销毁实例

• destroy()
• 类型：Function
• 参数：无
• 返回：无