当前位置：首页 > news >正文

three.js(二)：webpack + three.js + ts

news 2026/5/20 7:37:16

用webpack+ts 开发 three.js 项目

webpack 依旧是主流的模块打包工具;
ts和three.js 是绝配，three.js本身就是用ts写的，ts可以为three 项目提前做好规则约束，使项目的开发更加顺畅。

1.创建一个目录，初始化 npm

mkdir demo
cd demo
npm init -y

2.调整 `package.json` 文件

确保安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。

 {"name": "webpack-demo","version": "1.0.0","description": "",
-  "main": "index.js",
+  "private": true,"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "MIT","devDependencies": {"webpack": "^5.38.1","webpack-cli": "^4.7.2",}}

3.安装依赖文件

webpack 相关的依赖

npm install webpack webpack-cli webpack-dev-server --save-dev

ts 相关的依赖

npm install typescript ts-loader --save-dev

three 相关的依赖

npm install three @types/three --save

package.json 如下：

{"name": "three-lesson-02","version": "1.0.0","description": "","private": true,"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack serve --open",},"keywords": [],"author": "","license": "ISC","devDependencies": {"ts-loader": "^9.2.8","typescript": "^4.6.2","webpack": "^5.70.0","webpack-cli": "^4.9.2","webpack-dev-server": "^4.7.4"},"dependencies": {"@types/three": "^0.138.0","three": "^0.138.3"}
}

4.建立项目文件

demo
|- dist|- 01-helloWorld.html
|- src|- helloWorld.ts
|- package.json
|- package-lock.json
|- tsconfig.json
|- webpack.config.js

dist/01-helloWorld.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>helloWorld</title><style>body {margin: 0;overflow: hidden;}</style></head><body><canvas id="canvas"></canvas><script src="helloWorld.js"></script></body>
</html>

src/helloWorld.ts

const str:string='Hello World'
console.log(str)

webpack.config.js

const path = require('path');module.exports = {mode: 'development',entry: {helloWorld: './src/helloWorld.ts',},devtool: 'inline-source-map',devServer: {static: './dist',},output: {filename: '[name].js',path: path.resolve(__dirname, 'dist'),},resolve: {extensions: [".ts", ".tsx", ".js"]},module: {rules: [{ test: /\.tsx?$/, loader: "ts-loader" }]}
};

tsconfig.json

{"compilerOptions": {"sourceMap": true,"target": "es6","module": "es6"}
}

5.运行项目

npm run start

6.多页面

在dist 中再建立一个页面 02-box.html，用来显示绘制的立方体

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>box</title><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><canvas id="canvas"></canvas><script src="box.js"></script>
</body>
</html>

在src 中建立一个box.js 文件，用于绘制立方体：

import {
BoxGeometry,Mesh,MeshNormalMaterial,PerspectiveCamera,Scene,WebGLRenderer,
} from 'three'const scene = new Scene()
const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )const canvas = <HTMLCanvasElement>document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const renderer = new WebGLRenderer({canvas});const geometry = new BoxGeometry();
const material = new MeshNormalMaterial();
const cube = new Mesh( geometry, material )
scene.add( cube );camera.position.z = 5;function animate() {requestAnimationFrame( animate )cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render( scene, camera )
};
animate();

在webpack.config.js 中添加彩色立方体页面所对应的入口

module.exports = {……entry: {helloWorld: './src/helloWorld.ts',box: './src/box.ts',},……
};

启服务后，打开box.html 页面，便可以看见旋转的立方体

three.js(二)：webpack + three.js + ts

用webpackts 开发 three.js 项目 webpack 依旧是主流的模块打包工具;ts和three.js 是绝配，three.js本身就是用ts写的，ts可以为three 项目提前做好规则约束，使项目的开发更加顺畅。 1.创建一个目录，初始化 npm mkdir demo cd de…...

编程日记 2023/9/3 9:32:35

最小二乘法处理线性回归

最小二乘法是一种数学优化技术，用于查找最适合一组数据点的函数。该方法主要用于线性回归分析，当然，也可用于非线性问题。开始之前，我们先理解一下什么是回归。回归：回归是一种监督学习算法，用于建模和…...

编程日记 2023/9/3 9:31:34

ModbusCRC16校验示例代码

