THREE.js（一）：搭建Threejs + typescript + webpack项目

最新推荐文章于 2024-05-25 09:35:12 发布

IndependentGamer

最新推荐文章于 2024-05-25 09:35:12 发布

阅读量3.6k

点赞数 1

分类专栏： threejs 文章标签： typescript webpack three.js

本文链接：https://blog.csdn.net/weixin_42544745/article/details/122250155

版权

threejs 专栏收录该内容

3 篇文章 3 订阅

订阅专栏

1. 安装 node.js

2. 安装vscode，微软前端开发神器。

3. 新建项目文件夹，随意取个名字，这里我们叫 , 然后用 vscode 打开

4. vscode 打开项目，像下面这样，你需要做的就是点击终端，新建终端

5. 在终端输入npm init ,像下面这样，然后一直按 Enter 键。

6. 你会得到一个 package.json, 像下面这样

7. 全局安装TypeScript，并确认安装的是哪个版本

8. 安装three.js库

9. 创建项目文件和文件夹

10. 下面来配置webpack

1. 在./src/client/文件夹下添加 webpack.common.js

2. 在./src/client/文件夹下添加 webpack.dev.js

3. 在 package.json 文件中添加一个用于启动 webpack 开发服务器的脚本：

4. 最后，可以在终端输入以下命令行运行我们的项目

5. 最终，ctrl + 鼠标左键点击

前言

最近从游戏公司离职，layabox的项目实战教程暂停更新，不过一些游戏开发中实际用到的功能会在闲暇时进行更新。

现在，由于转到建筑铝模板方向，自然而然的用到之前在家装软件公司的开发经验。新项目打算采用THREE.js + webgl来做一些3D方面的开发，考虑到后期功能扩展和代码重构上的问题，实际项目中打算采用typescript语言。至于typescript语言的好处，这里就不多介绍，毕竟大公司都在用，为了保证代码的健壮性，这无疑是多人开发项目时最好的选择。

好的废话不多说，下面我们先来搭建一个项目框架：

在这之前你可能需要做的一些准备：

1. 安装 node.js

下载地址：Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/en/

选LTS版本就行。

2. 安装vscode，微软前端开发神器。

Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/

直接下 window x64 就行。

3. 新建项目文件夹，随意取个名字，这里我们叫 <three-ts>, 然后用 vscode 打开

4. vscode 打开项目，像下面这样，你需要做的就是点击终端，新建终端

5. 在终端输入npm init ,像下面这样，然后一直按 Enter 键。

6. 你会得到一个 package.json, 像下面这样

7. 全局安装TypeScript，并确认安装的是哪个版本

在终端输入以下代码

npm install -g typescript
tsc -v

故障排除：

在终端输入tsc -v 可能会出现以下错误：

你有多种选择，例如：在终端右侧加号里选择经典的 Windows CMD 提示符，或者使用tsc.cmd选项：

tsc.cmd -v

8. 安装three.js库

在终端输入：

npm install three --save-dev

9. 创建项目文件和文件夹

在three-ts下创建一个名为 dist 的文件夹
在dist 下创建一个新的文件夹名为 clinet
在 dist/client文件夹中添加 index.html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Three.js TypeScript</title>
        <style>
            body {
                overflow: hidden;
                margin: 0px;
            }
        </style>
    </head>

    <body>
        <script type="module" src="bundle.js"></script>
    </body>
</html>

在项目中创建一个新文件夹名为 sr
在src 下面创建文件夹 clinet
在文件夹内./src/client 添加一个名为 client.ts 的新文件

import * as THREE from 'three'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.z = 2

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
})

const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

function animate() {
    requestAnimationFrame(animate)

    cube.rotation.x += 0.01
    cube.rotation.y += 0.01

    render()
}

function render() {
    renderer.render(scene, camera)
}

animate()

同样在文件夹./src/client内添加一个名为tsconfig.json的新文件

{
    "compilerOptions": {
        "moduleResolution": "node",
        "strict": true
    },
    "include": ["**/*.ts"]
}

npm install @types/three --save-dev

项目结构如下：

10. 下面来配置webpack

这里需要安装几个模块才能有效地使用Webpack。

在终端输入：

npm install webpack webpack-cli webpack-dev-server webpack-merge ts-loader --save-dev

webpack：包含将代码捆绑到开发和生产版本的核心。
webpack-cli：用来运行 webpack 的命令行工具。
webpack-dev-server：一个 HTML 服务器，它将在开发阶段加载我们的代码并提供 HMR 功能。
webpack-merge：一个 webpack 工具库，允许将 webpack 配置拆分为多个文件。
ts-loader：处理 TypeScript 文件的模块规则。

除了上面这些，我们还需要在 node_modules文件夹中安装ts-loader 为 TypeScript 提供本地副本：

npm install typescript --save-dev

现在可以在项目中添加一些 Webpack 配置。

1. 在./src/client/文件夹下添加 webpack.common.js

const path = require('path')

module.exports = {
    entry: './src/client/client.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../../dist/client'),
    },
}

2. 在./src/client/文件夹下添加 webpack.dev.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const path = require('path');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'eval-source-map',
    devServer: {
        static: {
            directory: path.join(__dirname, '../../dist/client'),
        },
        hot: true,
    },
})

3. 在 `package.json 文件中`添加一个用于启动 webpack 开发服务器的脚本：

{
  "name": "three-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --config ./src/client/webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/three": "^0.135.0",
    "three": "^0.136.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2",
    "webpack-merge": "^5.8.0"
  }
}