.stl格式模型加载

本文是Three.js电子书的14.2节

基本所有的三维软件都支持导出.stl格式的三维模型文件，.stl格式的三维模型不包含材质Material信息，只包含几何体顶点数据的信息，你可以简单地把stl文件理解为几何体对象Geometry，本节课素材box.STL是一个立方体，你可以用记事本或代码编辑器打开文件box.STL查看stl的数据结构。

stl文件数据结构

.stl文件格式的数据结构，对于大多数普通开发者来说，如果仅仅为了加载显示一个三维模型，也没必要掌握，这里之所以要强调，不是为了让你记住，而是为了从底层了解Threejs模型加载的原理，达到举一反三的目的

三个位置坐标和一个三角形面的法线方向向量是一组数据，这一组数据表示一个三角形面的信息，可以回忆下第二章关于三角形面Face3的讲解。

表示一个三角形面信息的一组数据

//三角面1facet normal 0 0 -1    //三角形面法向量outer loopvertex 50 50 -50   //顶点位置vertex 50 -50 -50  //顶点位置vertex -50 50 -50  //顶点位置endloopendfacet

一个立方体有6个矩形平面，每个矩形平面至少需要两个三角形拼接而成。那么立方体6个矩形平面至少需要12个三角形面构成,你可以查看文件box.STL中的12个三角形信息。

solid box  //文件名字
//三角面1facet normal 0 0 -1    //三角形面法向量outer loopvertex 50 50 -50   //顶点位置vertex 50 -50 -50  //顶点位置vertex -50 50 -50  //顶点位置endloopendfacet
//三角面2facet normal 0 0 -1    //三角形面法向量outer loopvertex -50 50 -50   //顶点位置vertex 50 -50 -50   //顶点位置vertex -50 -50 -50  //顶点位置endloopendfacetfacet normal 0 1 0..........
//三角面12facet normal -1 0 0outer loopvertex -50 -50 -50vertex -50 50 50vertex -50 50 -50endloopendfacet
endsolid

通过`STLLoader.js`加载.stl文件

如果你想通过Threejs加载.stl格式三维模型文件，可以使用Threejs提供的一个扩展库stl加载器STLLoader.js，你可以在Three.js-master包中找到STLLoader.js文件,具体路径是three.js-master\examples\js\loaders.

.html文件中引入Threejs的扩展库STLLoader.js,引入该文件后，就可以在代码中使用构造函数THREE.STLLoader()实例化一个加载器。

<!--引入STLLoader.js文件-->
<script src="STLLoader.js"></script>

通过构造函数THREE.STLLoader()可以把.stl文件中几何体顶点信息提取出来转化为Three.js自身格式的几何体对象BufferGeometry。如果你有兴趣可以阅读STLLoader.js源码，尤其是你想独立开发自己公司特定格式加载器的情况下，更有必要参照学习。

// THREE.STLLoader创建一个加载器
var loader = new THREE.STLLoader();
loader.load('立方体.stl',function (geometry) {// 加载完成后会返回一个几何体对象BufferGeometry，你可以通过Mesh、Points等方式渲染该几何体
})

/*** stl数据加载*/
var loader = new THREE.STLLoader();
// 立方体默认尺寸长宽高各200
loader.load('立方体.stl',function (geometry) {// 控制台查看加载放回的threejs对象结构console.log(geometry);// 查看顶点数，一个立方体6个矩形面，每个矩形面至少2个三角面，每个三角面3个顶点，// 如果没有索引index复用顶点，就是说一个立方体至少36个顶点console.log(geometry.attributes.position.count);// 缩放几何体// geometry.scale(0.5,0.5,0.5);// 几何体居中// geometry.center();// 平移立方体// geometry.translate(-50,-50,-50);var material = new THREE.MeshLambertMaterial({color: 0x0000ff,}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中
})

使用点模型渲染STL文件

你可以使用下面代码代替上面代码，查看Three.js如果通过点模型Points渲染stl文件中的顶点数据。

/*** 点渲染模式*/loader.load('离心叶轮.stl',function (geometry) {var material = new THREE.PointsMaterial({color: 0x000000,size: 0.5//点对象像素尺寸}); //材质对象var points = new THREE.Points(geometry, material); //点模型对象scene.add(points); //点对象添加到场景中})

Three.js加载.stl格式模型相关推荐

three.js加载PDB格式模型(vue中使用three.js55)
加载PDB格式模型 1.demo效果 2.实现要点 2.1 PDB模型放置路径 2.2 加载PDB模型 2.3 处理分子顶点 2.4 处理分子连线 3.demo代码 1.demo效果如上图,该dem ...
cesium模型加载-加载fbx格式模型
整体思路: fbx格式→dae格式→gltf格式→cesium加载gltf格式模型具体方法: 1. fbx格式→dae格式工具:3dsMax, 3dsMax插件:OpenCOLLADA, 下载地址 ...
three.js 加载obj+mtl模型
本文提供了three.js中实现将obj+mtl模型加载到场景中的方法. 我们欲实现将桥模型加载到场景中,并对桥设置透明度: 实现过程: 分别导入three.js中的OBJLoader,MTLLo ...
Three.js - 加载 TGA 格式的纹理
1.TGA格式 TGA(Targa)格式是计算机上应用最广泛的图象格式. 在兼顾了BMP的图象质量的同时又兼顾了JPEG的体积优势. 并且还有自身的特点:通道效果.方向性. 在CG领域常作为影视动画的 ...
three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型
概述: 现在有一个从3dmax导出的gltf模型,贴图方式是透明贴图,想要用three.js加载显示出来,但是在gltf Viewer中预览时是不支持透明贴图的,不知道是不是模型的问题,从网上查了很多 ...
threejs封装加载 .glb 格式模型，修改贴图
组件 <template><div id="modelCreation"><slot></slot></div> < ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...
超图桌面版加载obj 3D模型 - 2
在 https://blog.csdn.net/bcbobo21cn/article/details/109041525 里,加载obj格式模型没有出来效果: 下面来看一下其他方法:当前用的版本是10 ...
vue+three.js加载本地stl模型无法显示的解决办法
先放代码 <template><div><div id="container"></div></div> </te ...

Three.js加载.stl格式模型

.stl格式模型加载

stl文件数据结构

通过`STLLoader.js`加载.stl文件

使用点模型渲染STL文件

Three.js加载.stl格式模型相关推荐

最新文章

热门文章

Three.js加载.stl格式模型

.stl格式模型加载

stl文件数据结构

通过STLLoader.js加载.stl文件

使用点模型渲染STL文件

Three.js加载.stl格式模型相关推荐

最新文章

热门文章

通过`STLLoader.js`加载.stl文件