# threejsWebGlProject

**Repository Path**: javafdx/threejs-web-gl-project

## Basic Information

- **Project Name**: threejsWebGlProject
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-01
- **Last Updated**: 2025-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

https://www.cpengx.cn

http://www.yanhuangxueyuan.com/threejs/docs/index.html#manual/zh/

node版本：

nvm use 22.12.0

---

02 juejin  node版本 21.1.0

npx live-server

`npx live-server` 是一个用于启动本地开发服务器的命令，通常用于前端开发中实时预览和调试网页应用。

这个命令会自动安装并运行 `live-server` 包，无需预先全局安装

## 功能特点

* **实时重载**：当文件发生变化时，浏览器会自动刷新
* **轻量级**：基于 Node.js 的简单 HTTP 服务器
* **支持 WebSocket**：用于实现热重载功能
*

然后安装下 three 的类型包

这样写代码就有类型提示了：

npm install --save-dev @types/three

### 创建项目：

nvm use 22.12.0
npx create-vite 03-juejinProject
npm install
npm install --save three
npm install --save-dev @types/three

`
Package name:
│  03-juejinproject
│
◇  Select a framework:
│  Vanilla
│
◇  Select a variant:
│  JavaScript
│
◇  Scaffolding project in D:\threejsWebGlProject\03-juejinProject...
│
└  Done. Now run:

cd 03-juejinProject
npm install
npm run dev
`

### 案例模型

https://github.com/KhronosGroup/glTF-Sample-Models/tree/main/2.0#showcase

https://gitee.com/zhao_zhenshun/threejs-course-code/blob/main/box3-test/public/duck.glb

https://github.com/QuarkGluonPlasma/threejs-course-code/blob/main/snowy-forest/public

### 文件格式转换gltf-pipeline

https://www.npmjs.com/package/gltf-pipeline

**如果我有一个 gltf + bin + jpg/png，如何转为 glb 呢？**

**或者 glb 文件如何转换为 gltf + bin + jpg/png 呢**

**这就要用到一个 npm 包 **[gltf-pipeline](https://www.npmjs.com/package/gltf-pipeline "https://www.npmjs.com/package/gltf-pipeline") 了

### 压缩模型

**gltf 模型通常会比较大，导致 3D 场景加载较慢。**

**那有没有啥优化加载性能的方式呢？**

**有，就是 Draco。**

[github.com/google/drac…](https://github.com/google/draco "https://github.com/google/draco")

**它是谷歌推出的，用于压缩和解压缩 3D 网格模型的一个库。**

**gltf-pipeline 支持了 draco 的压缩和解压缩。**

**我们来试一下：**

npx gltf-pipeline -i ./public/Michelle.glb -o ./public/Michelle2.glb -d

### 噪声库

npm install --save simplex-noise

### 动画库

npm install --save @tweenjs/tween.js

npm install gsap

### 文字组件

npm install --save three-spritetext

### lodash

lodash 的 throttle 方法来节流

npm install --save lodash-es