[TOC]

依赖下载

npm install [email protected] --save

导入

import { EventTypes, Viewer } from "plant-3d-viewer";

基础配置

页面新增一块div容器

<template>
  <div id="content"></div>
</template>

通过document.querySelector("#content")来获取指定容器

var viewer = new Viewer(document.querySelector("#content"), {
        urls: ["/data/factory.glb","/data/factory1.glb"],
        imgurl: "/data/files/hall.jpg",
        imgurl2: "/data/files/hall2.jpg",
        imgurl3: "/data/files/water.jpg",
      });

参数说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------ | ------------ | ------------ | ------------ | | urls | 三维模型路径，相对路径 | array | 必填 | --- | | isShowPanel | 是否显示右侧面板 | bol | 必填 | --- | | imgurl | 模型外围全景图，背景贴图,切换不同场景 | string | 可选 | --- | | imgurl2 | 模型外围全景图，背景贴图，切换不同场景 | string | 可选 | --- |

主要方法及调用示例

resetAnimation (动画重置）， playAnimation (gltf模型中的动画)

var button = document.getElementById('testButton2');
button.onclick = function () {
    //动画重置（还原模型）
    viewer.resetAnimation();
    viewer.playAnimation(7, 1, 0.6);
};

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------ | ------------ | ------------ | ------------ | | Num | 动画数组对应编号 | int | 可选 | 无 | | viewOption | 控制是否拉近,1为拉近，0为否 | int | 可选 | 无 | | scale | 相机拉近比例，范围0-1 | double | 可选 | 无 |

FitObjView (为选中的部件，打开‘部件视角’的效果)

var button = document.getElementById('testButton4');
button.onclick = function () {
    viewer.FitObjView('中亚转子');
};

roam（进入漫游模式，设置相机位置）

var button = document.getElementById('testButton5');
button.onclick = function () {
    viewer.roam();
};

autoPlay (园区导览自动播放接口)

var button = document.getElementById('testButton1');
button.onclick = function () {
    viewer.autoPlay();
};

事件回调方式处理函数

SELECTION_CHANGED_EVENT （模型选中事件）

viewer.addEventListener(EventTypes.SELECTION_CHANGED_EVENT, (obj) => console.log(`Object selected: ${obj.uuid}`));

CLICK_POSITION_EVENT （模型点位选中坐标标点事件）

//设置模型点击位置状态
viewer.setClickPositionState(true);
viewer.addEventListener(EventTypes.CLICK_POSITION_EVENT, (obj) => console.log(`position: ${obj.x} -- ${obj.y} -- ${obj.z}`));

SCENE_CHANGE_EVENT (场景切换事件，目前在漫游，导览的时候触发)

viewer.addEventListener(EventTypes.SCENE_CHANGE_EVENT, (obj) => console.log(obj));

MODEL_ROOT_LOADED_EVENT (模型加载完成的时候触发)

viewer.addEventListener(EventTypes.MODEL_ROOT_LOADED_EVENT, (obj) => console.log(`模型加载已完成`));

ANIMATION_PLAY_END (动画播放结束时触发)

viewer.addEventListener(EventTypes.ANIMATION_PLAY_END,(o) => {
  console.log("动画播放结束：" + o.isPlayEnd)
})