webpack+typescript+threejs+vscode开发

首先需要准备好开发环境,这里在windowns上面,需要安装nodejs和vscode(vscode是我自己在用的编辑器.).

1.安装nodejs.
下载地址:https://nodejs.org/en/ (下载8.9.1)
安装的时候注意一下安装选项,把系统的路径加一下,英文对应大概是"add path...."巴拉巴拉的.

安装完成后,打开命令行工具(cmd.exe)后输入,node -v 后,你会看到nodejs的版本号,证明你安装成功了.

因为镇内的环境,npm可能并不是特别好用,如果你没有翻出去,那么建议你打开cmd.exe之后,安装一下cnpm.
npm是你在nodejs安装后就有的,上面下载版本为8.9.1,因为nodejs9的npm现在提示不大支持.
安装cnpm的方法:
命令行敲下面这个:
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装vscode.
https://code.visualstudio.com/ (vscode下载)
这里我使用vscode作为我的开发环境.

3.新建文件夹,为开发项目创建个文件夹吧.这里取名 <threejs_study>
然后使用cmd.exe打开该地址,windows可以在文件夹地址上敲cmd就可以打开.(或者用vscode打开后,按Ctrl+` 打开终端.)

4.输入npm init 初始化项目.一直按回车就行了,因为该过程会在文件夹生成一个package.json文件.

5.安装依赖的包.这里我一次性安装完成.
cnpm i three webpack webpack-dev-server html-webpack-plugin typescript awesome-typescript-loader @types/three @types/node

6.到这里了,用vscode打开该文件夹项目吧.

7.初始化webpack.
首先在根目录创建文件,webpack.config.ts 写入如下代码

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,发现浏览器打开了,并且绘制了这样的画面

恭喜你,入门了three.js的开发.

这篇文章只是大概的说了一下如何用工具,具体有很多资料是没有在教程中提及的,需要的用到的技术也是需要时间去积累的,下面列出一些参考资料,可以了解一下这些工具,如何使用,以及为什么要用这些工具.

参考资料:
1.typescript 中文手册 地址:https://www.tslang.cn/
2.cnpm 地址:https://cnpmjs.org/
3.vscode 地址:https://code.visualstudio.com/
4.nodejs 地址:https://nodejs.org/en/
5.webpack 地址:https://doc.webpack-china.org/
6.npm config 地址:https://docs.npmjs.com/cli/co...
7.threejs 地址:https://threejs.org/
8.本项目git托管地址: https://gitee.com/BearCAD/thr...