项目实训(三):web读取ply或stl三维模型文件

在本次项目中,老师为我们提供了多种三维模型格式,有ply,stl,off等等,本来以为需要各自编写程序才能读取,后来发现three.js中有自带的loader.

以stl为例:

<!--以下是html格式>
<!--引入STLLoader.js文件-->
<script src="STLLoader.js"></script>


<script>
/**
 * 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,
  }); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  scene.add(mesh); //网格模型添加到场景中
})
<script>

以上提供了很多拓展，其实，必要部分非常简洁:

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

<script>
var loader = new THREE.STLLoader();
loader.load('立方体.stl',function (geometry) {
  var material = new THREE.MeshLambertMaterial({
    color: 0x0000ff,
  }); 
  var mesh = new THREE.Mesh(geometry, material); 
  scene.add(mesh);
})
</script>

然后ply的方法也大差不差:

<script src="/lib/js/loaders/PLYLoader.js"></script>
<script>
 var loader = new THREE.PLYLoader();
        loader.load("/lib/models/ply/binary/Lucy100k.ply", function (geometry) {

            //更新顶点的法向量
            geometry.computeVertexNormals();

            //创建纹理，并将模型添加到场景道中
            var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
            var mesh = new THREE.Mesh( geometry, material );
            mesh.rotation.y = Math.PI;
            mesh.scale.set(0.05, 0.05, 0.05);
            scene.add( mesh );
        });
</script>

off文件的读取方法暂时还在研究。