通過three.js實現簡易3D打印模型切片展示

現在的頁面展示要求越來越高，美的展示總能吸引更多的訪客。最近在學習3D打印中的切片算法，剛剛入門，發現通過three.js框架可以很好展示出3D切片細節（雖然我做的比較簡單）。

//==========================================================
//導入three.js和mygeo.js文件（自定義幾何體頂點和三角片信息）
//==========================================================

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor("white");
document.body.appendChild(renderer.domElement);
//上面6行初始化場景、照相機及渲染器=========================


var axes = new THREE.AxisHelper(10);
scene.add(axes);
//上面兩行畫出輔助坐標系

//根據mygeo.js中的信息畫自定義幾何體
var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeFaceNormals();
ma = new THREE.MeshBasicMaterial({color: 'black', wireframe: true});
var G = new THREE.Mesh(geom,ma);
scene.add(G);
//上面7行畫出自定義的立體幾何體

camera.position.x = 5;
camera.position.y = 6;
camera.position.z = 8;
camera.lookAt(scene.position);
//上面幾行設置相機位置

//自定義的三角形片和Z=h截面總有2個交點

for(var h = 0.5;h <= 6;h += 0.5)
{
    var intersection = new Array();
    for(var F = 0;F < faces.length;F++)
    {
        var point1 = vertices[faces[F].a];
        var point2 = vertices[faces[F].b];
        var point3 = vertices[faces[F].c];
        var surface = [point1,point2,point3];


        if((surface[0].z-h)*(surface[1].z-h)<0)  //0-1
        {
            var m = (h-surface[0].z)/(surface[1].z-surface[0].z);
            var x = m * (surface[1].x-surface[0].x) + surface[0].x;
            var y = m * (surface[1].y-surface[0].y) + surface[0].y;
            var p = [x,y,h];
            intersection.push(p);
        }
        if((surface[0].z-h)*(surface[2].z-h)<0)  //0-2
        {
            var m = (h-surface[0].z)/(surface[2].z-surface[0].z);
            var x = m * (surface[2].x-surface[0].x) + surface[0].x;
            var y = m * (surface[2].y-surface[0].y) + surface[0].y;
            var p = [x,y,h];
            intersection.push(p);
        }
        if((surface[1].z-h)*(surface[2].z-h)<0)  //1-2
        {
            var m = (h-surface[1].z)/(surface[2].z-surface[1].z);
            var x = m * (surface[2].x-surface[1].x) + surface[1].x;
            var y = m * (surface[2].y-surface[1].y) + surface[1].y;
            var p = [x,y,h];
            intersection.push(p);
        }    
    }
    
    var material = new THREE.LineBasicMaterial({color: "red", linewidth: 6});
    var geometry = new THREE.Geometry();
    for(var i1=0;i1<intersection.length;i1++)
    {
        var p1 = new THREE.Vector3();
        p1.set(intersection[i1][0],intersection[i1][1],intersection[i1][2]);
        geometry.vertices.push(p1);
    }
    var line = new THREE.Line(geometry,material);
    scene.add(line);
}

renderer.render(scene, camera);