# Align plane and ring geometries together

**URL:** <https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [February 23, 2022, 10:04am UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228 "2022-02-23T10:04:44Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mr\_Lee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mr_lee/32/24444_2.png) [@Mr\_Lee](https://discourse.threejs.org/u/Mr_Lee)\
**Post date:** [February 23, 2022, 10:04am UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/1 "2022-02-23T10:04:44Z")

</div>

Hi, I´m new in the threejs world.  
I’ve been looking for a solution since 3 days and  
I can´t find any help on Google or in this forum ☹

I try to create an interactive part designer.  
For this, I want to generate plane and ring geometries, but how can I connect them easy as possible together.  
In my example, I translate the geometries by hand manually… And that is the problem.

The my “part-parameters” are changing constantly.

![example](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/8/68e809e4c09ff41e8f8ac79635af0fdf7067a6ae.jpeg)

```javascript
function main() {
  // https://threejs.org/docs/#api/en/geometries/ExtrudeGeometry
  // https://threejs.org/docs/#api/en/geometries/RingGeometry
  // https://threejs.org/docs/#api/en/geometries/PlaneGeometry
  // https://threejs.org/docs/#api/en/core/Raycaster
  // https://threejs.org/docs/#api/en/extras/core/Path
  // https://threejs.org/docs/#api/en/extras/core/Shape
  // https://threejs.org/docs/#api/en/extras/core/ShapePath
  // https://threejs.org/docs/#api/en/math/interpolants/QuaternionLinearInterpolant
  // https://threejs.org/docs/#api/en/math/Quaternion
  // https://threejs.org/docs/#api/en/math/MathUtils

  // Hilfs-Koordinatensystem
  let scene = new THREE.Scene();
  scene.add(new THREE.AxesHelper(10)); //X=red, Y=green, Z=blue

  // Part Parameters
  const biegelaenge = 500; // for extrude, later
  const dicke = 2; // Thickness from my part
  const radius = 2; // radius inside
  const B0_schenkel = 10;
  const B0_winkel = 90; // B = Bug
  const B1_schenkel = 5;
  const B1_winkel = 45;
  const B2_schenkel = 6;
  const B2_winkel = 0; // do not exist!
  //const B3_schenkel = 0;
  //const B3_winkel = 0;
  //const B4_....

  // Length Bug0
  B0 = schenkel(B0_schenkel, dicke);
  B0.translateX(-5);
  scene.add(B0);

  // Radius Bug0, must write a function, but later
  const geometry = new THREE.RingGeometry(
    radius,
    radius + dicke,
    32,
    4,
    deg2rad(-90),
    deg2rad(B0_winkel)
  );
  const material = new THREE.MeshPhongMaterial({
    color: "rgb(80,80,20)",
    side: THREE.DoubleSide,
  });
  const mesh = new THREE.Mesh(geometry, material);
  mesh.translateY(3);
  scene.add(mesh);

  // Length Bug1
  B1 = schenkel(B1_schenkel, dicke);
  B1.rotateZ(deg2rad(90));
  B1.translateY(-3);
  B1.translateX(5.5);
  scene.add(B1);

  // Radius Bug1
  const geometry2 = new THREE.RingGeometry(
    radius,
    radius + dicke,
    32,
    4,
    deg2rad(0),
    deg2rad(B1_winkel)
  );
  const material2 = new THREE.MeshPhongMaterial({
    color: "rgb(80,80,20)",
    side: THREE.DoubleSide,
  });
  const mesh2 = new THREE.Mesh(geometry2, material2);
  mesh2.translateY(8);
  scene.add(mesh2);

  // Length Bug2
  B2 = schenkel(B2_schenkel, dicke);
  B2.rotateZ(deg2rad(-45));
  B2.translateY(8.65);
  B2.translateX(-8.65);
  scene.add(B2);

  // Radius Bug2
  // do not exist!

  // Extrude geometry here, later

  //Grid XZ
  let grid = new THREE.GridHelper(100, 100, 0xffffff, 0x333333);
  grid.rotateX(deg2rad(90));
  scene.add(grid);

  // Random light sources
  let pL0 = generatePointLight(0xffffff, 1, false, 5, 5, 5);
  let pL1 = generatePointLight(0xffffff, 1, false, -5, 5, 5);
  let pL2 = generatePointLight(0xffffff, 1, false, 5, 5, -5);
  let pL3 = generatePointLight(0xffffff, 1, false, -5, 5, -5);
  scene.add(pL0);
  scene.add(pL1);
  scene.add(pL2);
  scene.add(pL3);

  //Camera
  let PersCam = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    500
  );
  console.log(window.innerWidth / window.innerHeight);

  // Cameraposition
  PersCam.position.x = 0; // red
  PersCam.position.y = 0; // green
  PersCam.position.z = 50; // blue
  // Blickrichtung von Kamera, irgendwie keine funktion
  PersCam.lookAt(new THREE.Vector3(0, 0, 0));

  // Camerahelper, for orthogonal camera, later
  // let camhelper = new THREE.CameraHelper( PersCam );
  // scene.add( camhelper );

  // Renderer
  let renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.shadowMap.enabled = false; // Schatten an/aus
  renderer.setSize(window.innerWidth, window.innerHeight); // Fenstergröße
  renderer.setClearColor("rgb(80,80,80)"); // Background olor
  document.getElementById("webgl").appendChild(renderer.domElement); // Wo im HTML Code
  let controls = new THREE.OrbitControls(PersCam, renderer.domElement); // Orbit controls

  // Update animation
  update(renderer, scene, PersCam, controls);
}

//////////////////////////////////////////////////////////
////////////// FUNKTIONEN ////////////////////////////////
function schenkel(l, b) {
  let geo = new THREE.PlaneGeometry(l, b);
  let mat = new THREE.MeshPhongMaterial({
    color: "rgb(80,60,60)",
    side: THREE.DoubleSide,
  });
  let mesh = new THREE.Mesh(geo, mat);
  //mesh.receiveShadow = true;
  return mesh;
}
/////////////////////////////////////////////
/*function generateBox(w, h, d) {
  let geo = new THREE.BoxGeometry(w, h, d);
  let mat = new THREE.MeshPhongMaterial({
    color: "rgb(100,10,10)",
  });
  let mesh = new THREE.Mesh(geo, mat);
  mesh.castShadow = true;
  return mesh;
}*/
/////////////////////////////////////////////
function generatePointLight(color, intensity, shadowTgl, x, y, z) {
  let light = new THREE.PointLight(color, intensity);
  light.castShadow = shadowTgl; // Schatten an/aus
  light.position.x = x;
  light.position.y = y;
  light.position.z = z;
  light.shadow.mapSize.width = 2048;
  light.shadow.mapSize.height = 2048;
  return light;
}
/////////////////////////////////////////////
function deg2rad(deg) {
  rad = deg * (Math.PI / 180.00);
  return rad;
}
/////////////////////////////////////////////
function update(renderer, scene, camera, controls) {
  renderer.render(scene, camera);
  controls.update();
  requestAnimationFrame(function () {
    update(renderer, scene, camera, controls);
  }); // funktion vom Browser!
  
}
//////////////////////////////////////////////
//////////////////////////////////////////////
main();

/// Backyard //
//setInterval, use later // ist für Updates von Werten gut, z.B. bei der Tabelle
//console.log(scene);

```

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [February 23, 2022, 12:38pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/2 "2022-02-23T12:38:04Z")

</div>

obviously you will need to invoke the magic power of geometry. first, you will need to intersect two lines perpendicular to the brown segments to find the ring center. and then you have to calculate angles from that point to brown segments ends.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 23, 2022, 4:50pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/4 "2022-02-23T16:50:49Z")

