Playing around with Cylinder Geometry from Three.js is so much fun! You can check out the documentation here.
Here's my CodePen where I've been experimenting: https://codepen.io/lklancir/pen/pdaPoY
var gui = new dat.GUI();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1 );
document.body.appendChild( renderer.domElement );
var orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;
// Light setup
var lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 0 ].position.set( 0, 200, 0 );
lights[ 1 ].position.set( 100, 200, 100 );
lights[ 2 ].position.set( - 100, - 200, - 100 );
scene.add( lights[ 0 ] );
scene.add( lights[ 1 ] );
scene.add( lights[ 2 ] );
// Mesh setup
var mesh = new THREE.Object3D();
mesh.add( new THREE.LineSegments(
new THREE.Geometry(),
new THREE.LineBasicMaterial( {
color: 0xffffff,
transparent: true,
opacity: 0.5
} )
) );
mesh.add( new THREE.Mesh(
new THREE.Geometry(),
new THREE.MeshPhongMaterial( {
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
flatShading: true
} )
) );
function renderMeshCylinder( mesh ) {
var data = {
radiusTop : 5,
radiusBottom : 5,
height : 30,
radiusSegments : 60,
heightSegments : 60,
openEnded : true,
thetaStart : 0,
thetaLength : twoPi
};
// Function to generate geometry
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.CylinderGeometry(
data.radiusTop,
data.radiusBottom,
data.height,
data.radiusSegments,
data.heightSegments,
data.openEnded,
data.thetaStart,
data.thetaLength
)
);
}
var folder = gui.addFolder( 'THREE.CylinderGeometry' );
folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
folder.add( data, 'radiusSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'openEnded' ).onChange( generateGeometry );
folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
generateGeometry();
}
renderMeshCylinder(mesh);
var options = {};
scene.add( mesh );
// Rendering function
var render = function () {
requestAnimationFrame( render );
if ( ! options.fixed ) {
mesh.rotation.x += 0;
mesh.rotation.y += 0;
}
renderer.render( scene, camera );
};
// Resize event listener
window.addEventListener( 'resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
render();
I'm currently trying to figure out how to reach a specific segment by its index or coordinate in my project. Here's a reference screenshot of what I'm aiming for:
If anyone has any guidance or suggestions on how to tackle this issue further, I would greatly appreciate it.