I have added a pyramid mesh into the scene and I can rotate it about the x, y and z axes individually.
What I need to do is add an object to the scene that is 5 coloured dots to represent the 5 vertices of the pyramid, and then rotate this object.
I know the coordinates of the vertices but I'm not sure how I would implement this. To rotate the pyramid mesh I am using mesh.rotation.x, mesh.rotation.y, mesh.rotation.z.
Should I maybe try to create a custom mesh containing the 5 vertices and use mesh.rotation, or is a different approach easier?
The usual approach for solving this issue is to add the coloured dots as child objects to your pyramid. If you then rotate the pyramid, the dots will rotate to (because the keep their position relative to their parent).
The position of the colored dots are the coordinates of the respective pyramid vertices.
Related
Is there a way to resize the edges and faces of objects like cubes in three.js?
For example, I want to build the shape you see below without using Blender or a modelling tool. I want to scale the edge and faces of the cube to make the sharp edges as you see below.
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'm trying to make a rubik cube game in webgl using three.js (you can try it here).
And I have problems to detect on witch axis I have to rotate my cube according the rotation of the cube. For instance, if the cube is in original position/rotation, if I want to rotate the left layer from down to up, I must make a rotation on the Y axis. But I rotate my cube 90 degrees on Y, I will have to rotate It on the Z axis to rotate my left layer from down to up.
I'm trying to find a way to get the correct rotation axis according the orientation of the cube.
For the moment I check witch vector of the axis of the rotation matrix of the cube is most parallel with the vector(0,1,0) if I want to move a front layer from down to up. But it do not works in edge cases like this for instance :
I guess there is some simple way to do that, but I'm not good enough in matrix and mathematical stuff :)
An AxisHelper can show the aixs of the scene which you could determine the orientation with.
var axishelper = new THREE.AxisHelper(40);
axishelper.position.y = 300;
scene.add(axishelper);
You could also log your cube and check the position and rotation properties with Chrome Developer Tools or Firebug.
You can store the orientation of each cube in its own 4x4 matrix (i.e. a "model" matrix) that tells you how to get from the cube's local coordinates to the world's coordinates. Now, since you want to rotate the cube around to an axis (i.e. vector) in world coordinates, you need to translate the axis into cube coordinates. This is exactly what the inverse of the model matrix yields.
I'm drawing a simple cube using 8 vertices and 36 indices. No problem as long as I don't try to texture it.
However I want to texture it. Can I do that with only 8 vertices? It seems like I get some strange texture behaviour. Do I need to set up the cube with 24 vertices and 36 indices to be able to texture the cube correctly?
It just doesn't make sence to use vertices AND indices to draw then. I could just as well use vertices only.
One index refers to one set of attributes (vertex, normal, color, edge flag, etc). If you are willing to have the texture mirrored on adjacent faces of the sides of your cube, you could share both texture and vertex coordinates for the sides. However, the top and bottom faces sharing those same coordinates would not work -- one axis of the texture coordinate would not vary. Once you add other attributes (normal in particular) then a cube would need 24 individual indexes (each with vertex, texture and normal) to have "flat" sides.
Another approach that may work for you is texture coordinate generation. However, needing 24 individual vertices for a cube is perfectly normal.