作者： Herman Ye Galbot Auromix 测试环境： Ubuntu20.04 更新日期： 2023/08/30 注1： Auromix 是一个机器人爱好者开源组织。注2： 本文在更新日期经过测试，确认有效。笔者出于学习交流目的， 给…...

编程日记 2023/9/3 9:30:33

一不留神就掉坑

乘除顺序问题在据卡特兰数[1]公式,解决leetcode-96 不同的二叉搜索树[2]时,遇到一个非常诡异的问题, package mainimport "fmt"func main() { for i : 0; i < 40; i { fmt.Printf("第%d个卡特兰数为:%d\n", i, numTrees(i)) }}func numTrees(n int) i…...

编程日记 2023/9/3 9:29:32

Redis数据类型(list\set\zset)

"maybe its why" List类型列表类型是⽤来存储多个有序的字符串，列表中的每个字符串称为元素（element），⼀个列表最多可以存储个2^32 - 1个元素。在Redis中，可以对列表两端插⼊（push&#xff09…...

编程日记 2023/9/3 9:28:31

TongWeb 安装步骤静默安装获取linux可执行安装包如: Install_TWx.x.x.x_Enterprise_Linux.bin 创建安装所需配置文件 install.properties 内容如下 [root@node5 tongweb]# cat install.properties INSTALL_UI=silent USER_INSTALL_DIR=/home/tongweb SILENT_JDK_HOME=/jd…...

编程日记 2023/9/3 9:27:29

ScreenToGif-动图制作软件实用操作

ScreenToGif官网：ScreenToGif ⭕第一步：启动页面 ⭕第二步：选项 🥝录像机-捕获频率选择手动-播放延迟1000ms(可以任意) ⭕第三步：录像机开始录屏 🥝我们调整录屏的大小后，打开画图&#xff0c…...

编程日记 2023/9/3 9:26:27

sqlibs安装及复现

sqlibs安装安装phpstudy后，到github上获取sqlibs源码 sqli-labs项目地址—Github获取：GitHub - Audi-1/sqli-labs: SQLI labs to test error based, Blind boolean based, Time based. 在phpstudy本地文件中的Apache目录中解压上方下载的源码。将sq…...

编程日记 2023/9/3 9:25:26

OpenAI 创始人 Sam Altman 博客有一篇 10 年前的文章

OpenAI 创始人 Sam Altman 博客有一篇 10 年前的文章《Advice for ambitious 19 year olds》，给 19 岁年轻人的建议，从 #参考答案看到，非常适合我们🤣年轻人，顺便用 GPT4 重新翻译了下全文。太长不读纯摘要版本如下&…...

编程日记 2023/9/3 9:24:25

写的一款简易的热点词汇记录工具

项目需要对用户提交的附件、文章、搜索框内容等做热词分析。如下图： 公司有大数据团队。本着不麻烦别人就不麻烦别人的原则，写了一款简易的记录工具，原理也简单，手工在业务插入锚点，用分词器分好词，排掉字…...

编程日记 2023/9/3 9:23:24

算法通关村——滑动窗口高频问题

1. 无重复字符的最长子串给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。 1.1 滑动窗口找到最长字串需要找到字串的首尾位置…...

编程日记 2023/9/3 9:22:23

mybatis源码学习-2-项目结构

写在前面,这里会有很多借鉴的内容,有以下三个原因本博客只是作为本人学习记录并用以分享,并不是专业的技术型博客笔者是位刚刚开始尝试阅读源码的人,对源码的阅读流程乃至整体架构并不熟悉,观看他人博客可以帮助我快速入门如果只是笔者自己观看,难免会有很多弄不懂乃至理解错误…...

编程日记 2023/9/3 9:21:22

selenium 自动化测试——环境搭建

安装python，并且使用pip命令安装 selenium pip3 install selenium 然后尝试第一次使用selenium 完成一个简单的测试自动化脚本 from selenium import webdriver from selenium.webdriver.common.by import By import timedriver webdriver.Chrome() driver.get(…...

编程日记 2023/9/3 9:20:19

得物一面，场景题问得有点多！

题目来源：https://www.nowcoder.com/discuss/525371909735792640 前文本期是【捞捞面经】系列文章的第 1 期，持续更新中…。《捞捞面经》系列正式开始连载啦，据说看了这个系列的朋友都拿到了大厂offer~ 欢迎星标订阅，持续更新…...

编程日记 2023/9/3 9:19:17

Prompt Tuning 和instruct tuning

Prompt Tuning 是啥？ prompt的思想是，把下游任务的输入转化为预训练模型的原始任务。以bert作为举例，假设任务是文本分类。“今天天气很好。”我们想判断一下这句话的情感是正面还是负面 fine-tune的方法是在bert之后接一个head&#xff0…...

编程日记 2023/9/3 9:18:15

springboot 与异步任务,定时任务,邮件任务

异步任务在Java应用中，绝大多数情况下都是通过同步的方式来实现交互处理的；但是在处理与第三方系统交互的时候，容易造成响应迟缓的情况，之前大部分都是使用多线程来完成此类任务，其实，在Spring 3.x之后&a…...

编程日记 2023/9/3 9:17:14

2022年06月 C/C++（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程（1~8级）全部真题・点这里第1题：小白鼠再排队2 N只小白鼠(1 < N < 100)，每只鼠头上戴着一顶有颜色的帽子。现在称出每只白鼠的重量，要求按照白鼠重量从小到大的顺序输出它们头上帽子的颜色。帽子的颜色用 “red”，“blue”等字符串来表示。不同的小白鼠可…...

编程日记 2023/9/3 9:16:13

【C++】C++11新特性（下）

上篇文章（C11的新特性（上））我们讲述了C11中的部分重要特性。本篇接着上篇文章进行讲解。本篇文章主要进行讲解：完美转发、新类的功能、可变参数模板、lambda 表达式、包装器。希望本篇文章会对你有所帮助。文章目录一…...

编程日记 2023/9/3 9:15:12

python内网环境安装第三方包

文章目录一、问题二、解决方法三、代码实现一、问题内网安装第三方包的应用场景，一般是一些需要在没网的环境下进行开发的情况。这些环境一般仅支持本地局域网访问，所以只能在不下载任何第三方包的情况下艰难开发。二、解决方法将当前应用依赖的第…...

编程日记 2023/9/3 9:14:10

javaScipt

javaScipt 一、JavaScript简介二、javaScript基础1、输入输出语法2、变量3、常量4、数据类型4.1、数字型 number4.2、字符串类型 string4.3、布尔类型 boolean4.4、未定义类型 undefined4.5、null 空类型4.6、typeof 检测变量数据类型 5、数据类型转换5.1、隐式转换5.2、显示转…...

编程日记 2023/9/3 9:13:08

实测测评｜零注册AI PDF翻译工具：保留排版\+OCR无损翻译，替代DeepL/谷歌翻译

在日常开发、学术科研、外文文献研读场景中，PDF翻译一直是高频刚需痛点。市面上主流的翻译工具普遍存在排版错乱、OCR收费、文件大小受限、强制登录注册等问题，尤其是学术论文、带表格/公式的技术手册、扫描版外文资料，翻译后的可用性极差。 …...

编程新知 2026/5/20 7:24:56

AI英语智能体的开发

构建一个专门用于英语学习的AI智能体（AI Agent），核心在于如何将大语言模型（LLM）的通用能力，转化为符合二语习得（SLA）理论的教学逻辑。这类智能体不仅需要“懂英语”，更需…...

编程新知 2026/5/20 7:00:56

正点原子STM32MP135实战——OP-TEE安全启动与设备树深度适配

1. OP-TEE与STM32MP135开发板简介第一次接触OP-TEE时，我也被这个专业名词唬住了。简单来说，它就像是你手机里的保险箱，专门用来存放和处理敏感信息（比如指纹、支付密码）。在STM32MP135这块开发板上实现OP-TEE&#xf…...

编程新知 2026/5/20 5:43:44

同步、异步与互斥：从通用OS到RTOS的全面解析

一、基础概念：进程与线程1.1 什么是进程？进程是操作系统进行资源分配和调度的基本单位，是一个正在运行的程序实例。1.2 什么是线程？线程是操作系统进行CPU调度的基本单位，是进程内部的一条执行路径（轻量级进…...

编程新知 2026/5/20 4:19:58

如何一键自动化部署Office：LKY Office Tools完整配置指南

如何一键自动化部署Office：LKY Office Tools完整配置指南【免费下载链接】LKY_OfficeTools 一键自动化下载、安装、激活 Office 的利器。项目地址: https://gitcode.com/GitHub_Trending/lk/LKY_OfficeTools 在Windows系统中安装Microsoft Office一直是个…...

编程新知 2026/5/20 3:49:57

LeetCode 所有路径题解

LeetCode 所有路径题解题目描述给定一个有向无环图，找到所有从源节点到目标节点的路径。示例： 输入：graph [[1,2],[3],[3],[]]输出：[[0,1,3],[0,2,3]] 解题思路方法：回溯思路： 使用回溯算法遍历所有可…...

编程新知 2026/5/20 2:36:44

2026年传统视频vs数字人效率对比：差距让很多老板震惊

2026年传统视频vs数字人效率对比：差距让很多老板震惊【导语】传统视频制作要7天，AI数字人只要3-5分钟？效率差距到底有多大？今天用真实数据说话。01 效率差距有多大？先看一组数据很多人对AI数字人的效率提升没有概念…...

编程新知 2026/5/20 2:18:58

仅限本周开放｜Perplexity编程搜索高阶指令集（含12条未公开$context参数），错过再等半年！

更多请点击： https://codechina.net 第一章：Perplexity编程教程搜索概览 Perplexity 是一款以实时网络检索与推理能力见长的 AI 工具，其在编程学习场景中展现出独特优势——它不依赖静态知识库，而是动态调用最新技术文档、GitHub…...

编程新知 2026/5/20 1:01:40

别再傻傻分不清！PECL、CML、LVDS三种高速差分接口，硬件工程师选型避坑指南

高速差分接口选型实战：PECL、CML、LVDS的工程化决策指南当PCB布线密度突破8层板、信号速率迈入Gbps时代，差分接口的选择直接决定系统稳定性。某通信设备厂商曾因误用LVPECL接口导致整批产品EMC测试失败，损失超百万——这类故事在硬件圈屡见不…...

编程新知 2026/5/20 0:54:57

Mac/Linux/Win 跨平台协作难？企业网盘选型必须知道的 3 个标准（含 5 款网盘实测）

对于 2026 年的现代企业而言，业务、设计、研发三大流派往往各自盘踞不同的操作系统生态：业务团队依赖 Windows 处理报表，设计师偏爱 Mac 追求色彩与渲染，而开发者则常年驻扎在 Linux 终端。很多企业在解决跨平台文件共享时&…...

编程新知 2026/5/20 0:30:07

three.js(二)：webpack + three.js + ts

用webpack+ts 开发 three.js 项目

1.创建一个目录，初始化 npm

2.调整 `package.json` 文件

3.安装依赖文件

4.建立项目文件

5.运行项目

6.多页面

相关文章：

three.js(二)：webpack + three.js + ts

最小二乘法处理线性回归

ModbusCRC16校验示例代码

一不留神就掉坑

Redis数据类型(list\set\zset)

TongWeb安装以及集成

ScreenToGif-动图制作软件实用操作

sqlibs安装及复现

OpenAI 创始人 Sam Altman 博客有一篇 10 年前的文章

写的一款简易的热点词汇记录工具

算法通关村——滑动窗口高频问题

mybatis源码学习-2-项目结构

selenium 自动化测试——环境搭建

得物一面，场景题问得有点多！

Prompt Tuning 和instruct tuning

springboot 与异步任务,定时任务,邮件任务

2022年06月 C/C++（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

【C++】C++11新特性（下）

python内网环境安装第三方包

javaScipt

实测测评｜零注册AI PDF翻译工具：保留排版\+OCR无损翻译，替代DeepL/谷歌翻译

AI英语智能体的开发

正点原子STM32MP135实战——OP-TEE安全启动与设备树深度适配

同步、异步与互斥：从通用OS到RTOS的全面解析

如何一键自动化部署Office：LKY Office Tools完整配置指南

LeetCode 所有路径题解

2026年传统视频vs数字人效率对比：差距让很多老板震惊

仅限本周开放｜Perplexity编程搜索高阶指令集（含12条未公开$context参数），错过再等半年！

别再傻傻分不清！PECL、CML、LVDS三种高速差分接口，硬件工程师选型避坑指南

Mac/Linux/Win 跨平台协作难？企业网盘选型必须知道的 3 个标准（含 5 款网盘实测）

用webpack+ts 开发 three.js 项目

1.创建一个目录，初始化 npm

2.调整 package.json 文件

3.安装依赖文件

4.建立项目文件

5.运行项目

6.多页面

相关文章：

2.调整 `package.json` 文件