目录
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)来创建每一帧
动画
如果模型包含的动画,需要设置动画控制器或者手动更新模型的属性
=======================================================================
好咯,以上就是支持的格式和渲染的方式啦,补充了部分代码,剩余没有补充的代码也是比较简单好上手的了,相信大家肯定是一看就会的,同时还是继续欢迎大家来补充内容哦,这篇笔记到此就结束啦,下次见~