Exploring the realm of custom geometry in three.js, I decided to experiment with modifying Paul Bourke's capsule geometry example.
However, as I delve into creating my own custom capsule geometry, I have encountered two main challenges:
- The orientation of the middle face normals seems off.
- There is a noticeable hard seam running along the side. (EDIT: resolved by explicitly calculating face normals. Updated code can be found in the gist)
I also have an additional question that has been occupying my thoughts:
- Is there a general approach for adding vertex loops within that middle segment?
While I am pleased with the overall geometry, I would appreciate some guidance on addressing these issues. I suspect the problem with the normal orientation lies in the face construction section, so here is a snippet of that part:
for(let i = 0; i <= N/2; i++){
for(let j = 0; j < N; j++){
let vec = new THREE.Vector4(
i * ( N + 1 ) + j ,
i * ( N + 1 ) + ( j + 1 ) ,
( i + 1 ) * ( N + 1 ) + ( j + 1 ) ,
( i + 1 ) * ( N + 1 ) + j
);
let face_1 = new THREE.Face3(vec.x,vec.y,vec.z);
let face_2 = new THREE.Face3(vec.x,vec.z,vec.w);
geometry.faces.push(face_1);
geometry.faces.push(face_2);
}
}