iT邦幫忙

0

要如用使用THREE.JS自訂義幾何型

  • 分享至 

  • xImage

初學THREE.JS的小白,
最近公司要求將客戶提供各「沙堆」取得的2D圖轉成3D ,
每個沙堆資料由有各六個X , Y數據組成。
如圖:
https://ithelp.ithome.com.tw/upload/images/20210813/20122016t5kgau2L5H.png

目前做法是先把X Y各六個點取出最大做來計重三角型重心點( Triangle.getMidpoint)
然用PolyhedronGeometry,將每個頂點連成面,但成果跟預想的差很遠。


    var Triangle = new THREE.Triangle()
    // 三角形顶点1
    Triangle.a = new THREE.Vector3(50, 0, 0);
    // 三角形顶点2
    Triangle.b = new THREE.Vector3(0, 0, 25);
    // 三角形顶点3
    Triangle.c = new THREE.Vector3(0, 10, 0);
    var Midpoint = new THREE.Vector3();
    // 计算三角形重心,结果保存在参数Midpoint
    Triangle.getMidpoint(Midpoint);

    const verticesOfCube = [
     Midpoint.x, Midpoint.y, Midpoint.z,
     50,0,0, 0,10,0,
        30, 0, 0, 0, 30, 0,
        0, 0, 0, 0, 10, 0,
        -20, 0, 0, 0, 5, 0, 
        -10,0,0,0,10,0
    ];

    const indicesOfFaces = [
        1, 0, 2,
        2, 0, 3,
        3, 0, 4,
        4, 0, 5,
        5, 0, 6,
        6, 0, 7,
        7, 0, 8,
        8, 0, 9,
        9, 0, 10,
        10, 0, 1,
        10,0,2
    ];

    geometry = new THREE.PolyhedronGeometry(verticesOfCube, indicesOfFaces, 100, 2);
    //const edges = new THREE.EdgesGeometry(geometry);
    const meshMaterial = new THREE.MeshBasicMaterial({ 
        color: new THREE.Color('black'),
        transparent: true, 
        opacity:0.7,
        DoubleSide:true
    }) 
  
    //const mesh = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
    //      color: new THREE.Color('black'),
      
    //})); 
        var mesh = new THREE.Mesh(geometry, meshMaterial)
    mesh.position.set(0, 0, 0) 
    scene.add(mesh) 

如圖:
https://ithelp.ithome.com.tw/upload/images/20210813/20122016JrGuPRIDNy.png

看更多先前的討論...收起先前的討論...
淺水員 iT邦大師 6 級 ‧ 2021-08-13 15:28:18 檢舉
看不懂什麼是沙堆。
周藍 iT邦新手 5 級 ‧ 2021-08-13 15:34:39 檢舉
就是一堆沙
周藍 iT邦新手 5 級 ‧ 2021-08-13 15:35:11 檢舉
沙堆(漢語詞語) 沙堆,讀音shā dui,漢語詞語,指沙墩,小沙丘。
淺水員 iT邦大師 6 級 ‧ 2021-08-13 17:18:30 檢舉
我是說,看不出來你要的跟貼出來那張圖有什麼關係。
也許可以用小畫家等軟體在上面標註幾個點,這樣比較知道那張圖的什麼地方跟你的程式碼對應到哪裡。
shijung iT邦新手 4 級 ‧ 2021-08-13 19:36:08 檢舉
六個點在哪XD?
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答