webpack+typescript+threejs+vscode開發

時間 2019-12-14

標籤 webpack+typescript+threejs+vscode webpack typescript threejs vscode 開發简体版

原文原文鏈接

首先須要準備好開發環境,這裏在windowns上面,須要安裝nodejs和vscode(vscode是我本身在用的編輯器.).html

1.安裝nodejs.
下載地址:https://nodejs.org/en/ (下載8.9.1)
安裝的時候注意一下安裝選項,把系統的路徑加一下,英文對應大概是"add path...."巴拉巴拉的.node

安裝完成後,打開命令行工具(cmd.exe)後輸入,node -v 後,你會看到nodejs的版本號,證實你安裝成功了.webpack

由於鎮內的環境,npm可能並非特別好用,若是你沒有翻出去,那麼建議你打開cmd.exe以後,安裝一下cnpm.
npm是你在nodejs安裝後就有的,上面下載版本爲8.9.1,由於nodejs9的npm如今提示不大支持.
安裝cnpm的方法:
命令行敲下面這個:
npm install -g cnpm --registry=https://registry.npm.taobao.orggit

2.安裝vscode.
https://code.visualstudio.com/ (vscode下載)
這裏我使用vscode做爲個人開發環境.es6

3.新建文件夾,爲開發項目建立個文件夾吧.這裏取名 <threejs_study>
而後使用cmd.exe打開該地址,windows能夠在文件夾地址上敲cmd就能夠打開.(或者用vscode打開後,按Ctrl+` 打開終端.)web

4.輸入npm init 初始化項目.一直按回車就好了,由於該過程會在文件夾生成一個package.json文件.chrome

5.安裝依賴的包.這裏我一次性安裝完成.
cnpm i three webpack webpack-dev-server html-webpack-plugin typescript awesome-typescript-loader @types/three @types/nodetypescript

6.到這裏了,用vscode打開該文件夾項目吧.npm

7.初始化webpack.
首先在根目錄建立文件,webpack.config.ts 寫入以下代碼json

var path = require('path');
var HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    //項目入口
    entry: "./src/index.ts",
    //輸出設置
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    //調試工具
    devtool: "source-map",
    //模塊加載器設置
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
        ]
    },
    //調試服務
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 7777
    },
    //插件
    plugins: [
        new HtmlWebPackPlugin(
            {
                title: "threejs學習"
            }),
    ]
}

建立tsconfig.json

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es6",
        "lib": [
            "es2017",
            "dom"
        ],
        "types": [
            "node"
        ],
        "module": "commonjs",
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ]
}

8.恭喜你完成了項目配置,如今咱們能夠編寫代碼了.
建立文件夾src,而且建立index.ts

由於咱們沒有書寫html代碼,那麼咱們用純的js操做dom去建立canvas.

代碼以下:

import * as THREE from "three";


//建立場景.
let scene = new THREE.Scene();
//相機
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//渲染器
let renderer = new THREE.WebGLRenderer();
//設置畫布大小
renderer.setSize(window.innerWidth, window.innerHeight);
//加入到body
document.body.appendChild(renderer.domElement);



//第二步,建立幾何體.

let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
let cube = new THREE.Mesh(geometry, material);
//加入到場景
scene.add(cube);

//設置相機位置
camera.position.z = 5;

//渲染循環
function animate()
{
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

而後你修改package.json文件,在scripts中加入

"scripts": {
    "dev": "webpack-dev-server"
  },

而後你就能夠在命令行中運行,npm run dev了.

你能夠在拓展中安裝debugger for chrome插件.這樣你就能夠按F5進行代碼調試了.

記得選擇Chrome調試,而且記得修改launch.json文件中的端口,改爲7777(上述webpack.config.js中設置的端口)

大概如這樣

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:7777",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

此刻,你按F5,發現瀏覽器打開了,而且繪製了這樣的畫面