196 lines
7.5 KiB
TypeScript
196 lines
7.5 KiB
TypeScript
/**
|
||
* MxThreeJS 模块
|
||
* ##### 使用说明:
|
||
*
|
||
* > 基于three.js实现创建直线对象、加载图片、SVG等功能，以下是使用的流程:
|
||
* - 模块中大部分方法返回的{@link http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/core/Object3D | THREE.Object3D}类型继承创建的对象都可以通过取点对象{@link MrxDbgUiPrPointClass.value} 得到鼠标对应位置
|
||
* - {@link MrxDbgUiPrPointClass.go}和{@link MrxDbgUiPrPointClass.goWhile}方法监听鼠标点击事件回调中通过
|
||
* - {@link MxDrawObject.addObject} 方法添加到场景{@link MxDrawObject.getScene}中
|
||
* - 最后调用{@link MxFun.updateDisplay} 更新视图显示完成
|
||
*
|
||
* > 提示: 在实际开发中MxThreeJS是配合着{@link MxDrawObject} 和 {@link MrxDbgUiPrPointClass} 完成绘制线段、文字、图片等功能,当然你也可以使用{@link http://www.yanhuangxueyuan.com/threejs/docs/index.html | three.js}来完成MxThreeJS模块的这些工作
|
||
*
|
||
* > 该模块导出库时已实例化为对象，只需要调用实例方法 例如：
|
||
*
|
||
* ```typescript
|
||
* // html
|
||
* <button id="line">line</button>
|
||
*
|
||
* // js
|
||
* import Mx from "mxdraw"
|
||
* import Three from "three"
|
||
* Mx.loadCoreCode().then(()=> {
|
||
* Mx.MxFun.setMxServer()
|
||
* Mx.MxFun.createMxObject({
|
||
* callback(mxDraw, dom) {
|
||
* document.getElementById("line").onclick = ()=> {
|
||
* const getPoint = new Mx.MrxDbgUiPrPointClass()
|
||
* let lastPt, isLine
|
||
* getPoint.goWhile(()=> {
|
||
* const pt1 = getPoint.value()
|
||
* if(isLine) {
|
||
* const line = Mx.MxThreeJS.createLine(pt1, lastPt, 0xffffff)
|
||
* const currentDraw = Mx.MxFun.getCurrentDraw()
|
||
* currentDraw.addObject(line)
|
||
* Mx.MxFun.updateDisplay()
|
||
* }
|
||
* lastPt = pt1.clone()
|
||
* isLine = !isLine
|
||
* })
|
||
* }
|
||
* }
|
||
* })
|
||
* })
|
||
* ```
|
||
*/
|
||
export declare class MxThreeJS {
|
||
/**
|
||
* 创建Three.js直线对象。
|
||
* @param vPt1 {@link http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/math/Vector3 | THREE.Vector3} 点1
|
||
* @param vPt2 {@link http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/math/Vector3 | THREE.Vector3} 点2
|
||
* @param iColor 颜色Color
|
||
* @returns {@link http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/objects/Line |THREE.Line}
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.createLine(new Three.Vector3(1,10,0), new Three.Vector3(1,300,0), 0)
|
||
* ```
|
||
*/
|
||
createLine(vPt1: THREE.Vector3, vPt2: THREE.Vector3, iColor: number | string | THREE.Color): THREE.Line;
|
||
/**
|
||
* 创建Three.js圆对象。
|
||
* @param mCenterPt 圆中心点
|
||
* @param dRadius 圆半径
|
||
* @param iColor 颜色
|
||
* @returns THREE.Object3D
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.createCircle(new Three.Vector3(1,10,0), 10, 0)
|
||
* ```
|
||
*/
|
||
createCircle(mCenterPt: THREE.Vector3, dRadius: number, iColor: number | string | THREE.Color): THREE.Object3D;
|
||
/**
|
||
* 创建Three.js点对象。
|
||
* @param mPt 点位置
|
||
* @param iColor 颜色
|
||
* @param size 大小
|
||
* @returns THREE.Points
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.createPoint(new Three.Vector3(1,10,0), 0)
|
||
* ```
|
||
*/
|
||
createPoint(mPt: THREE.Vector3, iColor: number | string | THREE.Color, size?: number): THREE.Points;
|
||
/**
|
||
* 创建Three.js 文字
|
||
* @param message 文字信息
|
||
* @param pt 位置
|
||
* @param iSize 文字大小
|
||
* @param fAngle 旋转角度
|
||
* @param iColor 颜色
|
||
* @returns THREE.Sprite
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.creatTextSprite("hello",new Three.Vector3(1,10,0), 90, 60, 0)
|
||
* ```
|
||
*/
|
||
creatTextSprite: (message: string, pt: THREE.Vector3, iSize: number, fAngle: number, iColor: number | string | THREE.Color) => THREE.Sprite | null;
|
||
/**
|
||
* 计算creatTextSprite函数，创建的文字对象，的尺寸.
|
||
* @param message 文字信息
|
||
* @param iHeight 文字大小
|
||
* @param iWidth 文字宽度.
|
||
* @returns {spritewidth:number,spriteheight:number,textwidth:number,singleline:boolean}
|
||
* @example
|
||
* ```typescript
|
||
*
|
||
* ```
|
||
*/
|
||
clacTextSpriteSize: (message: string, iHeight: number, iWidth?: number) => {
|
||
spritewidth: number;
|
||
spriteheight: number;
|
||
textwidth: number;
|
||
singleline: boolean;
|
||
};
|
||
/**
|
||
* 计算文字宽度.
|
||
* @param message 文字信息
|
||
* @param iHeight 文字大小
|
||
* @returns number
|
||
* @example
|
||
* ```typescript
|
||
*
|
||
* ```
|
||
*/
|
||
clacTextSize: (message: string, iHeight: number) => number;
|
||
/**
|
||
* 根据三角形数组，创建Three.js Mesh
|
||
* @param points 由三个点组成的数组
|
||
* @param iColor 颜色
|
||
* @param opacity 透明度
|
||
* @returns THREE.Mesh
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.createTriangle(
|
||
* [new THREE.Vector3(1,2,2),new THREE.Vector3(1,65,4),new THREE.Vector3(12,2,2)],
|
||
* 0,
|
||
* 1
|
||
* )
|
||
* ```
|
||
*/
|
||
createTriangle(points: Array<THREE.Vector3>, iColor: number | string | THREE.Color, opacity?: number): THREE.Mesh | null;
|
||
/**
|
||
* 创建连续直线
|
||
* @param points 由多个点组成的数组
|
||
* @param iColor 颜色
|
||
* @returns THREE.Line
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.createLines([new THREE.Vector3(1,2,2),new THREE.Vector3(1,65,4),new THREE.Vector3(12,2,2)], 0)
|
||
* ```
|
||
*/
|
||
createLines(points: Array<THREE.Vector3>, iColor: number | string | THREE.Color): THREE.Line;
|
||
/**
|
||
* 创建虚线
|
||
* @param points 由多个点组成的数组
|
||
* @param iColor 颜色
|
||
* @param dashSize 短划线的大小
|
||
* @param gapSize 短划线之间的距离
|
||
* @returns THREE.Line
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.createDashedLines([new THREE.Vector3(1,2,2),new THREE.Vector3(1,65,4),new THREE.Vector3(12,2,2)], 10, 20, 2)
|
||
* ```
|
||
*/
|
||
createDashedLines(points: Array<THREE.Vector3>, iColor: number | string | THREE.Color, dashSize: number, gapSize: number): THREE.Line;
|
||
/**
|
||
* 创建Image
|
||
* @param pos 图片中心点位置,屏幕坐标，屏幕坐标的Y轴向上。坐标原点在左下角.
|
||
* @param w 图片宽度
|
||
* @param h 图片高度
|
||
* @param imageUrlPath 图片URl地址
|
||
* @param callResult 图片加载完成的回调 回调参数：THREE.Mesh
|
||
* @returns void
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.createImage(new THREE.Vector3(12,2,2), 10, 20, "../img/icon.png", (mesh)=> {
|
||
* console.log(mesh)
|
||
* })
|
||
* ```
|
||
*/
|
||
createImage: (pos: THREE.Vector3, w: number, h: number, imageUrlPath: string, callResult?: (mesh: THREE.Mesh | null) => void) => void | Promise<THREE.Mesh | null>;
|
||
/**
|
||
* 加载SVG
|
||
* @param url SVG路径地址,该函数具有缓存功能，下次加载同样的图片，可以直接返回.
|
||
* @param color 颜色
|
||
* @param callResult SVG加载完成的回调 回调参数：THREE.Object3D和Array<THREE.MeshBasicMaterial>
|
||
* @returns void | THREE.Object3D | null
|
||
* @example
|
||
* ```typescript
|
||
* Mx.MxThreeJS.loadSVG("../img/icon.svg", 10, 20, 1.5, new THREE.Color(0xff0000), (threeobj, aryMeterial)=> {
|
||
* console.log(threeobj, aryMeterial)
|
||
* })
|
||
* ```
|
||
*/
|
||
loadSVG: (url: string, color?: number | string | THREE.Color, callResult?: (threeobj: THREE.Object3D, aryMeterial: Array<THREE.MeshBasicMaterial>) => void, loadSet?: any) => Promise<THREE.Object3D | null>;
|
||
}
|