初學THREE.JS的小白,
最近公司要求將客戶提供各「沙堆」取得的2D圖轉成3D ,
每個沙堆資料由有各六個X , Y數據組成。
如圖:
目前做法是先把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)
如圖: