plant-3d-viewer v0.3.1

TOC

依赖下载

npm install plant-3d-viewer@0.0.2 --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",
      });

参数说明

主要方法及调用示例

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

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

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)
})