在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vis-three开源软件地址:https://gitee.com/Shiotsukikaedesari/vis-three开源软件介绍:vis-threethree.js库二次功能封装 + 配置化的three.js开发。 安装npm i vis-three 导入// 整体导入import * as Vis from 'vis-three'// 按需导入import { ModelingEngineSupport, SupportDataGenerator, generateConfig} from 'vis-three' 查看demo示例
备注gitee仓库为github的同步备份仓库github地址:https://github.com/Shiotsukikaedesari/vis-three 基本用法生成配置const pointLight = Vis.generateConfig('PointLight', { position: { x: 10, y: 20, z: 20 }}) 生成配置模块const lightMap = new Vis.SupportDataGenerator() .create(Vis.MODULETYPE.LIGHT) .add(pointLight) .get() 使用支持插件const lightDataSupport = new Vis.LightDataSupport(lightMap) 使用支持建模引擎const engine = new Vis.ModelingEngineSupport({ lightDataSupport: lightDataSupport}).setDom(document.getElementById('app')) .setSize() .play() 快速编辑场景物体const lightSupportData = lightDataSupport.getData()const pointLight = lightSupportData[pointLight.vid]pointLight.position.x = 10pointLight.position.y = 20 导出配置console.log(engine.toJSON()) 导入配置生成场景import config from '/examples/config.json'const engine = new Vis.ModelingEngineSupport().setDom(document.getElementById('app')).setSize().play().loadConfig(config, (event) => { // loaded do something...}) 渲染引擎引擎使用const ENGINEPLUGIN = Vis.ENGINEPLUGIN// ModelingEngineconst engine = new Vis.Engine() .install(ENGINEPLUGIN.WEBGLRENDERER, { antialias: true, alpha: true }) .install(ENGINEPLUGIN.SCENE) .install(ENGINEPLUGIN.POINTERMANAGER) .install(ENGINEPLUGIN.EVENTMANAGER) .install(ENGINEPLUGIN.EFFECTCOMPOSER, { WebGLMultisampleRenderTarget: true }) .install(ENGINEPLUGIN.SELECTION) .install(ENGINEPLUGIN.AXESHELPER) .install(ENGINEPLUGIN.GRIDHELPER) .install(ENGINEPLUGIN.OBJECTHELPER) .install(ENGINEPLUGIN.VIEWPOINT) .install(ENGINEPLUGIN.DISPLAYMODE) .install(ENGINEPLUGIN.RENDERMANAGER) .install(ENGINEPLUGIN.STATS) .install(ENGINEPLUGIN.ORBITCONTROLS) .install(ENGINEPLUGIN.KEYBOARDMANAGER) .install(ENGINEPLUGIN.TRANSFORMCONTROLS) .complete() // 安装插件完成后调用 .setDom(document.getElementById('app')) .setSize() .setStats(true) .play() 引擎插件WebGLRendererGL渲染器插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.WEBGLRENDERER, { // WebGLRendererParameters antialias: true, // 抗锯齿 alpha: true // 允许透明度 //...})// event engine.addEventListener('setSize', (event) => { // event.width // event.height})engine.addEventListener('setCamera', (event) => { // event.camera}) CSS3DRenderer(预)CSS3D渲染器插件 Scene场景插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.SCENE)// event engine.addEventListener('afterAdd', (event) => { // event.objects})engine.addEventListener('afterRemove', (event) => { // event.objects}) EffectComposer后期处理器插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.EFFECTCOMPOSER ,{ WebGLMultisampleRenderTarget: true // 137版本以下MSAA samples: 4 // 采样程度 format: THREE.RGBAFormat // 后期编码 MSAA: boolean // 预设 FXAA: boolean // 预设 SMAA: boolean // 预设})// event PointerManager指针,鼠标管理器插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.POINTERMANAGER ,{throttleTime: number // 节流时间})// eventengine.dom.addEventListener('pointerdown', (event) => {// mouseevent})engine.dom.addEventListener('pointermove', (event) => {// mouseevent})engine.dom.addEventListener('pointerup', (event) => {// mouseevent}) EventManager场景与物体的事件管理器插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.EVENTMANAGER, { recursive: false, // 是否可递归计算物体包括children penetrate: false // 是否可以穿透触发事件委托})// event// globalengine.eventManager.addEventListener('pointerdown', (event) => { // mouseevent // event.intersections})engine.eventManager.addEventListener('pointermove', (event) => { // mouseevent // event.intersections})engine.eventManager.addEventListener('pointerup', (event) => { // mouseevent // event.intersections})engine.eventManager.addEventListener('pointerenter', (event) => { // mouseevent // event.intersections})engine.eventManager.addEventListener('pointerleave', (event) => { // mouseevent // event.intersections})engine.eventManager.addEventListener('click', (event) => { // mouseevent // event.intersections})engine.eventManager.addEventListener('dblclick', (event) => { // mouseevent // event.intersections})engine.eventManager.addEventListener('contextmenu', (event) => { // mouseevent // event.intersections})// objectthreeObject.addEventListener('pointerdown', (event) => { // event.intersections})threeObject.addEventListener('pointermove', (event) => { // mouseevent // event.intersection})threeObject.addEventListener('pointerup', (event) => { // mouseevent // event.intersection})threeObject.addEventListener('pointerenter', (event) => { // mouseevent // event.intersection})threeObject.addEventListener('pointerleave', (event) => { // mouseevent // event.intersection})threeObject.addEventListener('click', (event) => { // mouseevent // event.intersection})threeObject.addEventListener('dblclick', (event) => { // mouseevent // event.intersection})threeObject.addEventListener('contextmenu', (event) => { // mouseevent // event.intersection}) RenderManager渲染管理器插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.RENDERMANAGER ,{fps: 0 //(预设) 帧率})// eventengine.renderManager.addEventListener('render', (event) => {// event.delta// event.total})engine.renderManager.addEventListener('play', () => {})engine.renderManager.addEventListener('stop', () => {}) LoaderManager加载器管理器插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.LOADERMANAGER ,{loaderExtends: {'diy': DIYLoader } // 扩展的加载器 extends THREE.Loader})// eventengine.loaderManager.addEventListener('beforeLoad', (event) => {// event.urlList})engine.loaderManager.addEventListener('loading', (event) => {// event.loadTotal// event.loadSuccess,// event.loadError})engine.loaderManager.addEventListener('loaded', (event) => {// event.loadTotal,// event.loadSuccess// event.loadError// event.resourceMap})engine.loaderManager.addEventListener('detailLoading', (event) => {// event.detail// detail = {// url,// progress: 0,// error: false,// message: url// }})engine.loaderManager.addEventListener('detailLoaded', (event) => {// event.detail// detail = {// url,// progress: 0,// error: false,// message: url// }}) ResourceManager资源管理器插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.RESOURCEMANAGER)// eventengine.resourceManager.addEventListener('mapped', (event) => { // event.structureMap: Map<string, unknown> // event.configMap: Map<string, unknown> // event.resourceMap: Map<string, unknown>}) DataSupportManager数据支持管理器插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.DATASUPPORTMANAGER, { //module DataSupport lightDataSupport: new Vis.LightDataSupport() // ...})// event CompilerManager编译管理器插件 一般情况下DataSupportManager要与CompilerManager一起安装后期会考虑作为一个插件 const engine = new Vis.Engine().install(Vis.ENGINEPLUGIN.COMPILERMANAGER)// event OrbitControls轨道控制器插件 TransformControls变换控制器插件 Stats资源监视器插件 AxesHelper坐标轴辅助插件 GridHelper网格辅助插件 ObjectHelper物体辅助插件 Viewpoint视角切换插件 DisplayMode渲染模式插件 Selection物体选择插件 自定义插件const customPlugin = function (params) { // this is engine this.scene.add(new THREE.Mesh()) this.completeSet.add(() => { // 稍微允许无须安装插件,所以部分逻辑放在completeSet中最后complete()调用完成 })}Vis.Engine.register('customPlugin', customPlugin)new Vis.Engine().install('customPlugin', params) 预设引擎ModelingEngine开发下的渲染引擎this.install(ENGINEPLUGIN.WEBGLRENDERER, { antialias: true, alpha: true}).install(ENGINEPLUGIN.SCENE).install(ENGINEPLUGIN.POINTERMANAGER).install(ENGINEPLUGIN.EVENTMANAGER).install(ENGINEPLUGIN.EFFECTCOMPOSER, { WebGLMultisampleRenderTarget: true}).install(ENGINEPLUGIN.SELECTION).install(ENGINEPLUGIN.AXESHELPER).install(ENGINEPLUGIN.GRIDHELPER).install(ENGINEPLUGIN.OBJECTHELPER).install(ENGINEPLUGIN.VIEWPOINT).install(ENGINEPLUGIN.DISPLAYMODE).install(ENGINEPLUGIN.RENDERMANAGER).install(ENGINEPLUGIN.STATS).install(ENGINEPLUGIN.ORBITCONTROLS).install(ENGINEPLUGIN.KEYBOARDMANAGER).install(ENGINEPLUGIN.TRANSFORMCONTROLS).complete() DisplayEngine展示下的渲染引擎this.install(ENGINEPLUGIN.WEBGLRENDERER, { antialias: true, alpha: true}).install(ENGINEPLUGIN.SCENE).install(ENGINEPLUGIN.RENDERMANAGER).install(ENGINEPLUGIN.EFFECTCOMPOSER, { WebGLMultisampleRenderTarget: true}).install(ENGINEPLUGIN.ORBITCONTROLS).install(ENGINEPLUGIN.POINTERMANAGER).install(ENGINEPLUGIN.EVENTMANAGER).complete() EngineSupport 配置化支持引擎this.install(ENGINEPLUGIN.LOADERMANAGER).install(ENGINEPLUGIN.RESOURCEMANAGER).install(ENGINEPLUGIN.DATASUPPORTMANAGER, parameters).install(ENGINEPLUGIN.COMPILERMANAGER) ModelingEngineSupportEngineSupport + ModelingEngine DisplayEngineSupportEngineSupport + DisplayEngine 资源管理加载管理器const assets = [ "/examples/public/model/katana/katana.obj", "/e |
请发表评论