0


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

哦霍霍霍大家早上好哇☀,今天更新早一些来简单对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)来创建每一帧

动画

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

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

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


本文转载自: https://blog.csdn.net/weixin_69868770/article/details/139315170
版权归原作者 Vent472 所有, 如有侵权,请联系我们删除。

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

还没有评论