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

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

news 2026/2/10 20:57:23

用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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...

编程新知 2026/2/10 8:01:46

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端目录技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar：依赖注入与仓储模式实践在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败网络不同，需要使用镜像源按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...

编程新知 2026/1/20 17:16:46

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2026/2/7 10:47:09

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

23-Oracle 23 ai 区块链表（Blockchain Table）

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

C# SqlSugar：依赖注入与仓储模式实践

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

Maven 概述、安装、配置、仓库、私服详解

Python 包管理器 uv 介绍

SQL慢可能是触发了ring buffer

用webpack+ts 开发 three.js 项目

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

2.调整 package.json 文件

3.安装依赖文件

4.建立项目文件

5.运行项目

6.多页面

相关文章：

2.调整 `package.json` 文件