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
Related
I have two spheres on which panoramic image is mapped. I want to make smooth transition between 2 panoramas with fade effect. for both panorama I have initial camera direction set for best view.
Now the issue is if user is looking at some camera angle in first panorama and then he clicks on some button to switch panorama I want to give fade effect and directly land on initial camera angle of another pano.
But as both pano are sharing common camera, I cannot play with camera to achieve it so I devised following solution -
image depicting problem
rotate target sphere so that it looks at desired camera direction.
rotate target sphere so that it looks at existing camera direction.
fadeout source sphere.
camera look at new panos camera direction.
rotate back pano to initial orientation.
Here I am not able to find formula of rotating panorama to look at camera. (like camera is static and pano is rotated to achieve similar effect as if we are moving camera).
Can somebody please help in finding formula to rotate pano(sphere) relative to camera.
Matrix is a very powerful tool to solve rotation problem. I made a simple to explain.
At the beginning, the camera is in the center of the left sphere and face to initial viewpoint, then, the camera face to another point, now, the camera's rotation has changed, next, camera move to the center of the right sphere and keep its orientation. and we need to rotate the right sphere. If C is the point that we want to make the camera to face, first, we rotate A to B， second, we rotate some angle θ equal to C to A.
So, how to do like that? I used matrix, because A is an initial point, matrix in an identity matrix, and the rotation from A to C can be represented by a matrix, calculated by three.js function matrix4.lookAt(eye,center,up) which 'eye' is the camera position, 'center' is coordinate of C, and 'up' is camera up vector. Then, rotation matrix from C to A is the inverse matrix of the matrix from A to C. Because the camera is face to B now, so the camera's matrix equals to the rotation matrix from A to B.
Finally, we put it all together, the final rotation matrix can be written in:rotationMatrix = matrixAtoB.multiply(new THREE.Matrix4().getInverse(matrixAtoC));
jsfiddle example.
This way is a matrix way, you can also solve the problem with the spherical polar system.
When i view my scene from far distance i see faces edges on the objects.example
At a certain angle i can see the lines clearly like wireframe.
How to remove these.
Thanks
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.
I'm currently trying to get my head around a method to create roof-like structures on top of my extruded shapes in Three.js. Without delving into straight skeletons, the simplest approach I can think of is to extrude and scale the top face of my extruded mesh to look roof-like, or create a new mesh on top that is shaped to look like a roof.
This is the most basic style that I'm after, if applied to an extruded rectangle (a cube):
The shaded area of the roof is higher than the non-shaded area.
And the same style, if applied to a more complex extruded shape:
What I can't work out is how to create a roof structure like that, especially for complex shapes like the second example. I have the vertices for the building 'footprint' but I don't know how to extrude them while scaling the top face to give the slanted sides.
I could definitely work out the scaled vertex positions but them I'd have another problem in not know how to connect the top (scaled) face to the bottom face (ie. how to make the side faces).
Any ideas?
Sounds like you want to experiment with the bevel parameters in ExtrudeGeometry.
https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/ExtrudeGeometry.js
As the top roof polygon will have the same number of verts as the bottom roof polygon isn't this just a case of looping through each top roof polygon vert and connecting it to it's bottom roof polygon vert?
And, any two verts on the top roof polygon along with their associated verts on the bottom roof polygon will give you all the verts for a side face.
* 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.