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:
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:
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.
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.
Cylinder’s length is the distance between points (.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).
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.
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.
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.
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.
