Three.js render .max & .FBX model file All In One

Three.js render .max & .FBX model file All In One

three.js 3D model loaders

https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders

https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/FBXLoader.js

3ds Max / Maya（模型导出的产物）

.max / .ma / .FBX / .tga / .png / .db

https://www.autodesk.com/asean/products/3ds-max/overview

https://www.autodesk.com/asean/products/maya/overview

Blender 模型导出的格式

.glb 单个文件

.gltf 多个文件

Blender 模型导入的格式

FBX + TGA 的典型问题, 做“Web 3D素材库系统”必须知道的坑： ⚠️

❌ 问题1：路径丢失 FBX 贴图
❌ 问题2：贴图分散, 一个 FBX 模型对应多个 TGA
❌ 问题3：Web 不友好， 浏览器不原生支持 TGA（需要解析） 加载慢 不适合 CDN

在 Web 上渲染 .fbx 模型时候，发现纹理贴图 .tga 引用路径丢失 ❌，例子见 demo

https://chatgpt.com/c/6a38f777-3e18-83ea-b699-ead7e8d36e75

3dmax online viewer

https://viewer.autodesk.com/

.gltf & .glb

Where possible, we recommend using glTF (GL Transmission Format).

Both .GLB and .GLTF versions of the format are well supported.

Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load.
Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.

在可能的情况下，我们建议使用 glTF（GL 传输格式）。
.GLB 和 .GLTF 版本的格式都得到很好的支持。
由于 glTF 专注于运行时资产交付，因此传输紧凑且加载速度快。
功能包括网格、材质、纹理、皮肤、骨架、变形目标、动画、灯光和相机。

https://threejs.org/docs/#manual/en/introduction/Loading-3D-models

https://threejs.org/manual/#en/loading-3d-models

FBX2glTF

$  > FBX2glTF ~/models/butterfly.fbx

$  > FBX2glTF --binary --draco --verbose \
          --input ~/models/source/butterfly.fbx \
          --output ~/models/target/butterfly.glb

https://github.com/facebookincubator/FBX2glTF#fbx2gltf

https://github.com/facebookincubator/FBX2glTF/releases/download/v0.9.7/FBX2glTF-darwin-x64

demos

.FBX

.FBX !== .fbx

大写好使 ✅ .FBX

小写不好使 ❌ .fbx

在 Web 上渲染 .fbx 模型时候，发现纹理贴图 .tga 引用路径丢失 ❌

.tga

Truevision Graphics Adapter

Truevision 图像适配器(TGA)，通常称为"targa"(Truevision高级光栅图形适配器)，是Truevision公司开发的非专有图像格式，被Valve广泛采用。文件扩展名为.tga，是VTF纹理文件(en)(.vtf)的基础格式，也是Steam客户端使用的标准图像格式。支持GIMP、Adobe Photoshop等图像编辑软件处理。

https://developer.valvesoftware.com/wiki/Zh/TGA

Truevision TGA, often referred to as TARGA, is a raster graphics file format created by Truevision (now part of Avid Technology). It was the native format of TARGA and VISTA boards, which were the first graphic cards for IBM PC compatibles to support high color or true color display. This family of graphic cards was intended for professional computer image synthesis; the usual resolutions of TGA image files match those of the NTSC and PAL video formats.

TARGA is an acronym for Truevision Advanced Raster Graphics Adapter;
TGA is an initialism for Truevision Graphics Adapter.

Truevision TGA（通常简称为 TARGA）是由 Truevision（现为 Avid Technology 的一部分）开发的一种光栅图形文件格式。它是 TARGA 和 VISTA 显卡的原生格式，这两款显卡是首批支持高色彩或真彩色显示的 IBM PC 兼容机显卡。该系列显卡专为专业计算机图像合成而设计；TGA 图像文件的常用分辨率与 NTSC 和 PAL 视频格式的分辨率相匹配。

TARGA 是 Truevision Advanced Raster Graphics Adapter（Truevision 高级光栅图形适配器）的缩写；
TGA 是 Truevision Graphics Adapter（Truevision 图形适配器）的首字母缩写。

https://en.wikipedia.org/wiki/Truevision_TGA

Truevision TGA，一般被称作TARGA，是一种由Truevision科技（现在已经被Avid科技收购）公司开发的光栅图像格式。这是一种TARGA和VISTA图形卡的原生数据格式，这两种芯片是IBM第一种支持真彩显示的图形卡。这种系列的图像卡是为了用PC进行专业的图像处理和视频编辑而开发的；因为这个原因，正常TGA格式的图像和NTSC和PAL视频格式中的图像是一致的。通常，在PC中，TGA文件以 .tga 后缀结尾。TGA文件因为它的简单、容易实现而变得普遍起来。

https://github.com/microsoft/DirectXTex/wiki/TGA-I-O-Functions/9e8b705c1291dd529d0fdcb9f7dcc74d555331c4

TGA => FBX

https://imagetostl.com/convert/file/tga/to/fbx

Convert PNG, JPG 2D Images to 3D STL Mesh Model File Free Online Tool

https://imagetostl.com/

https://imagetostl.com/cn

https://imagetostl.com/cn/tutorials

制作 3D 模型动画

https://imagetostl.com/cn/tutorials/animating-a-3d-model

https://imagetostl.com/cn/convert/file/fbx/to/gif

Three.js 支持的主流 3D 模型格式有哪些？

import { TGALoader } from 'three/addons/loaders/TGALoader.js';

const loader = new TGALoader();

loader.load('/texture.tga', (texture) => {
  material.map = texture;
  material.needsUpdate = true;
});

https://chatgpt.com/c/6a38f2b0-e05c-83ea-ac66-8a89929ea09f

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---