0.1.0 • Published 5 months ago

eye_points v0.1.0

Weekly downloads
-
License
ISC
Repository
-
Last release
5 months ago

eye_points

文档版本

版本日期作者说明

使用安装

npm i eye_points

使用示例

//	导入包
import {EPoint} from 'eye_points'

//	初始化窗口
const gmirror = new EPoint(new EPoint("modelBox", {
                resetCameraDivId:"resetCamera",
                ambientLightColor: 0xff0000,
                ambientLightIntensity: 0.5,
                clearColor:0xb9d3ff,
                showGridHelper:false,
                showAxesHelper:false,
				initScale:0.01
            }));

//	选择展示头模
gmirror..chooseHead('http://xxxxxx.obj', 'http://yyyyyy.jpg');

新增功能

// 眼部图片导出
// 侧脸图片
const ERsideCameraShot = await this.exportCameraShot("ERSIDE");
console.log('ERsideCameraShot',ERsideCameraShot)

// 侧脸俯视图
const ETsideCameraShot = await this.exportCameraShot("ETSIDE");
console.log('ETsideCameraShot',ETsideCameraShot);

// 左眼图
const LEYEsideCameraShot = await this.exportCameraShot("LEYE");
console.log('LEYEsideCameraShot',LEYEsideCameraShot)
        
// 右眼图
const REYEsideCameraShot = await this.exportCameraShot("REYE");
console.log('REYEsideCameraShot',REYEsideCameraShot);

主要结构/导出函数说明

//	初始化参数
interface InitOption{
    resetCameraDivId:string;		//	重置摄像头DIV ID
	ambientLightColor:number;		//	环境光颜色
	ambientLightIntensity:number;	//	环境光强度
	clearColor:number;			//	底色
	showGridHelper:boolean;		//	显示网格？
	showAxesHelper:boolean;		//	显示坐标轴？
	initScale:number;			//	初始化比例
	fixScale:number;				//	真实模型修正值
	showBoundBox:boolean;		//	显示bounding box
	cameraHelperEnable:boolean;	//	CameraHelper 可选项（用于开发）
	subScreenVisible:boolean;	//	子屏幕是否可见
}

/**
 * 头部信息
 */
interface IHeadModleData {
	PD: number;	//	瞳距- 
	DBL: number;//	鼻根距-
	eyeSocketHeight: number;		//	眼窝高
	eyeSocketLeftWidth: number;		//	眼窝宽(左)
	eyeSocketRightWidth: number;		//	眼窝宽(右)
	faceWidth: number;		//	面宽（太阳穴距离）-
	earToEarDistance: number;	//	双耳距
	earEyeDistanceH: number;	//	耳眼距（水平）
	earEyeDistanceV: number;	//	耳眼距（垂直）
	Panto: number;		//	前倾角
}

/**
 * 眼镜变化参数
 */
interface GlassesParams {
	PD: number;	//	瞳距
	bridgeWidth: number;	//	鼻梁(桥)距
	frameHeight: number;	//	镜框高
	frameLeftWidth: number;	//	镜框宽(左)
	frameRightWidth: number;	//	镜框宽(右)
	frameWidth: number;//	镜框总宽
	glassesWidth: number; 	//	眼镜总宽
	templeLength: number;	//	镜腿长度
	Panto: number;		//	前倾角
	VD: number;		//	镜眼距	
	frameColor: number;
	templeColor: number;
	frameMapUrl: string;	//	镜框贴图
	templeMapUrl: string; 	//	镜腿贴图
	frameMaterialUrl: string;	//	镜框材质
	templeMaterialUrl: string;	//	镜腿材质
	templeAngleLeft: number;   //左镜腿角度，角度制
	templeAngleRight: number;  //右镜腿角度，角度制
	positionOffsetX:number;   //眼镜左右微调数值
	positionOffsetY:number;   //眼镜上下微调数值
	positionOffsetZ:number;   //眼镜前后微调数值
}

//	关键点
interface IKeyPoint2D{
	name: string;
	x: number;
	y: number;
}

//	加载眼镜的参数配置
interface LoadGlassesParam {
	frame_url: string, 			//	镜框模型url
	legLeftUrl: string,			//	左镜腿模型 url
	legRightUrl: string, 		//	右镜腿模型 url
	modelInfo: Partial<IGlassesModleData>, 	//	模型的信息数据(来自于眼镜编辑器)
	adjustParam: Partial<GlassesParams>	//	调整的参数
}

