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

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

news 2026/3/30 11:02:04

用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 是绝配&#xff0c;three.js本身就是用ts写的&#xff0c;ts可以为three 项目提前做好规则约束&#xff0c;使项目的开发更加顺畅。 1.创建一个目录&#xff0c;初始化 npm mkdir demo cd de…...

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

最小二乘法处理线性回归

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

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

ModbusCRC16校验 示例代码

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

编程日记 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类型 列表类型是⽤来存储多个有序的字符串&#xff0c;列表中的每个字符串称为元素&#xff08;element&#xff09;&#xff0c;⼀个列表最多可以存储个2^32 - 1个元素。在Redis中&#xff0c;可以对列表两端插⼊&#xff08;push&#xff09…...

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

TongWeb安装以及集成

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

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

sqlibs安装及复现

sqlibs安装 安装phpstudy后&#xff0c;到github上获取sqlibs源码 sqli-labs项目地址—Github获取&#xff1a;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》&#xff0c;给 19 岁年轻人的建议&#xff0c;从 #参考答案 看到&#xff0c;非常适合我们&#x1f923;年轻人&#xff0c;顺便用 GPT4 重新翻译了下全文。 太长不读纯摘要版本如下&…...

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

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

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

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

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

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

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

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

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

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

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

安装python&#xff0c;并且使用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

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

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

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

Prompt Tuning 和instruct tuning

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

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

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

异步任务 在Java应用中&#xff0c;绝大多数情况下都是通过同步的方式来实现交互处理的&#xff1b;但是在处理与第三方系统交互的时候&#xff0c;容易造成响应迟缓的情况&#xff0c;之前大部分都是使用多线程来完成此类任务&#xff0c;其实&#xff0c;在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新特性（下）

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

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

python内网环境安装第三方包

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

编程日记 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

【稀缺预警】Python 3.14 JIT编译器深度剖析：3类隐性CPU浪费模式+2套自动降本脚本（附真实AWS账单对比图）

第一章&#xff1a;Python 3.14 JIT编译器的演进逻辑与成本敏感性定位Python 3.14 并非官方发布的正式版本&#xff08;截至2024年&#xff0c;CPython最新稳定版为3.12&#xff0c;3.13处于预发布阶段&#xff09;&#xff0c;但本章以假设性技术前瞻视角&#xff0c;探讨若Py…...

编程新知 2026/3/30 10:59:31

AUTOSAR CANFM模块中，BusOff恢复的50ms和1000ms周期到底怎么来的？底层驱动配置详解

AUTOSAR CANFM模块中BusOff恢复时序的硬件级解析 在车载ECU开发中&#xff0c;CAN总线通信的可靠性直接关系到整车功能安全。当节点因连续错误进入BusOff状态时&#xff0c;AUTOSAR标准定义的50ms快恢复周期和1000ms慢恢复周期并非随意设定&#xff0c;而是源于CAN控制器硬件特…...

编程新知 2026/3/30 9:43:55

为什么SwinIR在图像修复中吊打CNN？深入解析Swin-Transformer的三大优势

SwinIR如何重新定义图像修复&#xff1f;Transformer架构的三大技术革命 当你在手机相册里翻出一张十年前的老照片&#xff0c;却发现它模糊得连人脸都难以辨认时&#xff0c;传统CNN模型或许能帮你恢复部分细节&#xff0c;但边缘依然会显得生硬失真。这正是SwinIR要解决的核心…...

编程新知 2026/3/30 9:13:45

5倍效率提升！Marker让PDF转Markdown零格式丢失的全场景指南

5倍效率提升&#xff01;Marker让PDF转Markdown零格式丢失的全场景指南 【免费下载链接】marker 一个高效、准确的工具&#xff0c;能够将 PDF 和图像快速转换为 Markdown、JSON 和 HTML 格式&#xff0c;支持多语言和复杂布局处理&#xff0c;可选集成 LLM 提升精度&#xff0…...

编程新知 2026/3/30 6:54:55

SpringBoot整合ANIMATEDIFF PRO：企业级API网关设计

SpringBoot整合ANIMATEDIFF PRO&#xff1a;企业级API网关设计 动画生成服务在企业级应用中面临高并发挑战&#xff0c;如何构建稳定可靠的API网关成为关键问题 1. 企业级动画生成服务的挑战与需求 在现代企业应用中&#xff0c;AI动画生成服务已经成为内容创作、营销推广、教…...

编程新知 2026/3/30 6:52:54

STM32光敏电阻传感器实战：从硬件接线到代码调试全流程（附避坑指南）

STM32光敏电阻传感器实战&#xff1a;从硬件接线到代码调试全流程&#xff08;附避坑指南&#xff09; 在智能家居和环境监测项目中&#xff0c;光照强度检测是一个基础但关键的功能模块。光敏电阻因其成本低廉、使用简单&#xff0c;成为许多开发者的首选传感器。本文将带你从…...

编程新知 2026/3/30 6:10:43

Dobby跨平台编译全攻略：从环境配置到性能调优的实践指南

Dobby跨平台编译全攻略&#xff1a;从环境配置到性能调优的实践指南 【免费下载链接】Dobby a lightweight, multi-platform, multi-architecture hook framework. 项目地址: https://gitcode.com/gh_mirrors/do/Dobby 跨平台编译是软件开发中实现代码一次编写、多平台运…...

编程新知 2026/3/30 5:34:23

利用AI改写工具，五个策略帮助论文查重率快速降至合规标准

嘿&#xff0c;大家好&#xff01;我是AI菌。今天咱们来聊聊一个让无数学生头疼的问题&#xff1a;论文重复率飙到30%以上怎么办&#xff1f;别慌&#xff0c;我这就分享5个实用降重技巧&#xff0c;帮你一次搞定&#xff0c;轻松压到合格线以下。这些方法都是我亲身试验过的&a…...

编程新知 2026/3/30 5:22:20

OpenClaw飞书机器人配置：Qwen3-32B私有镜像对话触发详解

OpenClaw飞书机器人配置&#xff1a;Qwen3-32B私有镜像对话触发详解 1. 为什么选择OpenClaw飞书Qwen3-32B组合 去年底我开始尝试用AI自动化处理团队日常事务时&#xff0c;发现市面上大多数方案要么需要将敏感数据上传到第三方平台&#xff0c;要么只能完成简单的问答交互。直…...

编程新知 2026/3/30 4:29:45

OpenClaw+GLM-4.7-Flash：智能客服对话系统

OpenClawGLM-4.7-Flash&#xff1a;智能客服对话系统 1. 为什么选择这个组合 去年我在帮朋友的小型电商团队优化客服流程时&#xff0c;发现他们每天要处理大量重复性问题咨询。人工客服在回答"发货时间""退换货政策"这类标准问题时&#xff0c;既消耗人…...

编程新知 2026/3/30 4:13:24