</div>

This should work similar to the Cylinder.

From the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

[CurvedArrowHelper](https://hofk.de/main/discourse.threejs/2021/CurvedArrowHelper/CurvedArrowHelper.html)  
[SpiralFromCylinder](https://hofk.de/main/discourse.threejs/2021/SpiralFromCylinder/SpiralFromCylinder.html)

[BendCylinderToKnee](https://hofk.de/main/discourse.threejs/2022/Skeleton/BendCylinderToKnee.html)

With bones [CustomCylinderAndKnee](https://hofk.de/main/discourse.threejs/2022/Skeleton/CustomCylinderAndKnee.html)

---

<div class="post-metadata">

**Author:** ![Mr\_Lee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mr_lee/32/24444_2.png) [@Mr\_Lee](https://discourse.threejs.org/u/Mr_Lee)\
**Post date:** [February 24, 2022, 9:07am UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/5 "2022-02-24T09:07:29Z")

</div>

Hi, the examples are very good, but I´m just in the beginning.  
I can’t use an example code for my code yet, it´s to high.

My current solution would be:

1. I read the absolute position corner points from the (older) plane geometrie back.
2. after that I translate the newer plane corner point in X,Y to the older plane corner point together.
3. then I rotate in the corner point the angle difference, so that the geometries are parallel together.
4. I repeat 1-3, for all the planes I want to create.
5. lastly I group the correct aligned planes, mesh… scene.add(groups).

* * *

@all: Do you think that’s ok, or is this way too complicated?

For now:  
how can I read the position.array ?  
 ![How](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/f/8f7e460f9410caf9a25a79e0ecfe2433905781d7.jpeg)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 24, 2022, 4:24pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/6 "2022-02-24T16:24:15Z")

</div>

> [@Mr\_Lee](#):
>
> how can I read the position.array ?

```javascript

const geometry = new THREE.PlaneGeometry( 1, 1, 12, 12 );

i = 5; // for example
const valueOfIndex5 = geometry.attributes.position.array[i];

```

---

<div class="post-metadata">

**Author:** ![Mr\_Lee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mr_lee/32/24444_2.png) [@Mr\_Lee](https://discourse.threejs.org/u/Mr_Lee)\
**Post date:** [February 26, 2022, 9:49am UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/7 "2022-02-26T09:49:48Z")

</div>

const arrNew = B0Ks.getAttribute(“position”).array;

---

<div class="post-metadata">

**Author:** ![Mr\_Lee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mr_lee/32/24444_2.png) [@Mr\_Lee](https://discourse.threejs.org/u/Mr_Lee)\
**Post date:** [March 1, 2022, 10:59am UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/8 "2022-03-01T10:59:04Z")

</div>

ok i got it 🙂 thanks.

my next problem is, can I extrude geometrys too?

```javascript
let PlGeo = new THREE.PlaneGeometry(5, 10);
  var geometry = new THREE.ExtrudeGeometry(PlGeo, {
    depth: 5,
    // bevelEnabled: false,
  });
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

```

 ![prob](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/d/7d72c4d2f5b2dc9d259b7ad69367edeb563555fa.jpeg)

does that mean i can only extrude shapes? And not PlaneGeometry?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 1, 2022, 11:18am UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/9 "2022-03-01T11:18:19Z")

</div>

> [@Mr\_Lee](#):
>
> does that mean i can only extrude shapes? And not PlaneGeometry?

Yes, correct.

---

<div class="post-metadata">

**Author:** ![Mr\_Lee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mr_lee/32/24444_2.png) [@Mr\_Lee](https://discourse.threejs.org/u/Mr_Lee)\
**Post date:** [March 1, 2022, 12:17pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/10 "2022-03-01T12:17:01Z")

</div>

If I had known that before…  
Ok, if I generate multiple shapes, add them together like my first post.  
Then translate the shapes in +Z and (copy) the shapes in -Z, can I extrude or “shaping” them like this?

 ![like_this](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/3/63cd0c7bd9c8084c110bc58ee0510133d356cd63.jpeg)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [March 1, 2022, 5:14pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/11 "2022-03-01T17:14:43Z")

</div>

> [@Mr\_Lee](#):
>
> … can I extrude or “shaping” them like this?

If you look at the code ( [three.js/src/geometries/ExtrudeGeometry.js at c12c9a166a1369cdd58622fff2aff7e3a84305d7 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/blob/c12c9a166a1369cdd58622fff2aff7e3a84305d7/src/geometries/ExtrudeGeometry.js) ) you will see that extrusion is quite a complex thing.

If you want to have a very special geometry, you have to create it yourself as a custom geometry. This is not that hard with a little practice. Start with a simple example and look at corresponding examples.

From the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

e.g. [ProfileSurface](https://hofk.de/main/discourse.threejs/2021/ProfileSurface/ProfileSurface.html) , [ColorStripeChanging](https://hofk.de/main/discourse.threejs/2019/ColorStripeChanging/ColorStripeChanging.html)

and

* * *

[2022 discourse.threejs.hofk.de](https://hofk.de/main/discourse.threejs/2022/index2022.html)

BufferGeometryNonIndexed  
BufferGeometryIndexed

BumblebeeMara ( geometryMouth, geometryBody, halfSphereGeometry )

* * *

[2021 discourse.threejs.hofk.de](https://hofk.de/main/discourse.threejs/2021/index2021.html)

MorphBoxSphere (dynamic)  
RoundEdgedBoxFlat

* * *

… and more.

---

<div class="post-metadata">

**Author:** ![Mr\_Lee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mr_lee/32/24444_2.png) [@Mr\_Lee](https://discourse.threejs.org/u/Mr_Lee)\
**Post date:** [March 1, 2022, 5:52pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/12 "2022-03-01T17:52:40Z")

</div>

I think must start from the beginning.  
But before a last question.  
Is it possible to create an outer contour which I can then extrude?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [March 1, 2022, 7:18pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/13 "2022-03-01T19:18:31Z")

</div>

> [@Mr\_Lee](#):
>
> … create an outer contour which I can then extrude?

In a way, yes, but you have to generate it yourself.

See  
[Curved2Geometry - a twofold curved geometry](https://discourse.threejs.org/t/curved2geometry-a-twofold-curved-geometry/25580)  
[ProfiledContourGeometry MultiMaterial](https://discourse.threejs.org/t/profiledcontourgeometry-multimaterial/5801)  
[Construction of frames with contour/profile](https://discourse.threejs.org/t/construction-of-frames-with-contour-profile/13490)

---

<div class="post-metadata">

**Author:** ![Mr\_Lee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mr_lee/32/24444_2.png) [@Mr\_Lee](https://discourse.threejs.org/u/Mr_Lee)\
**Post date:** [March 5, 2022, 12:58pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/14 "2022-03-05T12:58:32Z")

</div>

Hi folks,  
in this example: [ProfiledContourGeometry](https://hofk.de/main/discourse.threejs/2018/ProfiledContourGeometry/ProfiledContourGeometry.html)

I get following warnings,

 ![Warning](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/e/0e8495eb5aa044c6fb1ce038070bf45dbb43345b.jpeg)

can somebody help me.

Best regards

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [March 7, 2022, 4:26pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/16 "2022-03-07T16:26:12Z")

</div>

in retrospect, it is funny that my comment was accepted as a solution. the procedure outlined there only works for line segments specifically placed so that there could be an arc joining them, but then its center has to be known in advance

---

<div class="post-metadata">

**Author:** ![Mr\_Lee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mr_lee/32/24444_2.png) [@Mr\_Lee](https://discourse.threejs.org/u/Mr_Lee)\
**Post date:** [March 7, 2022, 8:58pm UTC](https://discourse.threejs.org/t/align-plane-and-ring-geometries-together/35228/17 "2022-03-07T20:58:26Z")

</div>

The tread was, aligning plane and ring geometries.  
Find vertices, calculate distance, move Geometries together… finish!