Shift cylinder to tip of other cylinder

Questions
,
1

Simple question but can’t get my head around it. How can I correctly position the laserMesh to always start from the tip of the coneMesh, where the tip is the radiusTop of the coneMesh? Right now it just has the same position of coneMesh (just copy and paste in JSFiddle to run):

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Three.js Connected Cylinders</title>
    <style>
      body {
        margin: 0;
      }

      canvas {
        display: block;
      }

    </style>
  </head>

  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
      // Scene setup
      const scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.z = 2500;
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
const dirLight = new THREE.DirectionalLight(0xffffff, 4);
			dirLight.position.set(5, 10, 7.5);
			dirLight.castShadow = true;
			dirLight.shadow.camera.right = 2;
			dirLight.shadow.camera.left = - 2;
			dirLight.shadow.camera.top = 2;
			dirLight.shadow.camera.bottom = - 2;

			dirLight.shadow.mapSize.width = 1024;
			dirLight.shadow.mapSize.height = 1024;
			scene.add(dirLight);

      const material = new THREE.MeshStandardMaterial({
        metalness: 0.8,
        roughness: 0.15,
        clipShadows: true,
        shadowSide: THREE.DoubleSide,
        color: 'grey'
      });

      const coneGeometry = new THREE.CylinderGeometry(1.2, 10, 100, 12);
      coneGeometry.rotateX(Math.PI / 2);

      const coneRadius = 90;
      const coneCount = 3;
      const heightStep = 5;
      const radialStep = (2 * Math.PI) / coneCount;

      let cones = new THREE.Group();

      const laserMaterial = new THREE.MeshStandardMaterial({
        color: 'grey'
      });
      const laserGeometry = new THREE.CylinderGeometry(1, 1, 200, 12);
      laserGeometry.rotateX(Math.PI / 2);

      for (let i = 0; i < coneCount; i++) {
        const height = i * heightStep;
        const angle = i * radialStep;

        const x = coneRadius * Math.cos(angle);
        const y = coneRadius * Math.sin(angle);
        const z = height;

        const coneMesh = new THREE.Mesh(coneGeometry, material);
        coneMesh.position.set(x, y, z);
        coneMesh.scale.set(1.5, 1.5, 1.5);

        const laserMesh = new THREE.Mesh(laserGeometry, laserMaterial);
        laserMesh.scale.set(1.5, 1.5, 1.5);
        laserMesh.position.copy(coneMesh.position) // adjust position.

        cones.add(laserMesh);
        cones.add(coneMesh);
      }

      scene.add(cones);


      // Animate and render the scene
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }

      animate();

    </script>
  </body>

</html>
1 Like
2

The geometry of a cylinder is centered around its middle. You can offset the geometry itself along its long axis via:
laserGeometry.translate(0,100,0)
or
laserGeometry.translate(0,0,100)

(i don’t recall which axis is the long axis, but one of these should work… bc I’m pretty sure the long axis isn’t X.)

This way the geometry will now be centered around one of the cylinder endpoints.

Keep in mind, transformations like this on the geometry should ideally only be performed once at init time, since successive transformations can cause numeric drift.

1 Like