目录
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场景
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元素 --><canvas id="myCanvas"></canvas><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 是一致的-------------------------------------------------------------------------------------这段代码首先在HTML中创建了一个<canvas>元素，然后在JavaScript中创建THREE.WebGLRenderer对象，并指定HTML中的<canvas>元素作为渲染目标。setSize方法设置渲染器的宽度和高度，使其与窗口大小同步。setClearColor方法设置渲染器的背景颜色。加载模型
根据对应的模型格式创建相对应的Loader，如GLTFLoader或者OBJLoader
调用Loader.loader()方法加载模型文件，加载完成后回调函数中处理模型数据
添加模型到场景
在模型加载完成后，将模型对象添加到场景中
设置光照
创建THREE.Light对象，如点光源、平行光或聚光灯，根据需求添加到场景
渲染循环
使用requestAnimationFrame创建一个渲染循环，调用renderer.render(scene,camera)来创建每一帧
动画
如果模型包含的动画，需要设置动画控制器或者手动更新模型的属性
=======================================================================
好咯，以上就是支持的格式和渲染的方式啦，补充了部分代码，剩余没有补充的代码也是比较简单好上手的了，相信大家肯定是一看就会的，同时还是继续欢迎大家来补充内容哦，这篇笔记到此就结束啦，下次见~