I need to check whether a THREE.Triangle overlaps with a THREE.Box3 object. Is there an existing function in THREE.js for this purpose? If not, how could I achieve this?
Since there is no in-built function for a triangle-box-intersection test I came up implementing such an algorithm by myself. It is based on Separating-Axis-Theorem (SAT) as suggested by TheJim01. For my use case I needed a test for an axis aligned bounding box (AABB).
The following sources were especially helpful for this.
AABB Triangle intersection
Fast 3D Triangle-Box Overlap Testing (Akenine-Möller)
The book "Real-Time Collision Detection (Christer Ericson), pp. 169-172 (found online Google Book)
Using these sources, it wasn't that hard to implement this test. However, during my research I figured out that such an AABB-Triangle test is a quite common operation in 3D graphics. Hence, I guess it would make sense having such a testing function in THREE.js. I will suggest this as a feature request.
Related
In working with Three.js and I’ve run across several useful Helper classes that really make displaying and or modifying the scene much easier. There is one tool out there that I can’t seem to find again. It is kind of like the AxisHelper however it has a plane between the axis when you mouse over that area allowing the user to move the object along the xy, xz, or yz plane depending on what you pick. I’ve drawn an example of what it adds to the object in order to help the user move the object along the plane. If anyone knows of this tool or maybe an example of something that uses a utility like this, it would be great if you could point it out to me. Thanks.
I expect you are looking for TransformControls. There is a three.js example of its use here.
TransformControls is not part of the library -- it is part of the examples. You must include it explicitly in your project.
three.js r.80
I'm just looking for someone to point me in the right direction. My Google-fu is failing me.
I'm working on a WebGL game, and I'm using raycasting for collision detection. I'm using Clara.io to create levels. I'm using THREE.ObjectLoader() to load the scenes. What I'd like to do is split the scenes I've made into smaller parts so as to not have to do raycasting on all vertices in the level. I'd like to not have to split the level mesh into tiny pieces inside of Clara for isolated raycasting, but instead do it within the game itself.
How do I go about only doing raycasting on a small section of a mesh? Is there a tutorial that anyone knows about or an example? I've chosen to not use heightmaps or any physics libraries.
Thank you in advance!
The problem of finding out which parts of mesh are relevant is usually solved using some sort of space partitioning algorithm. A relatively simple but effective approach for a static mesh is using an Octree.
A Three.js - specific implementation of an Octree (by Collin Hover) can be found here. You can either use it directly or take some inspiration from it to write your own.
I am developing html5 game based on hexagonal grid.
After some investigation I have used :
MelonJS + Tiled + this tricky thing. Everything seems good in this combination, until I started to think about dynamic showing some hexagons, that my player will be able to go.
There are few ideas that comes to mind:
Calculate coordinates and draw on canvas skipping melonjs, but it's bad idea from architecture point.
Adding custom property for each hexagon texture object, but it's too much manual work.
Adding some facade for melonjs in order to work with it or maybe it's already done?
So my question is:
What's the best way to solve this problem in scope of those technologies or maybe should I use another tool?
Depending on how much content you have already developed, did you consider to use a Tiled daily build with support for hexagonal maps?
Of course, since melonJS doesn't support this yet you would either need to implement the hexagonal renderer yourself or try to get the support from melonJS developers to add it. I've opened an issue about this.
I may have misunderstood your question a little, though. If you are talking about an overlay on top of the map that shows the player where he can walk to from his current position, then the way to go would be to draw this yourself after melonJS has rendered the map. I can't help you with exactly how to do this because I don't have that much experience with melonJS.
I have a B-Spline curve. I have all the knots, and the x,y coordinates of the Control Points.
I need to convert the B-Spline curve into Bezier curves.
My end goal is to be able to draw the shape on an html5 canvas element. The B-Spline is coming from a dxf file which doesn't support Beziers, while a canvas only supports Beziers.
I've found several articles which attempt to explain the process, however they are quite a bit over my head and really seem to be very theory intensive. I really need an example or step by step help.
Here's what I've found:
(Explains B-Splines),(Converting to Beziers),(Javascript Example)
The last link is nice because it contains actual code, however it doesn't seem to take into account the weight assigned by the nodes. I think this is kind of important as it seems to influence whether the curve passes through a control point.
I can share my Nodes or Control Points if that would be useful. If someone would point me to a step-by-step procedure or help me with some psuedo(or actual)code, I would be so grateful.
I wrote a simple Javascript implementation of Boehm's algorithm for cubic B-Splines a while back. It's a fairly straightforward implementation involving polar values, described here in section 6.3: Computer Aided Geometric Design- Sederberg
If you're just interested in the implementation, I've linked the classes I wrote here: bsplines.js
This could be helpful - https://github.com/Tagussan/BSpline
My project has moved on and I no longer need it, but this seems to be a pretty useful way to feed control points and have a curve drawn.
I want to code a little Game, dealing with fonts and letters. I want to make them move arround in 2d space and i am using box2dweb as physics engine, what is actually doing a very great job. At the moment all I am struggling with, is the problem of building the b2Body for a Letter. Box2d can only handle primitive, convex shapes and to build an more complex hitbox I have to combine some of them. In the image I tried to figure out what i would like to reach, an algorithm, that takes an svg-path of a letter and generates a series of b2shapes which represent the hitbox.
All in all i have no Idea where i could find some Information about this, if there is a library that is capable of doing this. Even if this Library is not available in Javascript, i could do the job on Server.
I know that there is paper.js and raphalel, some clever vector libraries, but i have not found any hint how to solve this yet.
I would be happy for any kind of help, links to ressources, or the correct name of the problem in mathematical sense.
Greetings and thanks in advance...
Philipp
I just want to leave the result of investigation here, maybe someone will help it. The initial idea is based on »ear cutting«, »ear culling«, or »ear cropping«. A demo here will describe this. But the algorithm, which produces less, but box2d suitable polygons is shown in a demo here. The idea is to merge as much triangles as possible, as long as they are convex and this case, do not have more than eight edges. A triangle is suitable to be added to a polygon, if one can find two points in the triangle and two adjective points in the polygon, with the same x and y coordinates.