2

Heyho, im relativly new to programming, right now im trying to solve a problem but don't know how and if it's even possible in three.js.

I bet someone can tell me...

My goal is it, to create a cylinder looking like geometry in three.js that draws from one vector3 to another. I need this to create an 3D dimensionline. I know three.js provides an arrowhelper but theirs can only draw 2D lines and i need to be able to define the width of the arrow.

Things I tried:

  • At first i tried to use the basic cylinder geometry of three.js but i couldn't figure out how to give it a start and end point.
  • The second idea that came to my mind is the shape (was able to define points) but i think i only can draw 2d shapes with it.

Can someone help me please?

Philip König
  • 101
  • 1
  • 6
  • So let me get this straight: you want to defined a cylinder as a vector3 to a vector3. Do you mean by that that the first is, say, the point in the centre of the top face, and the second is a point on the rim of the bottom face, and that you want to derive from those points the information necessary to execute a CylinderGeometry with at least radiusTop, radiusBottom, and height, and some radialSegments as per the example on https://threejs.org/docs/index.html#api/en/geometries/CylinderGeometry ? – bugmagnet Aug 06 '20 at 05:56
  • 1
    one coordinate should be the cemter of the top face and the other the center of the bootem face and between these 2 points i want a cylinder. but can't figure out how to do it standart geometrys cant be drawn between two vector3s thats the problem with these default geometrys you can only define a lenght but not a start and end point – Philip König Aug 06 '20 at 06:09
  • My geometry skills are sketchy at best, so please forgive me if I ask a dumb question. How does the drawing tool know what radius or diameter to draw the cylinder with? But I'm thinking out loud here: you're at 1,1,1 and 10,10,10, so you figure out the height by finding the distance between two points. Then you choose some arbitrary value for radiusTop and radiusBottom ... – bugmagnet Aug 06 '20 at 06:17
  • you got 2 options either compute [transform matrix](https://stackoverflow.com/a/28084380/2521214) and use axis aligner cylinder or compute the cylinder geometry on your own... simply create 3 basis vectors (one is `w=p1-p0 ` and the other 2 (`u,v` )are perpendicular to each and in size of radius of your cylinder, exploiting cross product of w and any nonn zero non parallel to `w` vector) then just use simply: `vec3(x,y,z) = u*cos(a) + v*sin(a) + h*w` where `a=<0,2*Pi> , h = {0,1}` ... in both you need the `u,v,w` ... – Spektre Aug 06 '20 at 06:19
  • its very similar to [glCircle3D](https://stackoverflow.com/a/25182327/2521214) there the `x,y,nor` are the same as `u,v,w` I described earlier.... aah I forgot one small thing in the above equation it should be `vec3(x,y,z) = p0 + u*cos(a) + v*sin(a) + h*w where a=<0,2*Pi> , h = {0,1}` – Spektre Aug 06 '20 at 06:26
  • 1
    @Spektre thanks man couldnt figure out the math by myself u saved me a lot of time :) thanks – Philip König Aug 06 '20 at 06:28

0 Answers0