@xbcx/xb-three-frame

v1.1.23

Published

2 years ago

`version:1.0.x`

Downloads

0High
0Medium
0Low

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相关

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme