threeJs模塊化開發解決方案 import-three-examples

tinyq 發布于2019-08-23 14:26 / 2170人閱讀

摘要：最近的老項目要遷移到已有的后臺中，但發現的插件的包真少，老項目中每引一個插件就得專門去修改文件中的干脆寫了一個插件使中的所有的第三方庫都能正常引入廢話不多說了直接上使用方法了需要的依賴的配置渲染進程的其他第三

最近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~

云服務器 GPU云服務器模塊化機房解決方案模塊化開發 vuejs模塊化開發 html模塊化開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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