stl3d

1 npm 包使用说明

注意：1.stl 模型正中心位于原点 2.导出以 m 为单位，坐标系 前进方向需调整为型材 L 方向

1.1 页面需要 div，如下

1.2 安装 npm 包

npm i stl3d

1.3 使用包 初始化 3d 场景

import * as tool from 'stl3d';

tool.stlTool.StlScene.SetGlobalParameter({enableUI:true}) //true-启用内置 ui false-关闭内置 ui 当 web 已经做好交互后，设置成 false 即可

let threeScene = new tool.stlTool.StlScene();

threeScene.Init();

threeScene.DoLoadSTL(); //加载测试模型

1.4 stl 数据结构

class StlModel { name?: string; //名字
width?: number; //宽度 单位 m height?: number; //高度 单位 m depth?: number; //深度 单位 m url?: string; //文件路径 center?:{x:float, y:float, z:float}; //中心点坐标 holes: Array; //空位信息 }

1.5 监听事件

tool.stlTool.EventBus.Event.on('click_face', value => { console.log('click_face receive', value); });

1.点击面事件 click_face 参数 { face: string } face：a/b/c/d/l/r

2.点击锁定按钮事件 lock_face 参数 { status: boolean }

3.锁定面情况下，每个 1s 发送坐标/最大/最小值 参数 { pos: {x:number,y:number}, min: {x:number,y:number}, max: {x:number,y:number} } pos:坐标 min：最小 xy 值 max:最大 xy 值 单位 m

4.吸附状态 事件名 attach 参数{ x: boolean, y: boolean };

1.6 其他 api

1.ChangeCameraMode(value:number) 切换相机模式
参数: value 0-透视 1-直视

2.ChangeCameraPos(value:string) 切换相机位置,左手坐标系 前-z 后+z 左-x 右+x 上+y 下-y 参数: 组合方式 (Left/Center/Right) + (Top/Center/Bottom) + (Front/Center/Back)   如左上前:'LeftTopFront' LRABCD 面参数分布如下: L:'CenterCenterFront' R:'CenterCenterBack' A:'CenterBottomCenter' B:'LeftCenterCenter' C:'CenterTopCenter' D:'RightCenterCenter'

3.ChangeCameraDraw（type?: number） 切换模型显示模式 参数:0-颜色+线框  1-颜色  2-线框

4.ChangeColor（） 切换模型颜色（黑色和白色互切）

5.DoSetAxis（value:boolean） 控制全局坐标系是否显示

6.SetGlobalParameter(option?: {  enableMark: false,enableEdgesRendering?: boolean; enableUI?: boolean,enableAxis: boolean }) StlScene 的静态方法，设置全局参数，在 new 对象前面设置 enableMark：设置是否默认显示标注 默认值 false enableEdgesRendering：是否显示描边 默认值 false enableUI：是否显示内置 ui 默认值 false enableAxis：是否现在轴 默认 flase

7.DoMark(face: string, value: boolean) 控制 abcdlr 面标注显示 face: 面，取值 a b c d l r 大小写不敏感 vale:是否显示 补充说明:1.切换面时候会自动关闭之前打开的面标注，最多只允许一个面显示在界面中 2.设置 d 面显示，是切换相机，然后加载 d 面的标尺数据 此时在 d 面隐藏，只是关闭 d 面标尺数据，不会重置当前视角

8.DoLoading（） 显示加载状态

9.DoSetBomInfo(value:boolean) 显示隐藏 bom 信息提示

10.threeScene.DoLoadSTL(StlModel); 加载 stl 数据

11.threeScene.DoCleanSTL(); 清除 stl 数据

12.threeScene.DoSetParam(info?: { stepAccuracy?: number }) ; 设置参数 stepAccuracy 是步长参数 0.1 0.01 0.005 0.001

13.threeScene.DoSetCenterPosition(x = 0, y = 0); 设置中心点坐标

14.threeScene.DoLoadSTLString(json?: string) 加载 stl json

15.threeScene.threeDMgr.ResetCamera(stl：StlModel) 调整相机到 L 视角，第一次传入 stl 调用此方法，如果 stl 模型类型或者长度发生改变需要再次调用，单纯打孔操作则不需要调用

16.tool.stlTool.StlScene.SetGlobalParameter(option?: { debugShowInfo?: boolean; enableMark?: boolean; enableAxis?: boolean; LRSize?: number; SideSize?: number; isIos?: boolean }) 设置全局参数

debugShowInfo：debug 模式 默认 false enableAxis：是否开启坐标系 默认 false LRSize： lr 大小 默认 4 SideSize：边大小 默认 1.15 isIos：是否是苹果设备 默认 false

17.threeScene.DoCleanLock() 清楚锁定场景 ui

18.threeScene.DoClean() 清楚所有，DoCleanLock + DoCleanSTL

19.threeScene.DoSetLWF(l, w, f) 设置 lwf 的值

6.SetClearColor(r?: number, g?: number, b?: number) StlScene 的静态方法，设置全局参数，在 new 对象前面设置 下面范围 0-1，不传默认为现有颜色 r 默认值： 26 / 255 g 默认值： 30 / 255 b 默认值： 34 / 255