前言

　　我們前面使用的是自己編寫的ts，以及自己手動引入的jquery，由於第三方庫採用的是直接引入js，沒有d.ts宣告檔案，開發起來很累，所以一般情況下我們使用npm引入第三方的庫，本文記錄使用npm，typescript開發threejs3D專案，搭建基礎例項，為以後開發具體業務做準備

　　專案結構

 　　依舊是熟悉的SpringBoot專案，不同以往的是使用了npm管理工具來下載依賴js庫，類似maven，同時為了解決typescript編譯後引入npm庫的路徑有問題，導致瀏覽器報錯的問題，我們採用的webpack打包工具來打包  PS：webpack依賴的檔案真的是多，全都安裝完後，好幾百M

　　下面簡單說一下如何初始化npm、webpack，以及下載jquery、three等js庫

　　npm的使用

　　初始化

　　cmd先開啟到專案的 threejs\src\main\resources\static 路徑，使用npm init命令，回答一系列問題（當然也可以全部按照預設值），初始化成npm專案

　　得到node_modules目錄以及package.json檔案

　　當我們使用打包命令，會提示我們還缺少那些依賴，這時候我們按照提示去下載就可以了

　　有一點要注意，package.json檔案的name值不能用typescript，我們改成

  "name": "typescript-threejs",

　　指令碼命令

  "scripts": {
    "tsc": "tsc -w",//監控檔案，有改動時實時編譯ts
    "build": "webpack",//打包
    "dev": "webpack -w"//監控檔案，有改動時實時打包
  },

　　webpack.config.js配置

const path = require('path');
module.exports = {
    entry : {
        main : './src/controller/Main.ts'
    },
    devtool : 'inline-source-map',
    mode : 'development',
    module : {
        rules : [ {
            test : /\.ts$/,
            use : 'ts-loader',
            exclude : /node_modules/
        } ]
    },
    resolve : {
        extensions : [ '.ts', '.js' ]
    },
    output : {
        filename : '[name].js',
        path : path.resolve(__dirname, './dist/')
    },
    plugins : [
    ],
    optimization: {
        splitChunks: {
            chunks: "all",
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '-',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    }
};

　　使用 npm install 命令就可以下載第三方外掛

　　下載jquery的宣告檔案

　　在node_modules目錄下面j就可以看到npm下載下來的庫

　　如何引入

　　使用typescript編譯成js，路徑不正確，瀏覽器報錯

　　使用webpack編譯、打包成js，路徑正確

　　threejs

　　threejs，是一個JavaScript編寫的WebGL第三方庫。

　　官網：https://threejs.org/

　　官方文件：https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

　　官方提供的各種例子：https://threejs.org/examples/

　　官方GitHub：https://github.com/mrdoob/three.js

　　這裡還有一個大神的部落格，有比較豐富的例子可以參考：https://www.wjceo.com/

　　通過查閱官網文件、以及參考大量的例子進行學習，我們開始three.js之旅，採用的是npm引入的方式引入three

 　　路徑結構介紹

　　渲染器有三個WebGLRenderer、CSS2DRenderer、CSS3DRenderer，後面這兩個是為了能夠使用CSS2DObject、CSS3DObject物件作為Label，注意，使用了多個渲染器後，我們的控制器要控制的是CSS3DRenderer.domElement，控制它可以同時控制到WebGLRenderer的物件

　　同時，3D的渲染器DOM要加絕對定位，要不然DOM的東西顯示不出來（為了統一，2D的我也加了），然後webGL的canvas也加樣式，position: absolute;

　　然後在初始化場景時，不停的渲染，注意，有一個地方不停的渲染就可以了，多了影響效能

　　封裝原生髮射射線的方式監聽物件的滑鼠事件，有個地方要注意，射線只能檢測到Mesh物件，Group組物件是檢測不到了

　　同時還封裝了一個動畫效果，按螢幕重新整理率呼叫，每次呼叫++一定的值，每次回撥函式返回，從0到1遞增，等於1的時候結束遞迴呼叫

 　　還有一個是鏡頭的巡檢

　　其他地方就不一一介紹了，大家自己看程式碼

　　效果演示

 　　地球模仿的是：https://wa.qq.com/xplan/earth/index.html?_wv=1

　　地球外部有一層漂浮的雲層（大氣層），效果比較逼真

　　雲層模仿的是： http://www.sucai58.com/plus/demo.php?aid=132 

　　雲海又八千多個PlaneGeometry物件組成，推動鏡頭營造穿越雲層的效果，作為地球場景到園區場景的過渡動畫

　　園區是載入了官方例子的obj模型（站立的男人）以及fbx模型（跳舞的女人），跳舞的動畫是模型自帶的，中間那兩個是普通的BoxGeometry物件（錄GIF的軟體錄帶綠色的東西效果好難看啊，我就不放上來了...）

 　　更多效果自己執行檢視

 　　補充

　　1、npm install 包的時候報錯

　　解決：給npm降級或者升級

　　降級 ： npm install -g [email protected]  //@後面是具體版本號

　　升級 ： npm install -g npm //升級到最新版本

　　如果還不行就清除快取再次安裝

　　npm cache clean -f

　2、threejs移動的時候老是報錯

　　在three.module.js做一下小調整，非空才呼叫.call方法

　　後記

　　學習Three.js是因為公司的3D技術儲備從原先的Twaver轉用其他的庫，公司大佬在考察Unity3D跟Three.js後決定用後者，Three.js是開源免費的，而Twaver跟Unity3D是要收錢的，這個例子就是我的學習Demo，主要是參考了官網的例子以及效果演示中提到的那兩個列子，Demo例子大體上已經封裝實現了載入OBJ、FBX、原生物件、2D、3Dlabel等，封裝物件滑鼠事件的監聽，鏡頭動畫封裝，基本上滿足業務的開發

　　當然還有很多不足的地方，比如事件監聽是我們直接封裝的檢測射線方法，經過測試發現一個bug，我們已經把地球從場景中移除，但點選地球的位置依舊能觸發地球的監聽事件

　　TypeScript進階開發——ThreeJs基礎例項就暫時記錄到這裡，以後在補充

　　程式碼開源

　　注：node_modules資料夾和裡面的各種庫檔案我就不提交了，幾百M太大了，大家按照上面的步驟用npm命令初始化、下載就可以了

　　程式碼已經開源、託管到我的GitHub、碼雲：

　　GitHub：https://github.com/huanzi-qch/threejs

　　碼雲：https://gitee.com/huanzi-qch/threejs

&n