threeJs模块化开发解决方案 import-three-examples

tinyq 发布于2019-08-23 14:26 / 2005人阅读

摘要：最近的老项目要迁移到已有的后台中，但发现的插件的包真少，老项目中每引一个插件就得专门去修改文件中的干脆写了一个插件使中的所有的第三方库都能正常引入废话不多说了直接上使用方法了需要的依赖的配置渲染进程的其他第三

最近three的老项目要迁移到已有的vue后台中，但发现threeJs的插件npm的包真少，老项目中每引一个插件就得专门去修改文件中的import exports.

So,干脆写了一个webpack插件使three-examples中的所有的第三方库都能正常引入.

废话不多说了.直接上使用方法了

需要的依赖:

cnpm i three --save
cnpm i imports-loader exports-loader --save-dev
cnpm i import-three-examples --save-dev

webpack的配置:

const ThreeExamples = require("import-three-examples")

module.exports = {
  ......
  ......
  module: {
    rules: [
      ......
      ......
      {
        test: /.js$/,
        loader: "babel-loader"
      },
      ...ThreeExamples
    ]
  }
}

渲染进程:

import OrbitControls from "three/examples/js/controls/OrbitControls"
import FBXLoader from "three/examples/js/loaders/FBXLoader"
// three/examples/js的其他第三方库 引入方式同上
// 实例创建方式如下
......
......

let controls = new OrbitControls(camera, el)

let fbx = new FBXLoader()

fbx.load(url, function (_obj) {
  console.log(_obj)
})

......
......

github地址: https://github.com/xiongtongz...

如果遇到问题,欢迎提出,一起完善插件方便更多人.(会持续维护)

最后按照惯例求个 STAR~

私有云服务器托管模块化机房解决方案模块化开发 vuejs模块化开发 html模块化开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100596.html

SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
产品三维模型在线预览

摘要：次时代传统的方式就是创建次时代模型，对应中的材质是高光网格材质对象，通常贴图文件包含颜色贴图法线贴图和高光贴图。产品在线展示案例预览玉镯在线预览：http://www.yanhuangxueyuan.co... 汽车在线预览：http://www.yanhuangxueyuan.co... Web3D技术历史可通过插件或WebGL技术实现Web3D，在线网页上预览操作三维...

DirtyMind 2019-08-23 12:08 评论0 收藏0
vue-threeJS数据驱动的三维图形可视化

摘要：数据驱动的三维图形可视化在信息暴涨的年间，冷暴力的扁平化确实有效降低用户的信息焦虑感，使有限的精力更高效处理过多的信息流。数据驱动的三维图形可视化在信息暴涨的2010-2016年间，冷暴力的扁平化确实有效降低用户的信息焦虑感，使有限的精力更高效处理过多的信息流。二维平面化扁平化在苹果等大头引领下，成为大众用户机器交流默认的语言。然后，随着PC、平板、手机、智能家居等用户持有终端的性...

SegmentFault 2019-08-23 11:37 评论0 收藏0
在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

摘要：以为例，在产品主数据的页面工具栏上新增了一个按钮，点击之后，会显示一个弹出窗口，在浏览器里利用调用本地安装的应用，显示该产品主数据的视图。本文介绍的是另一种用纯编程来以方式显示产品主数据的解决方案。在Jerry写这篇文章时，通过Google才知道，SAP其实是有自己的3D模型视图显示解决方案的。 showImg(https://segmentfault.com/img/remote/...

FingerLiu 2019-08-23 12:29 评论0 收藏0