//	模型的信息数据
interface IGlassesModleData {
    ////////和调节无关的数据，是为了适配的数据，相应数据减去Area的宽度就是不可调节的宽度，这部分模型数据放哪里比较好
    /**
     * 镜框整体宽度，
     * 鼻梁宽度+左右镜框宽度+左右拐角宽度+不可调节部分的宽度=总宽度
     */
    frameWidthTotal: number,
    /**
     * 左镜框宽度
     */
    frameWidthLeft: number,
    /**
     * 右镜框宽度
     */
    frameWidthRight: number,
    /**
     * 鼻梁宽度,
     */
    bridgeWidth: number,
    /**
     * 左镜框拐角宽度
     */
    frameCornerWidthLeft: number,
    /**
     * 右镜框拐角宽度
     */
    frameCornerWidthRight: number,
    /**
     * 镜框高度
     */
    frameHeight: number,
    /**
     * 镜脚长度，只算庄头到耳朵顶点，其他用不着
     */
    footLength: number

    ////////////几何调节的数据//////////
    /**
     * 鼻梁基准中心点，对应鼻梁108位置
     */
    bridgeCenter: Vector3,
    /**
     * 鼻梁处可拉伸范围
     */
    bridgeWidthArea: [number, number],
    /**
     * 鼻梁拉伸比率范围
     */
    bridgeWidthScaleRatioArea: [number, number],
    /**
     * 镜框高度可拉伸范围，高度先不区分左右，否则比较麻烦
     */
    frameHeightArea: [number, number],
    /**
     * 左镜框高度调节比率范围
     */
    frameHeightScaleRatioArea: [number, number],
    /**
     * 左镜框，允许拉伸的范围，右镜框镜像，具体坐标轴到时固定
     * 与bridge影响，宽度和保持一致
     */
    frameWidthAreaLeft: [number, number],
    /**
     * 左镜框基准中心点，横纵拉伸都需要，
     * 目前都是向外拉伸，所以该点与area的某值保持一致
     */
    frameCenterLeft: Vector3,
    /**
     * 左镜框比率范围
     */
    frameWidthScaleRatioAreaLeft: [number, number]
    /**
     * 没有时使用左镜框数据的镜像
     */
    frameWidthAreaRight?: [number, number],
    /**
     * 右镜框中心，没有时使用左镜框数据
     */
    frameCenterRight?: Vector3,
    /**
     * 没有时去左镜框
     */
    frameWidthScaleRatioAreaRight?: [number, number],
    /**
     * 左拐角的拉伸的基准点
     */
    frameCornerCenterLeft: Vector3,
    /**
     * 左拐角可拉伸区间
     */
    frameCornerWidthAreaLeft: [number, number],
    /**
     * 左拐角拉伸比率范围
     */
    frameCornerWidthScaleRatioAreaLeft: [number, number],
    /**
     * 右拐角的拉伸的基准点
     */
    frameCornerCenterRight: Vector3,
    /**
     * 右拐角可拉伸区间
     */
    frameCornerWidthAreaRight: [number, number],
    /**
     * 右拐角拉伸比率范围
     */
    frameCornerWidthScaleRatioAreaRight: [number, number],


    /////////////////镜脚相关/////////////////////y轴
    /**
     * 左镜脚基准点
     */
    footCenterLeft: Vector3,
    /**
     * 左镜脚长度可拉伸区间
     */
    footLengthAreaLeft: [number, number],
    /**
     * 左镜脚长度可拉伸比率范围
     */
    footLengthScaleRatioAreaLeft: [number, number],
    /**
     * 右镜脚基准点
     */
    footCenterRight: Vector3,
    /**
     * 右镜脚长度可拉伸区间
     */
    footLengthAreaRight: [number, number],
    /**
     * 右镜脚长度可拉伸比率范围
     */
    footLengthScaleRatioAreaRight: [number, number],

}

/**
 * 眼镜变化参数
 */
interface GlassesParams {
	pupiDistance: number;	//	瞳距
	bridgeDistance: number;	//	鼻梁(桥)距
	frameHeight: number;	//	镜框高
	frameWidthL: number;	//	镜框宽(左)
	frameWidthR: number;	//	镜框宽(右)
	frameTotalWidth: number;//	镜框总宽
	templeLength: number;	//	镜腿长度
	rakeAngle: number;		//	前倾角
	eyeRelief: number;		//	镜眼距	
	bridgeCenter?: { x: number, y: number, z: number };	//	中心的位置，默认0, 0, 0
	frameColor: number;
	footColor: number;
	frameMapUrl: string;	//	镜框贴图
	footMapUrl: string; 	//	镜腿贴图
	frameMaterialUrl: string;	//	镜框材质
	footMaterialUrl: string;	//	镜腿材质
}


/**
 * 创建gmirror
 * @param containerDivId 网页DivId标识
 * @param opt 配置项，见types定义，所有配置项可以放这里传递
 * @returns EPoint 对象
 * e.g. new EPoint("3dview", opt, (text)=>{
   console.log(`这里弹出提示框${text}`)
})
 */
