Drawing a Cylinder from two Coordinates in 3D Space (three.js) - javascript

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?

Related

ThreeJS CSG with Object3d

I have some issue with threejs. I have a hard object3d which contains sphere, cylinder, circles. These geometric shapes form a complex object. I add this object to scene and and next i add the same but smaller object to the scene.
I can rotate first object, but when a small object goes beyond the borders of a large one, I need to clip it like overflow: hidden in html :-).
I found library "three-csg-ts
" but this library works only with geometry. I tryed use it, It's not correct for me. Because i need rotate this object before i put it on scene.
Maybe somebody can help me?

threejs line follow along geometry

I am looking for a way to draw a (poly)line around an object. I have a mesh where I need lines projected on so I can use this for my project.
For example I have this geometry: https://threejs.org/examples/webgl_materials_skin.html
No horizontal around the head. Going over the nose, ears and should be closed. I have thought about raycasting to the center of the object every 1 degree. But this will lose accuracy.
This is a really bad picture but gives the idea, I want to try and get the red line around the geometry as a new polyline:
Is there a way I can get a polyline out of the geometry at a specific height?

Geometry from curve

I have a closed spline in 3D and wish to create a flat mesh according to this spline. The points are in 3D, but are constrained to a plane. Either a completely flat or an extruded one is ok. I understand I need to supply some kind of direction for the mesh to extend in and can provode either two splines and then I want to fill in the hole between those with triangles, or I can provide a normal direction for each point on the spline for the mesh to extend to. How would I go about this, I see there are lots of classes already in THREE.js, but I can't understand how to use these. Should I make my own, and how would I go about that?

3D cube creation and handling events on that cube

I have created multiple 3D Cubes in a HTML5 Canvas .
I was trying to handle a click event on the 3D cube so that i can know which cube got clicked.
To create the cube I used processingJS.
It worked well but was not able to get the Click position.
I read about Paper JS which creates a shape and stores it in a object.
Is it possible to create 3D things with Paper JS.
Or Is there anyway i can get which cube got clicked through ProcessingJS.
please share whether there are any other ways to do this.
Thanks in advance.
Paper.js deals with 2D vector graphics.
While in theory you can represent a cube if you want to, using skewed squares for example, it will take a lot of effort and a lot of time to just create 1 cube.
You are much better of using a 3D library, e.g - Three.js.
Here is an already cooked up example using raycasting to detect the clicks on a side of the cube: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

Looking for a way to draw a line between two points on a sphere in Three.js

My app (a flight tracker) needs to draw a line between two points (cities say) on a sphere (earth) along the surface (i.e. the great circle route) using Three.js.
I can think of 2 ways - (a) creating Three.js 'Line' with a set of (enough) points that I calculate manually and (b) writing the lines into the texture I use for the sphere after it's loaded but before I apply it as a texture.
I can see problems with both (not even sure if (b) is possible in Three.js yet) - anyone think of a better way or have an opinion?
Thanks in advance.
You use many particles to create a kind of dotted line.

Categories