l-plugin-three

描述

该插件主要使用threeJs封装了glb、gltf等模型加载显示

安装

npm install l-plugin-three

导入

import modules from "l-plugin-three";
Vue.prototype.modules = modules;
或
import modules from "l-plugin-three";

使用

使用前需把statics文件夹所以内容复制到public文件夹里
//初始化场景
let viewer = new modules.Viewer('viewer-container'); 

销毁场景

viewer.beforeDestroy();

设置场景容器宽高

viewer.setWidthHeight(1920, 1080);

设置场景背景颜色

viewer.setBackground('rgb(4,4,4)');

开启鼠标事件

//双击dblclick  //单击click
let mouseEvent1;  //鼠标事件名称
viewer.startSelectEvent(mouseEvent1, 'dblclick', false, (model) => {
    // 开启模型旋转或停止旋转
    // viewer.controls.autoRotate = !viewer.controls.autoRotate;
});

关闭鼠标事件

viewer.stopSelectEvent();

加载外部模型

let modeLoader = new modules.ModelLoder(viewer);
modeLoader.loadModelToScene('***.glb', _model => {
    _model.object.position.set(0, 0, 0);
    _model.object.scale.set(1, 1, 1);
    _model.object.rotation.set(0, 0, 0);
}, (progress) => {
    console.log(progress);
});

开启Gui工具

let positionVo={
  min:-100,
  max:100,
  step:1,
};
let scaleVo={
  min:-1000,
  max:1000,
  step:0.01,
};
viewer._initGui(_model.object,positionVo,scaleVo);