I am looking to design my own unique geometry for hollow cylinders using three.js. I have attempted to blend elements from the RingGeometry and CylinderGeometry classes, but encountered some visual issues:
- The cap normalization is incorrect (both caps only display texture on top)
- The torso normal is incorrect (inner torso visible only from inside)
Here is an example: (image used for caps) https://i.sstatic.net/EHiTc.jpg
Below is the code snippet:
/**
*
* @param {number} radius
* @param {number} holeRadius
* @param {number} height
* @param {number} segments
* @param {boolean} openEnded
* @param {number} thetaStart
* @param {number} thetaLength
*/
function HollowCylinderGeometry(radius, holeRadius, height, segments, openEnded, thetaStart, thetaLength) {
if (!(this instanceof HollowCylinderGeometry)) {
throw new TypeError("HollowCylinderGeometry needs to be called using new");
}
THREE.Geometry.call(this);
this.type = 'HollowCylinderGeometry';
this.parameters = {
radius: radius,
holeRadius: holeRadius,
height: height,
segments: segments,
openEnded: openEnded,
thetaStart: thetaStart,
thetaLength: thetaLength
};
this.fromBufferGeometry(new HollowCylinderBufferGeometry(radius, holeRadius, height, segments, openEnded, thetaStart, thetaLength));
this.mergeVertices();
}
HollowCylinderGeometry.prototype = Object.create(THREE.Geometry.prototype);
HollowCylinderGeometry.prototype.constructor = HollowCylinderGeometry;
/**
*
* @param {number} radius
* @param {number} holeRadius
* @param {number} height
* @param {number} segments
* @param {boolean} openEnded
* @param {number} thetaStart
* @param {number} thetaLength
*/
function HollowCylinderBufferGeometry(radius, holeRadius, height, segments, openEnded, thetaStart, thetaLength) {
if (!(this instanceof HollowCylinderBufferGeometry)) {
throw new TypeError("HollowCylinderBufferGeometry needs to be called using new");
}
...
}