npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

stl3d

v3.11.919

Published

load stl npm

Downloads

164

Readme

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