TypeScript進階開發——ThreeJs基礎實例，從入坑到入門

時間 2019-11-08

標籤 typescript 進階開發 threejs 基礎實例入門简体版

原文原文鏈接

　　前言

　　咱們前面使用的是本身編寫的ts，以及本身手動引入的jquery，因爲第三方庫採用的是直接引入js，沒有d.ts聲明文件，開發起來很累，因此通常狀況下咱們使用npm引入第三方的庫，本文記錄使用npm，typescript開發threejs3D項目，搭建基礎實例，爲之後開發具體業務作準備php

　　項目結構

　　依舊是熟悉的SpringBoot項目，不一樣以往的是使用了npm管理工具來下載依賴js庫，相似maven，同時爲了解決typescript編譯後引入npm庫的路徑有問題，致使瀏覽器報錯的問題，咱們採用的webpack打包工具來打包 PS：webpack依賴的文件真的是多，全都安裝完後，好幾百Mhtml

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

　　npm的使用

　　初始化jquery

　　cmd先打開到項目的 threejs\src\main\resources\static 路徑，使用npm init命令，回答一系列問題（固然也能夠所有按照默認值），初始化成npm項目webpack

　　獲得node_modules目錄以及package.json文件git

　　當咱們使用打包命令，會提示咱們還缺乏那些依賴，這時候咱們按照提示去下載就能夠了github

　　有一點要注意，package.json文件的name值不能用typescript，咱們改爲web

  "name": "typescript-threejs",

　　腳本命令spring

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

　　webpack.config.js配置typescript

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的軟件錄帶綠色的東西效果好難看啊，我就不放上來了...）

　　更多效果本身運行查看

　　補充

　　一、npm install 包的時候報錯

　　解決：給npm降級或者升級

　　降級： npm install -g npm@5.4.0 //@後面是具體版本號

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

　　若是還不行就清除緩存再次安裝

　　npm cache clean -f

　二、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基礎實例就暫時記錄到這裏，之後在補充

　　2019-09-05補充：

　　一、解決事件綁定問題，緣由：雖然咱們已經將對象從場景中移除，但事件監聽還在，因此仍是可以觸發

　　二、眼尖的同窗能夠發現了，咱們以前的雲層過渡動畫卡頓、同時還有相似「馬賽克」的狀況出現，卡頓是由於咱們建立的雲對象太多了，而馬賽克是由於默認啓用了深度測試，咱們關掉就能夠解決

　　咱們關閉了深度測試、減小了一半的雲對象，最後看一下效果（流暢了不少~）