constructor(containerDivId: string, opt?: Partial<GlassesMirror.InitOption>, showTipCallback?:GlassesMirror.ShowTipFunc)


/**
* 导出相机图片数据
* @param cameraIdType 本项目中的相机类型(枚举) 'MAIN'| "HEAD" | "FACE" | "EYE" | "RSIDE" | "LFIX" | "RFIX" 
* @param pointVisible 如果有关键点，导出时是否显示, 默认 FALSE；
* @returns  如果失败，返回undifined， 否则返回 {width: number, height:number, imgData: string}
			其中imgData是 string类型的"image/jpg" base64位编码
*/

async exportCameraShot(cameraId: GlassesMirror.CameraIdType, pointVisible:boolean = false)


/**
* 获取头部关键信息，见HeadInfo
*/
getHeadInfo()


/**
 * 通过api获取到关键点后的处理
 * @param items e.g.  [{key:'r', x:100, y:20}, {...}, ...]
 * @param width 对应的宽
 * @param height 对应的高
 * @param cameraId e.g.'MAIN'| "LSIDE" | "RSIDE"
 */
onRecvKeyPoints2D(items:GlassesMirror.KeyPoint2D[], width:number, height:number, cameraId:GlassesMirror.CameraIdType)

/**
 * 选择头模
 * @param objUrl 
 * @param imgUrl 
 * @returns 
 */
async chooseHead(objUrl: string, imgUrl: string)

/**
 * 选择眼镜
 * @param param 读取眼镜参数
 * @param useTweenAni 是否使用眼镜渐变动画
 * @param tweenDuration 如果使用眼镜渐变动画，动画的渐变时间
 * @returns Promise<{
 *     obj: Glasses;
 *     param: Partial<GlassesMirror.GlassesParams>;
 *     }>
 */
async chooseGlasses(param: Partial<GlassesMirror.LoadGlassesParam>, useTweenAni?: boolean, tweenDuration?: number )

/**
 * 导入眼镜的关键点
 * @param points 
 * @param visible 关键点是否可见
 */
importGlassesPoints(points: GlassesMirror.IKeyPoint3D[], visible:boolean = true)

/**
 * 复位场景
 */
reset()


//  测试
async test()


/**
 * 获取眼镜的推荐数据
 * @returns GlassesInfo
 */
recommenGlassesParam()

/**
* 调整当前眼镜参数
* @param params 调整的眼镜参数
* @param basePos 基础位置，默认undefined表示不变动基础位置
* @param useTweenAni 是否使用tween动画，默认undefined表示不使用
	变化的顺序为：鼻梁尺寸->左镜框->右镜框->镜框高->镜架总宽->其他待定（前倾角、镜眼距、镜脚）
* @param tweenDuration 如果使用tween动画，动画时间单位为ms
* @returns Promise<Partial<GlassesMirror.GlassesParams>>
*/
async adjustCurrentGlasses(params: Partial<GlassesMirror.GlassesParams>, basePos?: Vector3, useTweenAni?: boolean, tweenDuration?: number) 
// 举例：
// 修改颜色, 镜框使用红色，镜腿使用绿色
// adjustCurrentGlasses({frameColor: 0xff0000, footColor: 0x00ff00})

/**
 * 导出头模关键点
 * @returns  {x:number, y:number, z:number, name:string}[]
 */
exportHeadPoints3D()

/**
 * 导出头模附加信息
 * @returns 
 */
exportHeadAddInfo():GlassesMirror.ModelAddInfo

/**
 * 导出设计需要的点位数据
 */
exportDesignPoints():{ x: number, y: number, z: number }[]

/**
 * 导出当前头模obj
 * @returns 
 */
exportCurrentHeadObj()

/**
 * 导入头模关键点....
 * @param points 
 * @param visible 默认可见
 */
importHeadPoints3D(points:{x:number, y:number, z:number, name:string}[], visible:boolean = true)

/**
 * 导入头模附加信息....
 * @param info 
 * @param pointsVisible 默认可见
 */
importHeadAddInfo(info:GlassesMirror.ModelAddInfo, pointsVisible:boolean = true)

/**
 * 关键点编辑模式控制
 * @param enable 
 * @param onSaveFunction 回调函数
 */
enablePointEditor(enable: boolean, onSaveFunction:GlassesMirror.EditorOnSaveFn)

/**
 * 获取版本号
 * @returns 版本号（字符串）
 */
version()

/**
 * 释放EPoint
 */
release()
@mrkwon/tween@types/threeexif-jslil-guithreetween
0.1.0

5 months ago

0.0.1

5 months ago