目录

Threejs支持的格式：

1.glTF(.gltf/.glb)

2.FBX(.fbx)

3.OBJ(.obj) / MTL(.mtl)

4.3DS(.3ds)

5.DAE(.dae)

6.Othre formats

大致的渲染方式：

初始化场景、相机和渲染器

加载模型

添加模型到场景

设置光照

渲染循环

动画

哦霍霍霍~大家早上好哇☀，今天更新早一些来简单对threejs支持渲染的格式做一个总结，欢迎大家集思广益进行补充~，废话不多说，下边直接开始.....

Threejs支持的格式：

Threejs支持多种的3D模型格式，每种格式都有其特点和用途，下边就是常见的格式和区别：

1.glTF(.gltf/.glb)

.glTF是一种开放的、轻量级的3D模型格式，主要是提高3D内容的传输效率，它以JSON格式存储模型信息，可以包含几何、材质、纹理、动画等

.glb是管理TF的二进制打包格式，将所有的数据都合并到一个文件中，加载更快，适合网络传输

使用GLTFLoader加载这两种格式

2.FBX(.fbx)

Autodesk的FBX格式广泛应用于3D建模软件，支持复杂的3D模型、动画和骨架

使用FBXLoader加载FBX模型

3.OBJ(.obj) / MTL(.mtl)

.OBJ是Wavefront公司的3D模型格式，存储基本几何信息

.MTL文件描述了OBJ模型的材质属性

二者要一起使用，相辅相成

使用OBJLoader加载OBJ模型，同时也需要加载对应的MTL文件

4.3DS(.3ds)

.3DS是3ds Max的早期版本格式，包含基本3D模型数据

使用THREE.TDSLoader 或者 THREE.DSLoader 加载模型

5.DAE(.dae)

Collada是旧的跨平台3D格式，包含3D模型、动画和效果

使用ColladaLoader来加载模型

6.Othre formats

包括STL、CTM、PDB、JSON等，Threejs通过自定义Loader可以支持更多格式

大致的渲染方式：

初始化场景、相机和渲染器

（具体的初始化的咱就不再次介绍了，threejs和cesium的那篇文章中有具体的代码，可以参考）

创建THREE.Scene对象为3D场景

<code>const scene = new THREE.Scene();

创建THREE.Camera对象，定义观察视角

// 定义相机的视角（field of view）、画面宽高比、近裁剪面和远裁剪面

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 设置相机的位置，例如在Z轴正方向上5单位

camera.position.set(0, 0, 5);

在这个例子中：

75是相机的视角（field of view，FOV），以度为单位。

window.innerWidth / window.innerHeight是画面宽高比，确保渲染的图像适应窗口大小。

0.1是近裁剪面，即相机能看到的最近的距离。

1000是远裁剪面，即相机能看到的最远的距离。

camera.position.set(0, 0, 5)将相机设置在原点上方5个单位的地方，这样可以观察到场景的中心。

根据你的需求，还可以创建其他类型的相机，如正交相机（THREE.OrthographicCamera），用于2.5D或等距视图。

创建THREE.WebGLRenderer对象，配置渲染器并将其附加到HTML的<canvas>元素上

<!-- 在HTML中添加一个canvas元素 -->code>

<canvas id="myCanvas"></canvas>code>

<script>

// 创建WebGLRenderer对象

const renderer = new THREE.WebGLRenderer({

canvas: document.getElementById('myCanvas'), // 指定HTML中的canvas元素

antialias: true // 可选，开启抗锯齿

});

// 设置渲染器的大小，使其与canvas元素相同

renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的背景颜色设置为黑色

renderer.setClearColor(0x000000, 1.0);

</script>

script部分的代码可以直接写在js文件中，但是需要保证 id 是一致的

-------------------------------------------------------------------------------------code>

这段代码首先在HTML中创建了一个<canvas>元素，然后在JavaScript中创建THREE.WebGLRenderer对象，并指定HTML中的<canvas>元素作为渲染目标。setSize方法设置渲染器的宽度和高度，使其与窗口大小同步。setClearColor方法设置渲染器的背景颜色。

加载模型