Three.js: Initial position and direction for CylindarGeometry

[adelman]

Description of the problem

Currently CylinderGeometries and by extension ConeGeometries are defined in terms of their heights and radii. Would it be possible to add a feature to define the initial position for the midpoint of the geometry and a direction vector to supply and orientation?

The new signature could be:

CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength, midpoint, orientation)
radiusTop — Radius of the cylinder at the top. Default is 1.
radiusBottom — Radius of the cylinder at the bottom. Default is 1.
height — Height of the cylinder. Default is 1.
radialSegments — Number of segmented faces around the circumference of the cylinder. Default is 8
heightSegments — Number of rows of faces along the height of the cylinder. Default is 1.
openEnded — A Boolean indicating whether the ends of the cylinder are open or capped. Default is false, meaning capped.
thetaStart — Start angle for first segment, default = 0 (three o'clock position).
thetaLength — The central angle, often called theta, of the circular sector. The default is 2*Pi, which makes for a complete cylinder. 
midpoint — The midpoint of the line connecting the top and bottom of the cylinder.
orientation — The normalized vector supplying the orientation of one end of the cylinder to point.

Thanks!

Three.js version

• [x] Dev
• [x] r90
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[WestLangley]

That is not necessary.

var geometry = new THREE.CylinderBufferGeometry( rad, rad, height ); // or CylinderGeometry
geometry.translate( 0, height / 2, 0 ); // optional
geometry.rotateX( Math.PI / 2 ); // orient along z-axis - required
geometry.lookAt( directionVector );

[adelman]

Thanks for pointing this out! All of my search for positioning a cylinder didn't turn this up.

[trmehta5]

@WestLangley
I'm not able to get why do we need to rotate the geometry aound x-axis and then apply lookAt(Vector). I need to use the same scenario in my project and I tried different combinations for it. What you have suggested in the above lines gives me expected results, but I'm not clear with the reason of doing so.
Can you explain?

[WestLangley]

@trmehta5 object.lookAt( target ) causes the local positive z-axis of the object to point in the direction of target. Consequently, in this case, the cylinder's geometry needs to be pre-rotated so it is aligned with the positive z-axis.

[trmehta5]

@WestLangley Why do we need to do this in case of cylinder and not the sphere? Actually, I'm also using lookAt() on a scaled Sphere. And it works there without having the object to align with positive z-axis.
I will also be grateful if you can suggest links or ways to learn three.js or 3D modeling, where I can find answers.

[WestLangley]

@trmehta5 Sorry, this is not a help site. Try the forum.

Also https://stackoverflow.com/questions/11966779/learning-webgl-and-three-js