# threejs-create-glb

**Repository Path**: caiming1/threejs-create-glb

## Basic Information

- **Project Name**: threejs-create-glb
- **Description**: 基于threejs v0.162 构建glb模型并保存至本地
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-20
- **Last Updated**: 2025-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Threejs

## README

# 基于threejs v0.162 构建glb模型并保存

**说明**：读取固定格式本地上传的DAT文件，解析并构建三维表面模型。读取其中选定的值，写入顶点颜色，直接构建带有颜色的三维模型

## 安装依赖
```bash
npm install
```

## 启动项目
```bash
npm run dev
```

### 其他准备
#### 模型文件
需要选取一个DAT文件用于建模，将其以服务的形式发布出来，并修改此处代码
`./src/scripts/MainFunction.ts`
```ts
console.log("TestMain....");

// TODO:替换为自己的模型文件地址
const meshFileURL = "http://127.0.0.1:8080/HYD_2023_12_16_16_0_0.DAT";
const fileContent = await GetURLContent(meshFileURL);

// NOTE:1获取dat文件并进行三维模型构建（带UV坐标）
let mesh = ParseDATFromFileContent(fileContent);
scene.add(mesh);
```

#### 纹理图片
需要将生成的纹理图片文件夹以服务方式发布出来，并修改此处代码
`./src/scripts/MainFunction.ts`
```ts
// NOTE:2从浏览器中下载已保存好的温度纹理图，处理灰度值解析为温度，并将其转为颜色进行加载显示
let currentImageIndex:number = 0; // 当前显示的图片索引
let currentImageUrl:string = ""; // 当前显示的图片 URL
let switchInterval: number | undefined; // 定时器 ID

// TODO:替换为自己的温度图片纹理地址
const baseUrl = "http://127.0.0.1:8082/"; 

let imageUrls = await GetImages(baseUrl);
if (imageUrls.length > 0) {
    // 如果是第一次获取图片，设置初始背景
    if (!currentImageUrl) {
        currentImageUrl = imageUrls[0];
    }
}

```

### 纹理图片生成
纹理图片通过读取本地DAT数据所在文件夹，生成相应的PNG格式图片用于MESH模型的纹理，具体代码参考[此处内容](https://gitee.com/caiming1/create_png_img)


## 代码说明

### 程序入口
`./src/components/CreateCube.vue`中为整个项目的入口

### DAT数据处理
`./src/scripts/functionsLab.ts`中记录着处理DAT文件构建模型的内容

### 其他文件
`./src/createModel.ts`用于构建threejs中的`THREE.Mesh`对象
`./src/hydroData.ts`用于处理DAT文件的类
`./src/dealPropertyValue.ts`用于将读取的值转为颜色rgba
`./src/functionsLab.ts`函数库


## 示例效果
### 长江武汉段效果
基于DAT数据，解析获取左右岸点构建河流模型；以温度值为例，转换为颜色纹理，进行动态更换

![20250107效果](./screenshots/GIF%202025-1-7%2014-20-30.gif)

### 洪湖模型效果
基于PLT数据，解析获取湖泊模型；读取DAT数据，解析点z值，更新模型顶点位置。解析温度值，转换为颜色纹理，进行展示

![20250115效果](./screenshots/Snipaste_2025-01-15_11-45-22.png)