http://trumpetr.com/three.js-master/examples/webgl_geometry_cube.html
It's a program that takes a polygon and rotates it around an axis. For some reason, when viewing from the top, you can see the faces that should be hidden. Also, the side faces flicker a ton. Earlier, I has some trouble with defining the vertices of the triangles in counter-clockwise order, but I'm pretty sure I've fixed that.
Related
In order to stretch a 2D rounded rectangle without distortion, I repositioned the rectangle towards one direction (eg left) by the desired amount and added that amount to the right-most vertices to compensate and appear stretched.
The problem is that now raycaster is missing the right-half of the rectangle.
I made the following jsfiddle stretching a normal rectangle:
http://jsfiddle.net/vser1n2u/5/
If you hover the mouse on the rectangle you’ll see that raycaster works properly (“TRUE” indication). If you click on the rectangle, it will expand to the left. Now if you hover you’ll see that it works only half way (“FALSE” indication).
Am I missing something, or is this a three.js bug?
When you modify the vertices of a geometry after it has been rendered, you need to recompute the bounding sphere for raycasting and frustum culling to work correctly.
So in your case,
o.m.geometry.computeBoundingSphere();
Updated fiddle: http://jsfiddle.net/vser1n2u/6/
three.js r.98
I am trying to simulate an omnidirectional light source in a 2D room. I would like to set up a room and have "light" propagate from a point source, stopping only when it reaches a wall. The result is shadows will be cast where the light cannot reach. The below picture shows the problem with several point sources
I am implementing this in D3 JS as part of a game based around the art gallery problem.
I am struggling to come up with a data structure suitable for allowing this simulation and animation. I imagine a circle radiates out from the source, splitting into arcs whenever it encounters a wall? Is there a way to do this without simulating lots of individual light beams?
I don't really think d3 will help here, besides drawing the SVG. On the theoretical side, <circle> elements have defined radii, which means that they will curve at the circumference. Arcs will do the same. The art gallery problem deals with polygonal spaces and circles are (arguably) not polygons.
On the practical side, if you are going to use d3, I would instead recommend making <polygon> elements. From your picture, it looks as though each 'light' covers at least one room, and the points of a polygon can match the coordinates of the walls. Where the lights extend out into other rooms, they look to be, from the dotted lines, triangles in most cases. Where the colors overlap, d3 can help because SVG elements are allowed fill properties with alpha components.
d3.select('svg').append('polygon')
.attr('fill', 'rgba(255, 0, 0, 0.5)')
.attr('d', foo);
That will draw a polygon with a semi-transparent red color.
However, d3 won't help you figure out the coordinates of these lights. IMHO you could do this with a search algorithm which starts at a 'light source' and emanates out in a linear fashion checking for walls. When it finds a wall, it takes the coordinates of that 'stop' point and adds it to the path of the polygon. When the polygon draws, the colors will overlap and appear to be light sources.
I try to draw a mesh with several faces.
Some of the faces are drawn some of them not.
When instantiating a mesh which is normally not drawn,
with the index in reverse it is drawn.
The following doesnt work:
geom.faces.push(new THREE.Face3(k,k+1,k+2,myface.normal));
This works:
geom.faces.push(new THREE.Face3(k+2,k+1,k,myface.normal));
This for me means that the order of the vertices is
wrong and so the normal is drawn in the opposite direction,
but I pass the correct normal to the face (which I calculate myself)
Even if I try to negate the normal, the face is not drawn.
So if I pass the correct normal as I understand it, it would make
no difference if the indices are put in reverse or otherwise.
Where am I wrong?
The face front is determined by the winding order, not the face normal. The default winding order is counter-clockwise (CCW).
Have a look at the source of Geometry.computeFaceNormals(), and notice how the computed face normal is consistent with a CCW winding order.
three.js r.58
* SOLVED *
It was not about 0,0,0 or distortion. It´s super weird but I found out that compute geometry as a Sphere worked! (even at the tiles corners, where you should think a sphere wouldnt cover it does)
http://threejs.org/docs/#Reference/Core/Geometry
computeBoundingSphere();
Problem desc. follows below.
Hey I'm building a webgl wall for my portfolio site, I need ray intersection to know both when user hovers over the wall and when they click what plane they're clicking on so I can redirect them to correct project.
http://www.martinlindelof.com
What i do is adding all planes on xyz(0,0,0) then I'm using dynamic geometry to place out their vertices on a point grid that's affected by a repelling particle (using traer)
now when I'm doing ray intersect (using examples from threejs r49) I get an empty array back, nothing hit.
could this be because all planes origins are in 0,0,0. should I maybe on each frame not only moving vertices but the entire plane?
or is something else.
(face normals seems to be pointing in the right direction, I see the texture on the plane and it's not inverted as it should be if it was the face backside with double sided planes. guess it's not by default in three.js when creating plane)
Ray got problems with object position 0,0,0 (because somewhere will be divided by position and will result in not dividable). Try another position.
I am working on a project where I have a rolling marble in 2D. I can detect when the marble hits the corner of a box but I can't figure out what behavior it should have when it hits the corner. I need to figure out how to reposition the ball so it doesn't overlap the box. With a box to box collision it is as easy as setting the boxes right next to each other but for a circle and box I don't know where to move the marble to so it looks realistic.
I am not asking how it bounces off. I do have a good understanding of trig. As you move the marble towards the box it will, at some point, come to overlap with the box. I need to know how to make it so they don't overlap anymore but so it still looks realistic. It does not need to bounce off (like assuming infinite mass on part of marble).
Take a good look at this article on Wikipedia: Elastic Collision.
You will need to create surface normals for your 2D objects at any given surface point, which will be problematic if your boxes are perfectly square, as sharp edges don't have normals. You will have to give the corner cases (no pun intended) special treatment and give them surface normals that are the average of the normals of the two lines that join at the corner.
Basically, use vectors.