@xbcx/xb-three-frame NPM

XBTHRREFRAME

version:1.0.x

更新说明

1.1.x

暂无

解决问题

threejs和项目混写的封装方案.

使用方法

引用npm,Xbthreeframe用于实现,Module用于继承,包内的一些封装需要去包内引入.
初始化threeframe单例
配置conf文件
把conf配置传递给threeframe单例初始化
继承module写模块,threeframe单例装载该模块
模块中声明依赖的模型,纹理,和别的模块(控制台打印了一定的模块加载信息)
模块init处理初始化代码,sence,camera需要自己创建,render处理每一帧代码
框架包含一些修改适配过的外部包和内部gl封装.按需引入.并未直接暴露

示例

初始化

    import Xbthreeframe from "@jspatrick/xb-three-box";
    let xxx = new Xbthreeframe();

继承

    import {Module} from '@jspatrick/xb-three-box';
    class Xxx extends module{}

引用封装

    import {MathUtil} from "@jspatrick/xb-three-box/src/gl/MathUtil";

API文档

Xbthreeframe.Xbthreeframe 类

做成插件后,返回单例,全局使用

属性	类型	说明
scene	three.scene	three的场景,threeframe会对世界有封装,不建议直接使用
world	three.group	统一的mesh存在group.在这里统一做矩阵变化
camera	three.camera
width	Number	容器宽度
height	Number	容器高度
pause	Boolean	是否暂停
renderer	three.renderer

方法	参数	返回值	说明
init	map:Mapbox,modelConf:Array,textureConf:Array,module:Array		做成插件后,直接返回单例,该方法丢弃
getXy	lngLat:Array	xyz:three.Vector3	xyz三个元素的数组,相对地图中点的xy偏移量,单位是mapbox地图上的米
on	eventName:String,callback:Function		通过单例监听一个自定义事件
dispatch	eventName:String,everyThing		触发一个自定义事件

modelConf.element	类型	说明
name	String	模型名,期望唯一
path	String	模型的地址
type	String	模型的类型
index	Number	加载顺序(暂不支持)
static	Boolean	设置为true,改模型会在内存中被释放.节约内存(白膜等模型很需要),但是del后会无法再次上图(visible无影响)

textureConf.element	类型	说明
name	String	纹理名,期望唯一
path	String	纹理的地址

事件	参数	说明
onLoaded		加载完所有的模型和模块后,会触发
onLoading	type:Enum ,info:String, progress:Number	每加载成功一个,会触发
onLoadStart		刚开始加载时触发

Xbthreeframe.module 类

项目代码写成模块,模块方法继承此基类

成员	类型	说明
threeframe	Xbthreeframe	Xbthreeframe实例对象
name	String	模块的名字,用于被依赖

方法	参数	返回值	说明

接口	参数	返回值	说明
getName		String	申明模块的名字,用于别的模块依赖
dependencyModels		Array	申明依赖的模型资源
dependencyTextures		Array	申明依赖的贴图资源
render			每一帧要执行的代码.
init	meshes:Object,textures:Object,module:Object	everything	执行模块函数,这三个参数会传递依赖的模型,纹理,模块,如果有需要提供给别人的资源,return任意.别的模块即可拿到

部分示例

找出未被使用的模型，需要保证模型和贴图文件部署在public/model文件夹下，运行命令node node_modules/@jspatrick/xb-three-box/bin/UnUsedFileChecker.js来生成对应的临时文件，启动项目后控制台打印xbthreeframe.resourcesManager.ModelsUnUsed

项目结构

xbthreeframe                    //module基类,和xbthreeframe类
  └─src                       //框架代码
      ├─prototype             //框架基础代码
      ├─lib                   //框架整合的需要修改的外部文件(项目按需引入)
      ├─gl                    //框架整合的webgl封装(项目按需引入)
      ├─indexDB               //框架indexDB相关
      ├─Loader                //框架indexDB相关
      ├─custom                //根据用户项目生成的临时文件
      └─worker                //框架indexDB相关