Geometry from curve - javascript

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?

Related

Three.js Detection flat surface any object

I wonder how can I detect the flat surfaces of any object added to the scene. I want to draw PlanGeometry on any detected flat surface from a small distance of my object and I know how can I draw it but I have not any idea how to detect a flat surface. Someone can give me any leads or maybe someone knows some library which can help me?
What exactly do you mean by "flat"? I assume you want to find the faces of an object that are part of the same plane? This can be done by computing the plane equation of a face and compare it to other faces. Three.js can be used to achieve this. Here is something to get you started:
Compute face (NOT vertex) normals and distance to origin using the property normal and method .distanceToPoint(origin) of the face class
Using normal and distance create a Plane
Compare one face's plane with neighbors using a plane's equals(plane) method
Using this algorithm, you should be able to group all faces of an object into groups which share a common plane.

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

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?

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?

threejs (r72) point cloud movement

I'm working with the most recent r72 of THREEJS, and am trying to accomplish some effects that I used to do with pointclouds, which has now been replaced with the Points object.
I've set up a codepen http://codepen.io/shomanishikawa/pen/NGaWdW - both orbs are made by creating a geometry and pushing Vector3's to them.
I'd like to have individual points in the points object move at different velocities/directions, which was previously accomplished easily by setting something like
particle.velocity.y = 20
Which now seems to have no effect.
The orb on the left uses a BufferGeometry with a ShaderMaterial
The orb on the right uses a Geometry with a PointsMaterial
How can I set velocities on individual points so I can have them orbit around the radius instead of just rotating the parent Points object?
I'd like to accomplish this with a regular Geometry if possible, since I'd like finer control of moving the vertices individually. Provided examples of both just in case it's only feasible with one version.

D3.js visualization from circles to triangles

Does anybody know how I might change the circles in this graph http://bost.ocks.org/mike/nations/ to be triangles and still dynamically grow and shrink?
There are a variety of ways to create triangles; one way to do this without doing any geometry yourself is to use d3.svg.symbol with the type "triangle-up". Like so:
http://bl.ocks.org/3244058
I think that the code is almost the same, but instead of drawing circles, you need to compute the vertices of a polygon with three edges. Is important that the area of your triangle to be proportional to the value that it represents. Take a look to the polygon documentation https://github.com/mbostock/d3/wiki/SVG-Shapes

Categories