# three-model-view

**Repository Path**: yangchunlei/three-model-view

## Basic Information

- **Project Name**: three-model-view
- **Description**: 3D模型导入 预览
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-02-07
- **Last Updated**: 2024-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Simple3D

## 目的

- 使用 Three.js 解析、加载、预览 3D 模型文件

## 用法

- macOS 或 Linux 运行 `yarn build`
- Windows 运行 `yarn build-win`

  代码构建成功后, 将 `dist` 下构建成功的文件拷贝至工程目录 `public` 等静态目录下，或者，将文件拷贝至 OSS，使用 iframe 调用。

## 参数说明

使用 URL 进行参数注入

| 参数名称  | 值   | 描述               | 默认值 |
| --------- | ---- | ------------------ | ------ |
| path      | url  | 模型存储地址       | ''     |
| panel     | 1、0 | 右上角控制面板     | 0      |
| infoPanel | 1、0 | 左上角模型信息面板 | 0      |

例如：

```js
import React, { useEffect, useState } from "react";

const ThreeDPreview = () => {
  const [url, setUrl] = useState("");

  const queryModalPath = () => {
    setTimeout(() => {
      const modal = "https://*/*.FBX";
      setUrl(modal);
    }, 1000);
  };

  useEffect(() => {
    queryModalPath();
  }, []);

  return (
    <div>
      <iframe
        src={`/3Dlib/index.html?panel=1&infoPanel=1&path=${url}`}
        title="3D"
        style={{ width: "100%", border: 0 }}
      />
    </div>
  );
};

export default ThreeDPreview;
```

## 模型信息收集规则

模型加载完成后，会把模型信息存储到 sessionStorage

模型信息对应规则：

- 格式 (转大写) `Ext`
- 尺寸 (体积) `FileSize`
- 贴图数量 `Texture`
- 动画 `Animation`
- 三角面数量 `Triangles`
- 顶点数 `Vertices`
- UV 信息 `HasUv`

### 收集过程

FBXLoader 源码修改点：

- 劫持模型数据流 并 将数据绑定到 `FBXLoader` 构造函数 `fileSzie` 属性上。
- 劫持模型二进制数据 `objectTree` 并和模型对象 `object` 信息一并由 `load` 方法返回。

  ```js
  // src/loaderFuncMap/fbxLoadModel.js
  const loader = new FBXLoader();
  loader.load(
    this.modelPath,
    ({ object, objectTree }) =>
      this.publicLoadCallback(object, loader.fileSize, objectTree),
    this.loadProgress.bind(this)
  );
  ```

### 收集参数说明

- 3DMAX 绘制：

  采用 Direct3D 的 API 规范。多点多面的信息可以共享到 `法线` 和 `UV` 中，最大限度节省 `顶点` 数量，加快渲染。

- 浏览器绘制：

  采用 WebGL 的 API 规范。当 `法线` 和 `UV` 出现共享信息时，即会分裂出新的 `顶点`。「Unity3D 中使用的 OpenGL 也采用这种算法」

  _Direct3D 是 DirectX 的一部分，微软开发，Windows 独享_

  _WebGL OpenGL 开源框架，兼容全平台_

**单纯的数据统计，并没有对错之分。只是底层框架采用的图形 API 算法不同。**

**Unity3D 遇到导入顶点数量上限的问题这里不做讨论。该工程只负责 Threejs 二次封装用于浏览器预览模型**