At last! A real hexsphere!

This commit is contained in:
Tyler Hallada 2019-02-09 17:38:42 -05:00
parent d062708cec
commit 69ac45b21c

View File

@ -6,7 +6,7 @@ const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
console.time("init geo"); console.time("init geo");
const geometry = new THREE.IcosahedronGeometry(10, 0); const geometry = new THREE.IcosahedronGeometry(10, 6);
console.timeEnd("init geo"); console.timeEnd("init geo");
console.time("Hexsphere"); console.time("Hexsphere");
@ -44,16 +44,10 @@ for (let i = 0; i < geometry.faces.length; i += 1) {
const vertexA = geometry.vertices[face.a]; const vertexA = geometry.vertices[face.a];
const vertexB = geometry.vertices[face.b]; const vertexB = geometry.vertices[face.b];
const vertexC = geometry.vertices[face.c]; const vertexC = geometry.vertices[face.c];
// var centroid = new THREE.Vector3(
// (vertexA.x + vertexB.x + vertexC.x) / 3,
// (vertexA.y + vertexB.y + vertexC.y) / 3,
// (vertexA.z + vertexB.z + vertexC.z) / 3,
// );
const vabHalf = vertexB.clone().sub(vertexA).divideScalar(2); const vabHalf = vertexB.clone().sub(vertexA).divideScalar(2);
const pabHalf = vertexA.clone().add(vabHalf); const pabHalf = vertexA.clone().add(vabHalf);
const centroid = vertexC.clone().sub(pabHalf).multiplyScalar(1/3).add(pabHalf); const centroid = vertexC.clone().sub(pabHalf).multiplyScalar(1/3).add(pabHalf);
// var centroidIndex = (newVertices.push(centroid.x, centroid.y, centroid.z) / 3) - 1;
faceCentroids[i] = centroid; faceCentroids[i] = centroid;
} }
@ -65,6 +59,15 @@ const findAdjacentFace = (vertexIndex, faces) => {
} }
} }
const findCenterPoint = faces => {
const centerPoint = new THREE.Vector3(0, 0, 0);
for (let i = 0; i < faces.length; i += 1) {
centerPoint.add(faceCentroids[faces[i]]);
}
centerPoint.divideScalar(faces.length);
return centerPoint;
}
console.time("dual"); console.time("dual");
const midVertCache = {}; const midVertCache = {};
let hexCount = 0; let hexCount = 0;
@ -77,16 +80,13 @@ for (let i = 0; i < originalVertCount; i += 1) {
pentCount += 1; pentCount += 1;
} }
const color = new THREE.Color(Math.random(), Math.random(), Math.random()); const color = new THREE.Color(Math.random(), Math.random(), Math.random());
const centerPoint = findCenterPoint(faces);
for (let j = 0; j < faces.length; j += 1) { for (let j = 0; j < faces.length; j += 1) {
const faceIndex = faces[j]; const faceIndex = faces[j];
const face = geometry.faces[faceIndex]; const face = geometry.faces[faceIndex];
const sortedVerts = [face.a, face.b, face.c].filter(vert => vert !== i); const sortedVerts = [face.a, face.b, face.c].filter(vert => vert !== i);
sortedVerts.unshift(i) sortedVerts.unshift(i)
const vertexA = geometry.vertices[sortedVerts[0]];
const vertexB = geometry.vertices[sortedVerts[1]];
const vertexC = geometry.vertices[sortedVerts[2]];
const centroid = faceCentroids[faceIndex]; const centroid = faceCentroids[faceIndex];
const adjBFace = findAdjacentFace(sortedVerts[1], faces); const adjBFace = findAdjacentFace(sortedVerts[1], faces);
@ -108,11 +108,11 @@ for (let i = 0; i < originalVertCount; i += 1) {
} }
newVertices.push( newVertices.push(
vertexA.x, vertexA.y, vertexA.z, centerPoint.x, centerPoint.y, centerPoint.z,
centroid.x, centroid.y, centroid.z, centroid.x, centroid.y, centroid.z,
midBCentroid.x, midBCentroid.y, midBCentroid.z, midBCentroid.x, midBCentroid.y, midBCentroid.z,
vertexA.x, vertexA.y, vertexA.z, centerPoint.x, centerPoint.y, centerPoint.z,
centroid.x, centroid.y, centroid.z, centroid.x, centroid.y, centroid.z,
midCCentroid.x, midCCentroid.y, midCCentroid.z, midCCentroid.x, midCCentroid.y, midCCentroid.z,
); );
@ -140,9 +140,8 @@ console.time("find geo");
const newGeometry = new THREE.BufferGeometry(); const newGeometry = new THREE.BufferGeometry();
newGeometry.addAttribute("position", new THREE.Float32BufferAttribute(newVertices, 3)); newGeometry.addAttribute("position", new THREE.Float32BufferAttribute(newVertices, 3));
newGeometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3)); newGeometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
// newGeometry.computeFaceNormals(); newGeometry.computeFaceNormals();
// newGeometry.computeVertexNormals(); newGeometry.computeVertexNormals();
// newGeometry.normalize();
console.timeEnd("find geo"); console.timeEnd("find geo");