Is there any way to get the face of the bounding box as we get in geometry. As I tried the bounding box only generates the min max value.
What I can't figure out is how to get a face for the bounding box-- is this possible?
An AABB has no concept of faces. So no, Box3 does not provide properties/methods for face access. However, you can try to apply the translation of the AABB to a mesh with the same size and then work with the respective box geometry.
Keep in mind that a bounding box in three.js (an instance of Box3) is always axis-aligned. So you can't apply any rotation to it.
three.js R109
Related
I am creating a viewer using three.js and found that setting camera near and far plane to fixed values is causing flickering for some 3d models.
I see that this is due to the fact that GPU is running out of precision for model having bounding box length around 4000-5000.
Near plane is currently set to 0.1 and far to 20000.
You can move up your near plane to get more resolution. Maybe 1.0...
Another option to be aware of is logarithmic depth buffer:
https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html
You can get the bounding box of the mesh via its geometry... geometry.boundingBox and geometry.boundingSphere .. sometimes you need to recalculate them using mesh.geometry.computeBoundingBox and computeBoundingSphere...
To get the bounding box in camera space is a bit tricky.. I don't know of a super optimal one-liner to do it, but someone else may weigh in...
a brute force way would be to transform the mesh vertices to screen space..
Maybe something like:
var gclone = mesh.geometry.clone();
for(var i=0;i<geometry.vertices.length;i++)
gclone.vertices[i].applyMatrix4(mesh.matrixWorld).project(camera)
gclone.computeBoundingBox()
var zExtent = gclone.boundingBox.max.z-gclone.boundingBox.min.z
I loaded a .obj earth and I'm trying to perfectly center it to the world origin. By "center it to the world origin" I mean I want the object exact center to be at the world exact center (0, 0, 0).
I know I can use a bounding box to get the center of the object and then maybe translate the whole object by minus that amount but is there a simpler way to do this ?
When you add a mesh to a scene, it is automatically added at the origin.
The bounding box way is non-destructive to your geometry, so if your shape has an offset built into it, you won't lose that. It's also "easy" because a majority of the processing is in finding the bounding box initially, and then that box doesn't change unless you scale or deform the shape.
There is an alternate way, if you don't mind your geometry changing: mesh.geometry.center(); will shift all the vertices such that the shape's geometric origin is at the mesh's origin (and if your mesh's origin is already at the scene origin, then you're good to go).
In my program, I add points to a particle system and then calculate bounding box for it as:
var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial(0xff0000));
var box = new THREE.BoxHelper( object, 0xffff00 );
scene.add(box);
geometry is instance of BufferGeometry and it contains all the points constituting particle system.
What I see is that bounding box is wrongly aligned. Its in direction perpendicular to expected direction.
So I expect wireframe structure to envelop the point cloud.
Do I need to do something extra here?
Edit:
Code I am working upon is in github repo:
github file
In function ParticleSystemBatcher.prototype.push, points read from a file are pushed in particle system.I have added code above at end of this function. Bounding box does appear,but aligned wrongly.
You have a THREE.ShaderMaterial which applies some logic to positioning these vertices. Hence, the result rendered is different than the result stored in the main memory.
You can debug this by making a Mesh or sprite, and positioning each where you expect the particle in the system to be using just rhe scene graph (object.position.set()). The result will be a bunch of dots that are not in the same space as your particle system. These will also fit the bounding box.
The solution is to apply the same transformation that is being applied by the shader.
I have a problem with mapping a texture in THREE.js which is possibly related to creating custom UV-Coordinates as extensive search indicates.
The following picture shows a geometry which was created from THREE.BoxGeometry by manipulating the lower vertices of the box. The texture on the side looks stretched (although this is correct I guess).
picture1
Is there a way of "projecting" the texture onto the side, e.g. by creating custom uv-coordinates to look like in the second (photoshopped) picture?
picture2
Thanks for you help!
You will need to remap your vertices manually to perform what is called a "box mapping" or a "triplanar mapping".
Here is an example I threw together: https://codesandbox.io/s/qxk8xvnrvj
It creates a cube with some subdivisions.. perturbs those vertices if they are on top... and then does the iterations through the faces uvs and vertices to remap each faces UVs with a box mapping, by finding the dominant axis the face normal points along... and then using the other 2 axis' as the U and V axis for unwrapping.
After look at the code I have seen how every planegeometry is created to every box face.
Faces are created to let normals be consistent. So opposite faces has a different UV behaviour.
The problem I have found: If you make a simple 90 degrers rotation the 'up' UV direction of opposite faces are different, so you have to take this situation into account.
Is there any 'recomputeUV' or similar function ?
Could it be fixed ?
Thanks.