/** * 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 * * * // 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, 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, 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, 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; /** * 加载SVG * @param url SVG路径地址,该函数具有缓存功能,下次加载同样的图片,可以直接返回. * @param color 颜色 * @param callResult SVG加载完成的回调 回调参数:THREE.Object3D和Array * @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) => void, loadSet?: any) => Promise; }