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

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

news 文章来源：https://blog.csdn.net/weixin_44178305/article/details/132547949 2024/11/27 1:43:01

用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

Linux(实操篇三)

Linux实操篇 Linux(实操篇三)1. 常用基本命令1.7 搜索查找类1.7.1 find查找文件或目录1.7.2 locate快速定位文件路径1.7.3 grep过滤查找及"|"管道符 1.8 压缩和解压类1.8.1 gzip/gunzip压缩1.8.2 zip/unzip压缩1.8.3 tar打包 1.9 磁盘查看和分区类1.9.1 du查看文件和…...

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

数学之美 — 1

为什么你会想和他人共享那些美丽的事物呢？因为这会让他（她）感到愉悦，也能让你在分享的过程中重新欣赏一次事物的美。 ——David Blackwell 1、感官之美，对于那些有规律的事物，你可以利用自己的视觉、触觉、…...

编程日记 2023/9/3 9:11:05

python中的global关键字

在Python中，global关键字用于在函数内部声明一个全局变量。默认情况下，函数内部的变量是局部变量，只能在函数内部访问。使用global关键字可以在函数内部创建或修改全局变量，使其在函数外部也可见和修改。以下是使用global关键字…...

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

Matlab图像处理-幂次变换

幂次变换如下图所示的幂次变换函数曲线图： 当γ <1时，效果和对数变换相似，放大暗处细节，压缩亮处细节，随着数值减少，效果越强。当γ >1时，放大亮处细节，压缩暗处细节&…...

编程日记 2023/9/3 9:09:03

浏览器输入 URL 地址，访问主页的过程

分析&回答浏览器解析域名；TCP建立连接；浏览器向服务器发送HTTP请求；服务器解析请求并返回HTTP报文；浏览器解析并渲染页面；断开连接。反思&扩展域名解析的流程查找浏览器缓存——我们日常浏览网站时&am…...

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

每日一学————基本配置和管理

一、交换机的基本配置配置enable口令、密码和主机名 Switch> (用户执行模式提示符) Switch>enable (进入特权模式) Switch# …...

编程日记 2023/9/3 9:07:01

解决 filezilla 连接服务器失败问题

问题描述： 开始一直用的 XFTP 后来，它变成收费软件了，所以使用filezilla 代替 XFTP 之前用的还好好的，今天突然就报错了：按要求输入相关字段，连接连接失败！！！o(╥﹏╥…...

编程日记 2023/9/3 9:06:00

如何使用Java进行机器学习?

在Java中进行机器学习，可以使用各种开源机器学习库和框架来实现。以下是一些常用的Java机器学习库： Weka：Weka 是一个非常流行的机器学习库，提供了大量的算法和工具，以及用于数据预处理、特征选择和可视化的功能。 De…...

编程日记 2023/9/3 9:05:00

springsecurity+oauth 分布式认证授权笔记总结12

一 springsecurity实现权限认证的笔记 1.1 springsecurity的作用 springsecurity两大核心功能是认证和授权，通过usernamepasswordAuthenticationFilter进行认证；通过filtersecurityintercepter进行授权。springsecurity其实多个filter过滤链进行过滤。…...

编程日记 2023/9/3 9:03:58

如何在职业生涯中取得成功

工作中让你有强烈情绪波动的事情在我的工作经历中，有一次让我经历了强烈情绪波动的事件。我曾在一个高压的项目团队中工作，我们需要在极短的时间内完成一个复杂的客户项目。这个项目的截止日期非常紧迫，而项目的规模和要求也一直在不断增加…...

编程日记 2023/9/3 9:02:57

服饰网站新闻建设/5118站长工具

一、创建文件夹 1.点击"Collections"TAB进入，再次点击【New Collection】按钮创建文件夹。示例图文： 二、定义变量及调用执行测试，方便灵活调用 1.定义全局变量，用于全局使用；操作步骤为：点击…...

编程日记 2024/11/27 0:46:12

如何用织梦仿制网站/企业网站设计素材

参考百度文库 http://wenku.baidu.com/link?urlXEFRxjw_xahctkmvYKlfHsdgBRa9lD1sJCi9vWw_lqE-VMstTDMxrpnalrHEgpDa0SwY9KkYn8wLrc4_SYIbwzYmBf7YXHEfKZBRGGzZidW 一、IC卡分类： 1、非加密存储器卡：卡内的集成电路芯片主要是EEPROM，具有…...

编程日记 2024/11/27 0:39:08

自己做网站步骤/游戏推广公司怎么接游戏的

ArcGIS Server 是功能强大的基于服务器的 GIS 产品，用于构建集中管理的、支持多用户的、具备高级GIS功能的企业级GIS应用与服务，如：空间数据管理、二维三维地图可视化、数据编辑、空间分析等即拿即用的应用和类型丰富的服务。ArcGIS Server 是…...

编程日记 2024/11/26 22:32:57

企业宣传网站源码/近期重大新闻事件

http://bbs.news.tom.com/bbs.php?forumid400&threadid5700&page1来自Tom论坛 >> 新闻贴图Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId889215...

编程日记 2024/11/26 20:11:44

深圳专业网站建设制作/搜索引擎优化的核心是

使用两个具有多DAC同步功能的AD9139器件进行宽带基带I/Q发射器设计Circuits from the Lab参考设计是经过测试的参考设计，有助于加速设计，同时简化系统集成，帮助并解决当今模拟、混合信号和RF设计挑战。如需更多信息和技术支持，请访…...

编程日记 2024/11/26 19:05:51

浙江网站建设/怎么引流客源最好的方法

文章目录1. RAID1.1 RAID磁盘陈列介绍1.2 RAID 0（条带化存储）1.3 RAID 1(镜像存储)1.4 RAID 5磁盘阵列介绍1.5 RAID 6磁盘陈列介绍1.6 RAID 10磁盘阵列介绍1.7 阵列卡介绍2.硬RAID创建磁盘阵列3.软RAID创建磁盘阵列3.1 实例：软创建RAID53.2 实…...

编程日记 2024/11/26 18:55:46