前端菜鸡流水账日记 -- Threejs支持的格式和渲染方式

目录

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)来创建每一帧

动画

如果模型包含的动画，需要设置动画控制器或者手动更新模型的属性

=======================================================================

好咯，以上就是支持的格式和渲染的方式啦，补充了部分代码，剩余没有补充的代码也是比较简单好上手的了，相信大家肯定是一看就会的，同时还是继续欢迎大家来补充内容哦，这篇笔记到此就结束啦，下次见~