iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
0
Modern Web

在Three.js探索CAD的奧秘系列 第 7

Day 7 : 渲染讀取的三角網格

前言

匯入網格模型,在CAD領域中這件事情是非常重要的,除了完全原創性的設計以外,經常會看到所謂的二次創作,或者是由原創者再稍微編修後的新型創作,因此如何將過去的的模型再度匯入設計軟體,是一個必要存在的功能。

前端渲染網格模型

延續上回我們已經學會如何在前端讀入一個STL檔案,並且將檔案透過 three-stl-loader 套件轉換為 geometry 物件,而這一次我們將要把 geometry 結合先前學到的渲染網格的方法,繪製一整個網格模型出來。

首先打開上回example 3的程式繼續修改,在最下面先建立一個div標籤供Three.js創建canvas使用,在這裡我們定義一個虛擬div標籤並將id設定為view,然後加入到app標籤。

var view = document.createElement("div");
view.setAttribute("id", "view");
$("#app").appendChild(view);

接著我們使用example1的程式,將內容包到一個view的函式內,然後刪掉先前用來建立單片網格的部分程式碼,並在view函式加入一個引數geometry。

var draw = function (geometry) {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("app").appendChild(renderer.domElement);

    var material = new THREE.MeshPhongMaterial({
        //side: THREE.DoubleSide,
        color: 0xff0000
    });

    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    var wireframe = new THREE.WireframeGeometry(geometry);
    var line = new THREE.LineSegments(wireframe);
    line.material.color = new THREE.Color(0xffffff);
    scene.add(line);

    var light = new THREE.PointLight(0xffffff, 1.0);
    light.position.set(0, 1, 1);
    scene.add(light);

    camera.position.z = 5;

    var animate = function () {
        requestAnimationFrame(animate);
        mesh.rotation.y += 0.03;
        line.rotation.y += 0.03;
        renderer.render(scene, camera);
    };

    animate();
};

然後我們把原本讀檔部分的console.log刪掉,改成去呼叫draw函式,並且將讀取完的geometry提供給draw函式。

var model = document.createElement("input");
model.setAttribute("type", "file");
model.onchange = function (e) {
    var file = e.target.files[0];
    if (e.target.files.length == 1) {
        var reader = new FileReader();
        reader.onloadend = function (e) {
            var loader = new STLLoader();
            var geometry = loader.parse(e.target.result);
            draw(geometry);
        };
        reader.readAsBinaryString(file);
    }
};
$("#app").appendChild(model);

到這裡我們已經能夠讀取STL網格模型了,但是如果讀取上回的 monkey.stl 模型,會發現相機怎麼跑到模型裡頭了,如下圖:

https://i.imgur.com/UEPEAKo.gif
相機在 monkey.stl 模型內部的情況

這時候我們只要調整一下相機與光源位置,就可以正常顯示了,結果如圖。

var light = new THREE.PointLight(0xffffff, 1.0);
light.position.set(0, 50, 50);
scene.add(light);

camera.position.z = 50;

https://i.imgur.com/gMek9bS.gif
相機在 monkey.stl 模型外部的情況

範例原始碼

https://github.com/QQBoxy/threecad/blob/master/client/example4/index.js

範例模型檔案

本文使用的檔案為 monkey.stl 可以在這裡找到:
https://github.com/QQBoxy/threecad/tree/master/models

後記

本次我們學會了如何讀取一個三角模型檔案並利用Three.js顯示在畫布上,這對於Web-based的CAD軟體來說是一個非常基本的功能,到目前為止每一個蹲馬步的動作都是必要的技能,希望對大家來說都還不算是很困難,繼續加油吧!


上一篇
Day 6 : 讀取三角網格檔案
下一篇
Day 8 : 模組化CAD平台
系列文
在Three.js探索CAD的奧秘30

尚未有邦友留言

立即登入留言