# 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**: 2026-01-28

## 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

### 全景图切割天空盒工具

https://jaxry.github.io/panorama-to-cubemap/

### 模型搜索

https://sketchfab.com/

### 光泽球 资源

https://observablehq.com/d/2c53c7ee9f619740?ui=classic


### 下载模型网站

https://sketchfab.com/3d-models

### 用 [zustand](https://zustand-demo.pmnd.rs/) 来做全局状态管理：
npm install --save zustand

### 物理引擎
npm install --save cannon-es

### 粒子效果库
npm install --save three.quarks

### 生成地图geojson数据
你可以下载 json 到本地或者直接用这个链接。
https://datav.aliyun.com/portal/school/atlas/area_selector

### coordinates 是经纬度的数组，这里要用墨卡托算法转换为二维坐标。
pnpm install --save d3-geo
pnpm install --save-dev @types/d3-geo

### 世界地图geojson数据
选择低分辨率、全部地区，然后点击右下角的按钮下载 geojson。
https://geojson-maps.kyd.au/

### 工具，资源网站汇总
1. 千图网
    https://www.58pic.com/
    图片资源，比如上面地球用的光圈是从这个网站搜的。
    这个网站收费，但是每天一次免费下载机会，我是用两个账号，每天下两次需要的图片。
    不是给他家打广告，类似的资源网站大家可以自己找。
    搜索引擎搜出来的基本都不能用，还是得从专门的图片资源网站找。
2. 爱听音乐网
    mp3 和歌词是从这个网站下载的
    https://www.2t58.com/
    每天 3 次免费下载机会。
3. 爱给网
    很多时候，我们需要一些音效，比如之前小球碰撞地面的时候。
    就可以从这里找：
    https://www.aigei.com/sound/class/
4. sketchfab
    免费模型分享网站，小册里用到的 glb 模型基本都是从这里下载的：
5. 全景图 -> 天空盒分割工具
    有时候需要把全景图分割成上下左右前后 6 张图，就可以用这个工具
    https://jaxry.github.io/panorama-to-cubemap/
    网上搜一下全景图，然后用这个工具来切割成天空盒：
    这种看着比较扭曲的，就是全景图：
    x、y、z 就是 xyz 轴，然后 px 就是 positive x 正半轴，nx 是 negative x 负半轴。

6. 缓动动画函数可以在这里调效果：
    https://gsap.com/docs/v3/Eases/