0
Я хотел бы, чтобы сделать это:Three.js: пытается отобразить пользовательскую сетку (ромбический додекаэдр)?
К сожалению, когда я пытаюсь создать пользовательский сетку, я получаю это:
я наткнулся на какой-то старый три. js для рендеринга этого твердого тела, но, к сожалению, он только наполовину полезен, поскольку он полагается на устаревшее THREE.Face4(). Итак, копаясь вокруг StackOverflow, я нашел то, что, как я думал, работал, используя 2 THREE.Face3(). Как вы видели выше, это не сработало. Вот мой код.
//'2 Face3' to emulate 'Face4' function, thanks to @Kevin Miller and
@Jonathan at github.com
function drawSquare(x1, y1, x2, y2) {
var square = new THREE.Geometry();
//set 4 points
square.vertices.push(new THREE.Vector3(x1,y2,0));
square.vertices.push(new THREE.Vector3(x1,y1,0));
square.vertices.push(new THREE.Vector3(x2,y1,0));
square.vertices.push(new THREE.Vector3(x2,y2,0));
//push 1 triangle
square.faces.push(new THREE.Face3(0,1,2));
//push another triangle
square.faces.push(new THREE.Face3(0,3,2));
//return the square object with BOTH faces
return square;
};
//rhombic dodecahedron geometry, thanks to http://www.sacred-geometry.es
//vertices
var vertices = [ new THREE.Vector3(2.04772293123743050, -4.09327412386437040, -5.74908146957292670),
new THREE.Vector3( 7.02732984841516030, 1.40331541320251810, -1.62706516545639390),
new THREE.Vector3(4.22549114271519950, -1.62031854283173550, 5.78962800381778210),
new THREE.Vector3(0.75411577446253997, 7.11690807989861880, -1.66761169970125600),
new THREE.Vector3(-0.75411577446252998, -7.11690807989862510, 1.66761169970125020),
new THREE.Vector3(-4.22549114271518980, 1.62031854283173260, -5.78962800381778920),
new THREE.Vector3(-2.0477229312374288, 4.09327412386436950, 5.74908146957292670),
new THREE.Vector3(-7.02732984841515230, -1.40331541320252740, 1.62706516545639970),
new THREE.Vector3(6.27321407395262300, -5.71359266669610030, 0.04054653424485652),
new THREE.Vector3(2.80183870569996340, 3.02363395603425690, -7.41669316927418000),
new THREE.Vector3(4.97960691717773150, 5.49658953706689160, 4.12201630411653590),
new THREE.Vector3(-2.80183870569996340, -3.02363395603425690, 7.41669316927418000),
new THREE.Vector3(-4.97960691717773150, -5.49658953706689160, -4.12201630411653590),
new THREE.Vector3(-6.27321407395262480, 5.71359266669610210, -0.04054653424485653) ];
//faces
var faces = [ drawSquare(vertices[8],vertices[0],vertices[9],vertices[1]).faces[0],
drawSquare(vertices[8],vertices[0],vertices[9],vertices[1]).faces[1],
drawSquare(vertices[8],vertices[1],vertices[10],vertices[2]).faces[0],
drawSquare(vertices[8],vertices[1],vertices[10],vertices[2]).faces[1],
drawSquare(vertices[8],vertices[2],vertices[11],vertices[4]).faces[0],
drawSquare(vertices[8],vertices[2],vertices[11],vertices[4]).faces[1],
drawSquare(vertices[8],vertices[4],vertices[12],vertices[0]).faces[0],
drawSquare(vertices[8],vertices[4],vertices[12],vertices[0]).faces[1],
drawSquare(vertices[12],vertices[5],vertices[9],vertices[0]).faces[0],
drawSquare(vertices[12],vertices[5],vertices[9],vertices[0]).faces[1],
drawSquare(vertices[13],vertices[3],vertices[9],vertices[5]).faces[0],
drawSquare(vertices[13],vertices[3],vertices[9],vertices[5]).faces[1],
drawSquare(vertices[10],vertices[1],vertices[9],vertices[3]).faces[0],
drawSquare(vertices[10],vertices[1],vertices[9],vertices[3]).faces[1],
drawSquare(vertices[10],vertices[3],vertices[13],vertices[6]).faces[0],
drawSquare(vertices[10],vertices[3],vertices[13],vertices[6]).faces[1],
drawSquare(vertices[11],vertices[2],vertices[10],vertices[6]).faces[0],
drawSquare(vertices[11],vertices[2],vertices[10],vertices[6]).faces[1],
drawSquare(vertices[11],vertices[7],vertices[12],vertices[4]).faces[0],
drawSquare(vertices[11],vertices[7],vertices[12],vertices[4]).faces[1],
drawSquare(vertices[12],vertices[7],vertices[13],vertices[5]).faces[0],
drawSquare(vertices[12],vertices[7],vertices[13],vertices[5]).faces[1],
drawSquare(vertices[13],vertices[7],vertices[11],vertices[6]).faces[0],
drawSquare(vertices[13],vertices[7],vertices[11],vertices[6]).faces[1] ];
//create the mesh
var rhombic_dodecahedron_geo = new THREE.Geometry();
for(c=0; c<vertices.length; c++) { rhombic_dodecahedron_geo.vertices.push(vertices[c]) };
for(d=0; d<faces.length; d++) { rhombic_dodecahedron_geo.faces.push(faces[d]) };
var rhombic_dodecahedron_mat = new THREE.MeshBasicMaterial({color: 0x4B32AF, wireframe: false});
rhombic_dodecahedron = new THREE.Mesh(rhombic_dodecahedron_geo, rhombic_dodecahedron_mat);
scene.add(rhombic_dodecahedron);
Возможно ли выявить какие-либо ошибки? Заранее спасибо за вашу помощь в этой неприятной проблеме.
еще один отличный, основательный ответ от @WestLangley. большое спасибо! – Ice101781
один вопрос: я заметил, что вы поместили грани в порядке возрастания x-координат. делает ли это навивочный порядок против часовой стрелки, или я пропущу что-то еще? заранее спасибо. – Ice101781
No.Вершины каждой грани должны иметь порядок намотки против часовой стрелки, когда лицо обращено к вам. – WestLangley