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

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

news 2025/11/2 8:56:17

用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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点轻量级&#xff…...

编程新知 2025/9/11 12:55:08

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/10/28 17:51:39

k8s业务程序联调工具-KtConnect

概述原理工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...

编程新知 2025/10/30 5:58:19

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

MySQL 知识小结（一）

一、my.cnf配置详解我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...

编程新知 2025/10/28 3:27:57

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/10/30 19:32:24

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/11/1 12:16:28

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/10/28 21:05:15

抽象类和接口（全）

一、抽象类 1.概念：如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象，这样的类就是抽象类。像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法，包含抽象⽅法的类我们称为抽象类。 2.语法在Java中，⼀个类如果被 abs…...

编程新知 2025/10/25 4:26:47

Python 训练营打卡 Day 47

注意力热力图可视化在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/10/26 9:51:09

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

RestClient

C++_核心编程_多态案例二-制作饮品

k8s业务程序联调工具-KtConnect

laravel8+vue3.0+element-plus搭建方法

MySQL 知识小结（一）

解读《网络安全法》最新修订，把握网络安全新趋势

R 语言科研绘图第 55 期 --- 网络图-聚类

PostgreSQL——环境搭建

抽象类和接口（全）

Python 训练营打卡 Day 47

用webpack+ts 开发 three.js 项目

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

2.调整 package.json 文件

3.安装依赖文件

4.建立项目文件

5.运行项目

6.多页面

相关文章：

2.调整 `package.json` 文件