• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

vis-three: more convenient development for three.js

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称：

vis-three

开源软件地址：

https://gitee.com/Shiotsukikaedesari/vis-three

开源软件介绍：

vis-three

three.js库二次功能封装 + 配置化的three.js开发。

Version License

安装

npm i vis-three

导入

// 整体导入import * as Vis from 'vis-three'// 按需导入import {   ModelingEngineSupport,  SupportDataGenerator,  generateConfig} from 'vis-three'

查看demo示例

  1. 下载或者克隆main分支代码

  2. 执行npm i 安装依赖

  3. 执行npm run examples

  4. 打开浏览器访问: http://localhost:3000/examples/index.html

  5. 示例代码位于：examples文件夹下

备注

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()
引擎插件
WebGLRenderer

GL渲染器插件

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)
ModelingEngineSupport

EngineSupport + ModelingEngine

DisplayEngineSupport

EngineSupport + DisplayEngine

资源管理

加载管理器

const assets = [  "/examples/public/model/katana/katana.obj",  "/e

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
feng3d-as: flash3d游戏引擎发布时间：2022-03-25
下一篇：
GameQuery: GameQuery 是一个开源游戏引擎，你可以基于该引擎开 发一些网页小游戏 ...发布时间：2022-03-25
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap