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?
I have a particle system using sprites which is an Object3D similar to the "interactive / points" example from three.js and a basic sphere mesh which follows my cursor.
https://threejs.org/examples/?q=point#webgl_interactive_points
What's the best way to determine when two of these objects intersect? I want to be able to push the particles with the sphere, but first I need an array of the points which are "inside the sphere". Thanks!
To know if a point is inside or outside the sphere, you can cast a ray from the point in a given direction. Then count the ray intesection with the sphere geometry's triangles. If the count is odd, the point is inside, else it's outside.
Some demo showing particles injection into a mesh is available here (same principle) https://github.com/heroncendre/Volpar
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?
What I want to achieve is creating a voxel environment, with a 2d array that holds all the positions for blocks.
Currently I'm doing this by using basic cube geometry, but it's really slow, and it has unnecessary faces on the sides of most of the cubes, and the bottoms.
How can I generate an optimized mesh? I'm assuming you would detect the neighbors and decide which faces to generate from there.
My data is an irregular shape, it looks like this:
The white areas are where there should be mesh, and then black areas are where there shouldn't be anything. (I have this converted into a 2d array of points)
I'm a bit lost on how to go about doing this. I looked at http://threejs.org/examples/#webgl_geometry_minecraft but thats for generating a square world, not one with holes and stuff in it.
So how would I go about doing this? Is there some code you guys could possibly post to help me out?
Any help is appreciated :)
I'm making a 3D game, and I was told here and here that I should always perform collision detection on the server-side. Now, the problem is that I don't know how! Collision between players on a flat plane are easy, because players are represented by a cylinder, but, how do I do collision detection when the map itself is a model with hills and so on? Is is possible to somehow import a 3D model on a Node.js server? And then, say I do have the model imported, are there some collision detection libraries, or will I have to do the math myself? (My last resort would be converting the models to JSON (models are already converted to JSON) and then reading in all the vertices, but that would be a pain.)
The models are made in Blender and can be converted to .obj, .dae or .js (JSON) (this is what I currently use).
If there are no such modules, that allow the models to be imported and collisions to be checked against them, I guess I could make it myself. In that case, please do provide some hints, or further reading on how to test if a point is colliding with an object defined by some vertices.
EDIT: The "map" will have objects on it, like trees and houses. I was thinking, maybe even caves. It will also have hills and what-not, but a heightmap is out of the question I guess.
If you're going for a do-it-yourself solution, I'd suggest the following.
Terrain
Preferably have the terrain be a grid, with just each vertex varying in height. The result is a bunch of quads, each with the same dimensions in the (x, y) plane. Vertices have varying (z) values to make up the slopes. The grid arrangement allows you to easily determine which triangles you will have to test for intersection when performing collision checks.
If that's not an option (terrain pre-built in modeling package), you'll probably want to use an in-memory grid anyway, and store a list of triangles that are (partially) inside each cell.
Checking for collision
The easiest approach would be to consider your actors points in space. Then you'd determine the height of the terrain at that point as follows:
Determine grid cell the point is in
Get triangles associated with cell
Get the triangle containing the point (in the (x, y) plane)
Get height of triangle/plane at point
In the case of the "pure grid" terrain, step 3 involves just a single point/plane check to determine which of the 2 triangles we need. Otherwise, you'd have to do a point-in-triangle check for each triangle (you can probably re-use point/plane checks or use BSP for further optimization).
Step 4 pseudo-code:
point = [ x, y, z ] // actor position
relativePt = point - triangle.vertices[0]
normal = triangle.plane.normal
distance = relativePt DOT normal // (this is a dot-product)
intersection = [
point.x,
point.y,
point.z + distance / normal.z ]
This calculates the intersection of the ray straight up/down from the actor position with the triangle's plane. So that's the height of the terrain at that (x, y) position. Then you can simply check if the actor's position is below that height, and if so, set its z-coordinate to the terrain height.
Objects (houses, trees, ... )
Give each object 1 or more convex collision volumes that together roughly correspond to its actual shape (see this page on UDN to see how the Unreal Engine works with collision hulls for objects).
You will have to use some spatial subdivision technique to quickly determine which of all world objects to check for collision when moving an actor. If most movement is in 2 dimensions (for example, just terrain and some houses), you could use a simple grid or a quadtree (which is like a grid with further subdivisions). A 3-dimensional option would be the octree.
The point of the spatial subdivision is the same as with the terrain organized as a grid: To associate place objects with cells/volumes in space so you can determine the set of objects to check for a collision, instead of checking for collision with all objects.
Checking for collision
Get the "potential collision objects" using the spatial subdivision technique you've used; f.e. get the objects in the actor's current grid cell.
For each convex collision volume of each object:
Using the separating axis theorem, determine if the actor intersects with the collision volume. See my answer to a different post for some implementation hints (that question is about the 2D case, but the code largely applies; just read "edge" as "plane").
If collision occurs, use the normal of one of the "offending planes" to move the actor to just next to that plane.
Note: In this case, model your actor's collision volume as a box or 3-sided cylinder or so.
Also, you may want to consider building a BSP tree for each object and use axis-aligned bounding boxes for your actors instead. But that's getting a little beyond the scope of this answer. If your objects will have more complicated collision volumes, that will be faster.
Final thoughts
Well, this is already a really long answer, and these are just some broad strokes. Collision is a pretty broad topic, because there are so many different approaches you can take depending on your needs.
For example, I haven't covered "trace collision", which is detecting collision when an actor moves. Instead, the above suggestion on objects checks if an actor is inside an object. This may or may not suit your needs.
I also just realized I haven't covered actor-vs-actor collision. Perhaps that's best done as colliding 2 circles in the (x, y) plane, with an additional check to see if their vertical spaces intersect.
Anyway, I really gotta wrap this up. Hopefully this will at least point you in the right direction.