I have an arbitrary tubeGeometry made from a curved path.
How can I add End Caps to it.
Don’t want hollow tube.
It’s not possible to apply end caps, you can only close a tube like demonstrated in this example:
https://threejs.org/examples/webgl_geometry_extrude_splines
Check/uncheck the “closed” checkbox to see the different.
Do you mean something like that? (example 0.4 * Math.sin( Math.PI * 2 * v ))
You can do things like that with my addon THREEf. Addon. Produces almost infinite many time-varying geometries with functions
examples https://hofk.de/main/threejs/sandboxthreef/examplesTHREEf%20r90.html
https://hofk.de/main/threejs/sandboxthreef/formLibrary.html
e.g.
//0011 curved cylinder @author hofk
withBottom: true,
moveX: function ( u, v, t ) { return Math.exp( -200 * v * v * v * v ) }
How to find the correct mathematical formula
How to get Starting and Ending Cap Vertices (Blue) to make a shape (like Red) out of them and use the shape as End Caps?
Not so difficult, actually.
You know amount of radial segments, you know amount of tubular segments, so you can get information about vertices of start and end segments:
https://jsfiddle.net/prisoner849/6jp3snvq/
Another thing you’ll need are points for start and end of the curve.
Something like:
var curve = _your_curve_;
var pointStart = curve.getPoint(0);
var pointEnd = curve.getPoint(1);
https://jsfiddle.net/prisoner849/25mLpg3r/
The last thing is to set .index for geometries so you’ll have faces:
https://jsfiddle.net/prisoner849/yueLpdb2/
Or you can set index without setting that mid point, using just points of the tube’s ends 
Creativity is up to you 
2 Likes
Your code makes new meshes for end caps. how to make end caps part of the tube?
The code creates geometries. I use meshes just to visualize the result.
Use THREE.BufferGeometryUtils.mergeBufferGeometries() to make caps part of the tube.
is it possible and would you know how to close the gap between theta start and theta length if it is not a complete cylinder by any chance?
heres a visual reference to what i mean…
where the orange outlines would make up “solid” faces?
@forerunrun
Somehow your question is similar to these topic and post: Group And Animate Meshes - #8 by prisoner849
Agreed it is, i used the image of the cylinder for simplicity sake, i actually intend to try and use the same principle for a sphere with less phi length, like so…
which i guess has the same principle but i can only imagine a lot more difficult to work out, do you know if someone has achived this before?
1 Like
I have done something like this in my Addon. Produces almost infinite many time-varying geometries with functions - #24 by hofk.
However, the code is not easy to keep track of.
yeah, was just looking into the link you sent, thanks for the link man, gonna give it a shot but honestly it doesn’t look easy aha.
The thing itself is not so complicated, the problem is the embedding in the complex addon.
I myself have problems when I want to extract a piece from one of my addons for a simple thing.
Look for wedges.
To build such a sphere, you need one sphere and two half-circles.
Example: https://jsfiddle.net/prisoner849/cLqrghdm/
Picture:
Code:
let r = 2.5;
let wS = 16;
let hS = 8;
let phiStart = Math.PI;
let phiLength = Math.PI * 1.35;
let gSphere = new THREE.SphereGeometry(r, wS, hS, phiStart, phiLength);
let gCircle1 = new THREE.CircleGeometry(r, hS, Math.PI * 1.5, Math.PI);
gCircle1.rotateY(Math.PI + phiStart);
let gCircle2 = new THREE.CircleGeometry(r, hS, Math.PI * 0.5, Math.PI);
gCircle2.rotateY(phiStart + phiLength);
let g = BufferGeometryUtils.mergeBufferGeometries([gSphere, gCircle1, gCircle2]);
let m = new THREE.MeshPhongMaterial({color: 0x007fff, flatShading: true});
let o = new THREE.Mesh(g, m);
scene.add(o);
1 Like
@prisoner849 Ahh man!! no way!! that’s really cool of you! i was going off of your example from yesterday and going the ultra long route by creating BufferGeometry from points, i got 2 faces together last night and it was proving to be a very long task…
let sg = new THREE.BufferGeometry().setFromPoints(
[
new THREE.Vector3(0, cH, 0),
new THREE.Vector3(-1+cH*0.8125,1-cH*0.015625, 0),//.applyAxisAngle(new THREE.Vector3(0, 1, 0), perc1 * Math.PI /180),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(-1+cH*0.8125,1-cH*0.015625, 0),//.applyAxisAngle(new THREE.Vector3(0, 1, 0), perc1 * Math.PI /180),
new THREE.Vector3(-1+cH*0.609375,1-cH*0.078125, 0),//.applyAxisAngle(new THREE.Vector3(0, 1, 0), perc1 * Math.PI /180),
new THREE.Vector3(0, 0, 0)
// new THREE.Vector3(0, cH * 0.3125, 0.1875),
// new THREE.Vector3(0, cH * 0.25, 0.25),
// new THREE.Vector3(0, cH * 0.1875, 0.3125),
// new THREE.Vector3(0, cH * 0.125, 0.375),
// new THREE.Vector3(0, cH * 0.0625, 0.4375),
// new THREE.Vector3(0, cH * 0, ch * 0.5),
// new THREE.Vector3(0, cH * -0.0625, 0.4375),
// new THREE.Vector3(0, cH * -0.125, 0.375),
// new THREE.Vector3(0, cH * -0.1875, 0.3125),
// new THREE.Vector3(0, cH * -0.25, 0.25),
// new THREE.Vector3(0, cH * -0.3125, 0.1875),
// new THREE.Vector3(0, cH * -0.375, 0.125),
// new THREE.Vector3(0, cH * -0.4375, 0.0625),
//new THREE.Vector3(0, cH * -0.5, 0)
]
);
sg.addGroup(0, 3, 0);
sg.setIndex([0, 1, 2, 3, 4, 5]);
sg.setAttribute("uv", new THREE.Float32BufferAttribute([
0, 1, 0, 0, 1, 0
], 2));
sg.computeVertexNormals();
as you can see i barely got to creating points for the third face and ran into quite a complexity of number calculations…
the approach you’ve provided should be a little simpler aha!! i will give it a go and let you know!!
Thanks so much man!!
@prisoner849 Worked a charm!! you’re work is amazing so i really appreciate your help with such a simple mundane task!!
1 Like
