I'm trying visualize leg position with connected gyro/acelometers
one connected below and second above knee
so I have 3 angles for each one ( x1,y1,z1, x2,y2,z2 )
I can draw and rotate each one independent, but have no idea how to connect them with sphere( knee )
Position doesn't matter, only angles valuable
I'm new with three.js and haven't even direction how to do this
You can add leg parts as children of the knee.
https://threejs.org/docs/#api/en/core/Object3D.add
Alternatively you can merge geometries but you would lose independent angles https://threejs.org/docs/#api/en/core/BufferGeometry.merge
Related
I'm having trouble UV mapping each side of a cube. The cube was made as a BufferGeometry where each side is a rotated copy of one side (sort of a working template) and rotated accordingly by applying a quarternion. UVs are copied as well. I'll skip any vertex coordinate I've seen before and rely on indices.
This leaves me with a total of 8 vertices and 12 faces. But I think I'm running short on vertices when I have to set all of my UVs. As obvious on the screenshot I've "correctly" mapped each side of the cube. But the top and bottom is lacking. I don't know how to set the vertex UV top and bottom faces.
Can I in some way apply several UVs on the same vertex depending on which face it is used in or have I completely lost the plot?
I could solve the problem by applying 6 PlaneBufferGeometry but that would leave me with 4*6=24 vertices. That is a whole lot more than 8.
I haven't been able to figure this one out. Either I've complete misunderstood how it works or what I'm trying to accomplish is impossible given my constraints.
With BufferGeometry, vertices can only be reused if all the attributes for that vertex match. Since each corner of the cube has 3 perpendicular normals, there must be 3 copies of that vertex.
If you have uvs, it is the same issue -- vertices must be duplicated if the uvs are different.
Study BoxBufferGeometry, which is implemented as "indexed-BufferGeometry".
three.js r.90
I try to do a cylinder unwrap animation for students to better understand the three surfaces of a cylinder.
It should look like this (found on youtube):
I can draw both circles (bottom and top) using THREE.CylinderGeometry
I can draw the lateral surface using THREE.CylinderGeometry without filling
But how do I do the outer blue animation of the unfolding "rectangle"?!
I have never done an animation with three.js before, so I would also need a suggestion here. Thanks.
The easiest way for this would be to use 3 meshes :
two CircleGeometry-ies for the circles
one custom Geometry for the unwrapping plane
The plane is actually two sets of vertices that represent a line wrapping/unwrapping over a circle. What controls the movement is that angles between each segments are tweened equally. With N being the number of segments, N being even for simplicity, you need to tween this angle from 0 (line state) to 360/N (circle state) on one side, and to -360/N on the other, beginning at the middle (360/N stands for 180/( N/2 ) on each side).
So in your custom Geometry() you define vertices and faces. Then you tween them with your favorite tweening library. End each update callback with geometry.verticesNeedUpdate=true;.
http://jsfiddle.net/2x4Lbvs0/7/
I have a cube (six faces). I render three faces of a statically-positioned cube with material that have their transparent property set.
I want to retrieve the three closest faces to the camera, so that I can set their transparency/opacity.
If I programmatically rotate the cube in the render loop, how would I calculate the distance of each cube's face (Face3) from the camera?
At any moment, only one of the 2 opposite faces can be in the 'closest' group ... or in the group that are facing the camera, it is the same subset.
So, for a pair of opposite faces , take the normal of one of the faces, and calculate the dot product of this vector and the vector linking that face to the camera. If the dot product is positive, choose this face. Else, choose the opposite face.
And repeat for the remaining 2 pairs of faces.
I want to create a shader to outline 2D geometry. I'm using OpenGL ES2.0. I don't want to use a convolution filter, as the outline is not dependent on the texture, and it is too slow (I tried rendering the textured geometry to another texture, and then drawing that with the convolution shader). I've also tried doing 2 passes, the first being single colorded overscaled geometry to represent an oultine, and then normal drawing on top, but this results in different thicknesses or unaligned outlines. I've looking into how silhouette's in cel-shading are done but they are all calculated using normals and lights, which I don't use at all.
I'm using Box2D for physics, and have "destructable" objects with multiple fixtures. At any point an object can be broken down (fixtures deleted), and I want to the outline to follow the new outter counter.
I'm doing the drawing with a vertex buffer that matches the vertices of the fixtures, preset texture coordinates, and indices to draw triangles. When a fixture is removed, it's associated indices in the index buffer are set to 0, so no triangles are drawn there anymore.
The following image shows what this looks like for one object when it is fully intact.
The red points are the vertex positions (texturing isn't shown), the black lines are the fixtures, and the blue lines show the seperation of how the triangles are drawn. The gray outline is what I would like the outline to look like in any case.
This image shows the same object with a few fixtures removed.
Is this possible to do this in a vertex shader (or in combination with other simple methods)? Any help would be appreciated.
Thanks :)
Assuming you're able to do something about those awkward points that are slightly inset from the corners (eg, if you numbered the points in English-reading order, with the first being '1', point 6 would be one)...
If a point is interior then if you list all the polygon edges connected to it in clockwise order, each pair of edges in sequence will have a polygon in common. If any two edges don't have a polygon in common then it's an exterior point.
Starting from any exterior point you can then get the whole outline by first walking in any direction and subsequently along any edge that connects to an exterior point you haven't visited yet (or, alternatively, that isn't the edge you walked along just now).
Starting from an existing outline and removing some parts, you can obviously start from either exterior point that used to connect to another but no longer does and just walk from there until you get to the other.
You can't handle this stuff in a shader under ES because you don't get connectivity information.
I think the best you could do in a shader is to expand the geometry by pushing vertices outward along their surface normals. Supposing that your data structure is a list of rectangles, each described by, say, a centre, a width and a height, you could achieve the same thing by drawing each with the same centre but with a small amount added to the width and height.
To be completely general you'd need to store normals at vertices, but also to update them as geometry is removed. So there'd be some pushing of new information from the CPU but it'd be relatively limited.
I'm working on a 3D tile based game and I'm using AABB collision detection. For every cube that the player is intersecting, I find the axis along which the player is intersecting the cube the least, and push the player out of the cube along that axis.
Depending on the order that the cubes are checked in, this can cause problems when sliding along the edge of multiple cubes. I have created a diagram that should explain the problem:
http://imgur.com/mmK0W.png
Arrow #1 is the attempted movement of the player. The other arrows are the collision response.
In the left diagram, collision is tested against the right cube first, causing the player to be pushed to the left, and then upwards. (bad)
In the right diagram, collision is tested against the left cube first, causing the player to be pushed upwards, at which point the player is no longer intersecting the other cube. (good)
Any ideas on what the most efficient way to solve this might be? Or any better ways to handle the collision response?
Thank you.
A discrete implementation forces you to inject some continuous math in the system, only when required (cubes / directions overlap).
For each cube c1, c2 ... ci with which the user cube (uc) intersects at the time of the check, you want to find out which cube was "touched" first - there is only one, as in real life. Consider the direction d of uc, and, taking the amount of uc in ci (overlapping) find the position of cu at the time it "touched" ci.
Determine which cube was "touched" first cj (the one that required the most rollback on the d axis - the sooner in time) and use only this one to calculate the collision reaction.
Not only you'll reach accuracy. but it will help if all cubes are moving, have different speeds etc...
From your diagram, it seems you want the smallest move that minimises the overlap between the player and the cubes. Each cube with overlap will try to "push" the player in two orthogonal directions. Can you do something like pick the minimum push of the maximum pushes in each direction?
You might implement a kind of hybrid broad phase when your two (or more) stationary cubes in a row can be combined into one larger rectangle. Test against the larger rectangle first. It will give you the results of your green check mark and be faster than checking each cube anyway. Then, after that, only if you need to, check against the individual cubes.
A collision can push an object on 1 axis only. To determine the axis to push:
else -- not this
elseif -- change to this
if w > h then
push x
elseif h > w then
push y
end
This works if your tiles are aligned.
Use circles to avoid the stick on unaligned tiles