Currently, I'm working on a three.js project where I should select two boxes from a board and draw a straight line connecting them, then I must highlight all the boxes that the line intersects. My big question now is how to to find which boxes the line intersects?
Any help would be appreciated (piece of code, links, material suggestion, math formulas)
What you're describing sounds like you're looking for a Raycast.
You set up your ray (it's position and direction vector), and then use intersectObjects on the objects to get an array of the boxes the ray intersects.
What I really needed in this case was bresenhams line algorithm, with this I can track all different points that the line crosses.
Found at https://www.geeksforgeeks.org/bresenhams-line-generation-algorithm/
Thanks Ivan and Diarmid, I know my code was a big mess and you tried to help me despite that.
Related
I am working on a system to procedurally build meshes for "mines", right now I don't want to achieve visual perfection I am more focused on the basic.
I got the point in which I am able to generate the shape of the mines and from that generating the 2 meshes, one for the ground and one for the "walls" of the mine.
Now I am working on getting the UV mapping right but my problem is that the ground is really hard to map to UV coordinates properly and I am currently not able to get it right.
For the tessellation I am using a constrained version of the delaunay triangulation to which I added a sub-tessellation what simply splits the triangles at least once and keeps splitting them if the area of the triangle is greater than X.
Here a 2D rendering of the tessellation that highlight the contours, the triangles and the edges
Here the result of the 3D rendering (using three.js and webgl) with my current UV mapping applied (a displacement map as well, please ignore it for now).
I am taking a naive approach to the UV mapping, each vertex of a triangle in the grid is translated to values between 0 and 1 and that's it.
I think that, in theory should be right, but the issue is with the order of the vertexes that is creating a problem but if that would be the case the texture should be shown rotated or oddly not just oddly AND stretched like that.
Once I will get the UV mapping right, the next step would be to correctly implement the
I am currently writing this in javascript but any hint or solution in any language would be alright, I don't mind converting and/or re-engineering it to make it work.
My goal is to be able to procedurally build the mesh, send it to multiple clients and achieve the same visual rendering. I need to add quite a few bits and pieces after this other step is implemented so I can't rely on shaders on the client side because otherwise being able to place tracks, carts or something else on the ground would just be impossible for the server.
Once I will get these things sorted out, I will switch to Unity 3D for the rendering on the client side, webgl and three.js are currently being used just to have a quick and easy way to view what's being produced without the need of a client/server whole infrastructure.
Any suggestion?
Thanks!
I sorted out the issue in my code, it was pretty stupid though: by mistake I was adding 3 UV mappings per triangle and not 1 per point causing an huge visual mess. Sorted out that, I was able to achieve what I needed!
https://www.youtube.com/watch?v=DHF4YWYG7FM
Still a lot of work to do but starts to look decent!
I'm using Javascript, p5.js, and Daniel Shiffman's tutorial to create a visual representation of an A* search algorithm.
An image of an example grid looks like this:
example grid
Is it possible to click on any cell of the grid, in order to print out it's attributes? Based on Daniel Shiffman's other tutorial on how to click on objects, I understand I have to create 2 functions that activate and execute respectively. I understand how to do this with a circle because a circle has a radius.
But, I don't understand how to do this with a cell because I only have it's coordinates. I can't see how to use coordinates as a metric to calculate length.
I'd appreciate any guidance to my thinking. Thank you so much in advance.
I wrote a tutorial on collision detection available here. That's for regular Processing, but everything is the same in P5.js. You're looking for rectangle-point collision.
Basically, you need to check whether the point is between the left and right edges of the rectangle and between the top and bottom edges of the rectangle. If both are true, then the point is inside the rectangle.
I recommend breaking your problem down into smaller steps and taking those steps on one at a time. For example, try getting it working with a single hard-coded rectangle and point before you try it with multiple cells or with user input.
I'm building a tool for annotating three dimensional models using Three.js. I want users to be able to draw lines on a model that follow the contours of the surface exactly. For example, if you draw a line on a model of a person's face, and you place a point on either side of the nose, the line should go over the nose, not through it.
I can do this by drawing the line on the texture, but I want the line to be clickable, and that would require implementing hit detection myself. I'd prefer to do it as a line object in Three.js. Is there a simple way to find the faces between two points on the surface of a model?
Turned out to be easier than I thought: I converted the model to a graph of faces, where each face was a node, which was connected by edges to the other faces next to it. Then, it was a simple matter of finding the face that the user clicked on, and using a shortest-path algorithm (Dijkstra's, in my case) to find the faces between each node.
Happened to come across this and remembered I also solved this problem in a similar way to Dave a while back. I made a minimal case with a demo here: https://github.com/foobarbecue/threejs-shortest-path
I want to understand how I would draw a line between two shapes that are nested in other groups/layers. Here is a jsfiddle example which illustrates what I mean. As you can tell, when the coordinates in use are in the same layer, it is trivial to draw line. When the coordinates are nested inside other groups/layers, then the outcome is not as expected. Try moving the right box around to see the less than desirable results.
Could someone please show me how I translate coordinates from one layer into that of another.
You had some Xs where Ys should be, here's a fixed fiddle: http://jsfiddle.net/6UhNp/8/.
This works as far as you have specified, so you were using it right, but it does not work when you zoom in and out.
I have seen that zoom function you're using floating around recently, and I don't feel it's a correct solution. I haven't sat down to work it out yet, though.
I'm trying to make a simple javascript that draws rectangles on a canvas, then draws the side faces based on a one-point perspective. The problem is, the amount of rectangles and their positioning is arbitrary, so faces tend to overlap in a way that wouldn't happen in true 3D perspective. How can I determine the correct drawing order so that this won't happen?
Here are some screenshots to illustrate what I mean:
Screenshot 1 - The wrong way. In this one, the grouping of red, green, and blue blocks is being drawn in the reverse order of how they should be drawn.
Screenshot 2 - The right way. This is the way that it should be drawn.
What you are looking for is called the Painter's Algorithm that is as long as you don't have any intersecting polygons
Since your screenshots don't work, I'm going to take a wild guess and assume that the problem your having is that drawing rectangles from back to front yields weird overlaps.
One approach to fixing this would be to use simple binary space partitioning. Essentially, expand every front facing rectangle to an infinite plane. Then, split all of the side rectangles where those planes intersect. Then, drawing from front to back should not product overlaps anymore, since the side rectangles will be split wherever any overlap problems would have occurred.
Edit: Ah, now that your screenshots work I don't think that's your problem. Ah well, I'll leave the answer anyways.