eye_points
v0.1.0
Published
Readme
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()