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相关
问题清单
- 暂无
功能展望
- 模块render函数,提供delta时间
- dispatch 语义的正确性