# Going from a wireframe to a construction with shapes that have volume

**URL:** <https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573>\
**Category:** Questions\
**Created:** [March 24, 2026, 1:56pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573 "2026-03-24T13:56:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![michiel86](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@michiel86](https://discourse.threejs.org/u/michiel86)\
**Post date:** [March 24, 2026, 1:56pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/1 "2026-03-24T13:56:27Z")

</div>

With a standard `CylinderGeometry` It’s difficult to go from a wireframe (lines) to “connected” cylinders, because of the length (`height`) of the cylinder. This `height` increases from the center, so I constantly would have to do a bunch of math to adjust after rotation to reach an exact point.

Here is what I started which illustrates the problem:

[https://codepen.io/michielschukking/pen/RNGGzgV](https://codepen.io/michielschukking/pen/RNGGzgV)

What is probably best to use for my designs (artistic parametric constructions) is going **from point to point**. Any idea how to do this best? Maybe using nodes? Using `Vector3`’s?

To be able to work with the connections themselves would be an extra step that I desire.

Is there something that already exists within Three.js that makes this more easily doable?

I’d have the same with `BoxGeometry` or any other.

It’s not per se trees. I already have a few nice ideas made with wireframes:

- [A staircase](https://codepen.io/michielschukking/pen/EaPNbpq)
- [A bridge](https://codepen.io/michielschukking/pen/VYeYNQj)
- [A trainstation](https://codepen.io/michielschukking/pen/NPxRzKq)

I want stuff to work with designs like this.

Any comments, advise and directions are welcome.

---

<div class="post-metadata">

**Author:** ![David4](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/david4/32/67553_2.png) [@David4](https://discourse.threejs.org/u/David4)\
**Post date:** [March 24, 2026, 2:10pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/2 "2026-03-24T14:10:47Z")

</div>

this is cool as begginer.

---

<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 24, 2026, 10:19pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/3 "2026-03-24T22:19:16Z")

</div>

> [@michiel86](#):
>
> from point to point

Geometries have `.translate()` method. So you can align cylinder’s bottom to the zero point and do other funky stuff 🤔

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/e/6e79287778dc384e18601b6902188afe8378cbb0.jpeg)

Demo: [https://codepen.io/prisoner849/full/gbwXGzW](https://codepen.io/prisoner849/full/gbwXGzW)

---

<div class="post-metadata">

**Author:** ![michiel86](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@michiel86](https://discourse.threejs.org/u/michiel86)\
**Post date:** [March 25, 2026, 12:28pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/4 "2026-03-25T12:28:30Z")

</div>

That’s impressive prisoner849! `.translate()` and `.rotateX()`, `.rotateY()` and `.rotateZ()` maybe. I used `.position` and `.rotation`. I shall investigate.

BTW with some color alterations you could easily make a beautiful abstract tree like this I see.

---

<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 25, 2026, 1:52pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/5 "2026-03-25T13:52:40Z")

</div>

> [@michiel86](#):
>
> abstract tree

Of course, I tried it 🙂

 ![IMG_20260325_165135_278](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/2/72887deddc4758003456e2a84fb46772135eab3f.jpeg)

Demo: [https://codepen.io/prisoner849/full/azmVKXb](https://codepen.io/prisoner849/full/azmVKXb)

---

<div class="post-metadata">

**Author:** ![David4](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/david4/32/67553_2.png) [@David4](https://discourse.threejs.org/u/David4)\
**Post date:** [March 25, 2026, 2:06pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/6 "2026-03-25T14:06:12Z")

</div>

Wow, this is beautiful. your skill is very nice.

---

<div class="post-metadata">

**Author:** ![michiel86](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@michiel86](https://discourse.threejs.org/u/michiel86)\
**Post date:** [March 25, 2026, 2:16pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/7 "2026-03-25T14:16:37Z")

</div>

That is very pretty.

Back to my main question. Rotation is more where the problem is. How to between two points rotate and have the exact right length, that’s the challenge in something as simple as building a roof.

[https://codepen.io/michielschukking/pen/KwgyNMQ?editors=0010](https://codepen.io/michielschukking/pen/KwgyNMQ?editors=0010)

Maybe a three.js function like this will be helpful: .[translateOnAxis](https://threejs.org/docs/pages/Object3D.html#translateOnAxis)

Otherwise I’ll need to do a lot of goniometry.

I shall study your tree’s code 🙂

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [March 25, 2026, 6:23pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/8 "2026-03-25T18:23:24Z")

</div>

Are you wanting to link a series of cylinders together?

I do that a lot to create animated parts in Blender. I also do something like that in three.js to create cameras that rotate around a center point..

ANIMATED CYLINDERS

Create a small dummy object (a rotator) an place it at the origin of the rotation. Attach your cylinder to the rotator so that the rotator is located at the end of the cylinder. You can now rotate that cylinder around by rotating the rotator.

Now create another rotator and attach it to the other end of the cylinder. Attach another cylinder to that rotator, etc.

You can adjust the orientation of the cylinders by using the rotators.

That way you are letting three.js do the math for you.

You could simplify this structure, if you can move the axis of the cylinder to one end of the cylinder. That will eliminate the need for some of those rotators. But I am assuming that you want to work with

Another alternative would be to create rigging - like for animated characters. But instead of attaching body parts, you would attach your cylinders to the bones.

STATIC CYLINDERS

If you just want to create a big static display, you can use simple math to position the cylinders. You could use Math.sin to compute Y displacement and Math.cos to compute X displacement of the cylinder center. For both functions, enter half of the length of the cylinder and the angle of rotation (degrees converted to radians) and the functions will give you the displacement of the cylinder center. You can print out the results to your console using console.log.

Or have three.js position the objects for you by creating a function in your program.

No need to do math when three.js can do it for you.

---

<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 25, 2026, 6:42pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/9 "2026-03-25T18:42:45Z")

</div>

> [@michiel86](#):
>
> How to between two points rotate and have the exact right length

Cylinder’s length is the distance between points ([.distanceTo()](https://threejs.org/docs/#Vector3.distanceTo)).  
Align cyliner’s bottom to the zero point (`.translate(0, half_height, 0)`)  
Align the cylinder along the Z-axis (`.rotateX(Math.PI * 0.5)`)  
Apply `lookAt`-matrix to the cylinder.  
Translate the cylinder to the start point.

Here is a mesh of a single geometry (from merged geometries).

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4b716345ce43fe773b6660fb5c5bf7e35918d087.png)  
Demo: [https://codepen.io/prisoner849/full/YPGEMKv](https://codepen.io/prisoner849/full/YPGEMKv)

---

<div class="post-metadata">

**Author:** ![David4](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/david4/32/67553_2.png) [@David4](https://discourse.threejs.org/u/David4)\
**Post date:** [March 25, 2026, 7:51pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/10 "2026-03-25T19:51:06Z")

</div>

This is surprize!

---

<div class="post-metadata">

**Author:** ![michiel86](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@michiel86](https://discourse.threejs.org/u/michiel86)\
**Post date:** [April 9, 2026, 1:21pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/11 "2026-04-09T13:21:21Z")

</div>

I am sorry, a cylinder is a bad example. Better is a box-geometry.

[https://codepen.io/michielschukking/pen/myrqopx?editors=0010](https://codepen.io/michielschukking/pen/myrqopx?editors=0010)

The corners of the boxes (exaggerated beams) need to meet exactly on the blue line. (The blue line lies in the xy-plane.)

To correct for rotation I used:

```javascript
const rotZOffsetY = (width/2)*Math.sin(MU.degToRad(30));
const rotZOffsetZ = (height/2)*Math.sin(MU.degToRad(30));
let offY = height/2+rotZOffsetY;
let offZ = width/2+rotZOffsetZ;

```

It’s close but I need to do better, it needs to be exact. Please view the example to understand my problem.

Is there another way to do this, like changing the point of rotation on the Object3D? Is my approach wrong?

I will need this a whole lot more, because wireframe-design is not the same as “beam-design”. So a little more help is greatly appreciated.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [April 9, 2026, 5:31pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/12 "2026-04-09T17:31:30Z")

</div>

More fun instanced cylinder stuff: [Golden Gate Bridge Verlet Simulation](https://manthrax.github.io/waller/index.html)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [April 9, 2026, 5:39pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/13 "2026-04-09T17:39:36Z")

</div>

geometry.translate / .rotate .. mesh.lookAt … .worldToLocal, localToWorld, etc.  
It’s relatively rare that you need to use actual sin/cos math to achieve some transformation. There is often a more straightforward way to do it.

If you’re just trying to get thick line wireframes for instance, there is the Line2 class in threejs which gives you cross platform control over line thickness.  
If you want to stick with cubes/cylinders, then you can use .translate on the geometry at init time to set its origin to one end (z) (by geometry.translate(0,0,halfLength) of the cylinder primitive, and then use .lookAt to “aim” it at another point.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 9, 2026, 9:28pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/14 "2026-04-09T21:28:52Z")

</div>

> [@michiel86](#):
>
> Please view the example to understand my problem.

Viewed it, but the problem is I’m too slow to understand what you want.

The solution depends on what parameters are primary (i.e. known and fixed), and what parameters are secondary (i.e. derivative and must be calculated).

Anyway, here is one way to make these specific boxes to touch this specific curve. For the general case it might not work, because I have no idea what is the general case.

[https://codepen.io/boytchev/full/EagdymW](https://codepen.io/boytchev/full/EagdymW)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/5/3585491721b6729283d02cd21e3263c5f7d53cbc.png)](https://codepen.io/boytchev/full/EagdymW)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [April 9, 2026, 11:41pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/15 "2026-04-09T23:41:55Z")

</div>

that’s wild 😃

---

<div class="post-metadata">

**Author:** ![michiel86](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@michiel86](https://discourse.threejs.org/u/michiel86)\
**Post date:** [April 14, 2026, 11:36am UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/16 "2026-04-14T11:36:59Z")

</div>

You seem to have done this with only a /2 correction. I don’t understand how you made this work.

So I’ll still have to use cos sin math. Maybe with something like this: [https://stackoverflow.com/questions/2285936/easiest-way-to-rotate-a-rectangle](https://stackoverflow.com/questions/2285936/easiest-way-to-rotate-a-rectangle)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 14, 2026, 12:03pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/17 "2026-04-14T12:03:08Z")

</div>

Yes, trigonometry is your pal, not your foe.

Once you know what are primary data and what are secondary data, calculations with sine and cosine are usually straightforward.

My version is sliding the shape so its corner is at (0,0,0) and rotation is now around the corner. This saves me from explicitly using sine and cosine, but they are still implicitly used inside how Three.js calculates things.

---

<div class="post-metadata">

**Author:** ![michiel86](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@michiel86](https://discourse.threejs.org/u/michiel86)\
**Post date:** [April 14, 2026, 1:17pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/18 "2026-04-14T13:17:51Z")

</div>

Is `.translate()` different than `position.x`, `.y` and `.z`. Because I am not moving the origin of my object (around which it rotates).

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 14, 2026, 3:23pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/19 "2026-04-14T15:23:33Z")

</div>

Fundamentally different, although sometimes the visual effect might be the same. .`translate` changes the values inside the geometry, thus shifting it in respect to its origin, which keeps the origin the same. As it traverses all vertices, it is supposed to be used sparingly, usually outside loops. Sometimes it might be better just to nest the object in a group, which gives the same functionality, but faster.

---

<div class="post-metadata">

**Author:** ![michiel86](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@michiel86](https://discourse.threejs.org/u/michiel86)\
**Post date:** [April 15, 2026, 12:29pm UTC](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573/20 "2026-04-15T12:29:09Z")

</div>

When I try to copy your code I get this [https://codepen.io/michielschukking/pen/raMPNOb?editors=0010](https://codepen.io/michielschukking/pen/raMPNOb?editors=0010)

(offset to 0, .translate(…) after the making of BoxGeometry.)

Can you tell me where I go wrong?

**EDIT**

Found my mistakes.

Small question: How do you embed codepen preview pictures?

[Next page](https://discourse.threejs.org/t/going-from-a-wireframe-to-a-construction-with-shapes-that-have-volume/90573.md?page=2)