Three.js Position and visibile issue - three.js

Currently, I am trying to dive deeper into grouped objects or better hierachic ordered objects. However I got a strange issue with the position and the visibility of a object3D and childs of those.
So i have a set of objects, a light source with is the main object so far, and a few spheres for example, which are childs of the the main object.
The problem is, that child objects, which are positioned behind another object ( siblings ) ( from the camera view ) are visible. And all childs objects appear infront of the main object while those actually positioned behind the main object.
Sadly i can't reproduce this in a codePen so i had to take some pictures of the scene, many apologies for that.
In the pictures, the camera rotates clockwise around the light source (main object to the left).
So basically what I am doing is:
mObj = new THREE.Object3D();
mObj.add(new THREE.Mesh(someGeometry, someMaterial);
cObj = new THREE.Object3D();
cObj.add(new THREE.Mesh(someGeometry, someMaterial);
mObj.add(cObj);
scene.add(mObj);
Is that related to the object hierachic order or something else?
The second more negligible issue is, that on one of my pc's, those parts of objects which are dark (because of no lighting), generate those strange black/grey faces, which i cant explain. Maybe Graphicscard/driver or something?

What's the distance between these objects? It could be a floating point rounding issue. I've run into it myself.
If it's so, and you're getting flickering models, you'll need to keep your camera and the active model at the origin, and move the universe around you to keep precision in the important places (near the player).

Related

How to prevent object from flying towards camera when using Ray-cast in unity?

I got an unity project where object is meant to be moving with mouse cursor. The object moves fine, but when the object is still, it starts to float towards the camera that Ray-casts. I would like that the object doesn't float towards camera.
I couldn't find any reason for objects behavior.
I'm quite a novice who's had issues with gameobjects following cursors myself.
But could you try freezing the Y position in the Rigidbody and ensure gravity is unchecked?
More of a workaround if it even works.
Also I believe it's better practice to use rigidbody.position than transform.position. Try this:
public Rigidbody rigidbody;
void Update()
{
rigidbody.position = Camera.main.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, -Camera.main.transform.position.z));
}
What is happening here is when you send a ray and you get a hit result using hit.point it gives the exact location of the tris on the object it is hitting. Lets say the object is centered in the world (Vector3.zero). Ray is hitting a tris that is different than the position zero. Just because the object is in x:0y:0z:0 doesnt mean all the tris on the object is located at the same coordinates.
You get the coordinates of the hit.point, they are probably closer than the object center position, therefore the object is updating its center position to the hit.point location. And it does that every frame moving the object closer to camera.
You might want to try sending a ray from screen to world position. You can use custom vector length which would help to keep the object in the same depth you like.
Unity Docs Screen to World

Changing parents of a 3D model while keeping the same position

I'm using three.js library to work with 3d models (mostly .glb but it shouldn't matter)
The idea is to import a 3d model that contains groups and meshes. I want to be able to move meshes between already existing groups within a model without changing the visual representation of the model.
Piece of my code is below. movedInternal is
movedMesh.matrixWorldNeedsUpdate = true; // not sure if it's needed
let meshPosition = new THREE.Vector3();
movedMesh.getWorldPosition(meshPosition);
oldParent.remove(movedMesh);
newParent.add(movedMesh);
movedMesh.worldToLocal(meshPosition);
movedMesh.position.set(meshPosition.x, meshPosition.y, meshPosition.z);
And this is not working. Mesh changes its global position because new parent’s position is not the same as previous parent position, but I expect it to stay where it was but change its local position considering new parent’s position.
What do I do wrong?
I think you need to update the movedMesh's world matrix after you change its parents. When you .remove() then .add(), it doesn't know that its parents have been updated (Three.js usually does it when you're rendering, but this is happening before the next frame render).
let meshPosition = new THREE.Vector3();
movedMesh.getWorldPosition(meshPosition);
oldParent.remove(movedMesh);
newParent.add(movedMesh);
// Here it needs to re-learn its new coordinates
movedMesh.updateMatrixWorld(true);
movedMesh.worldToLocal(meshPosition);
movedMesh.position.set(meshPosition.x, meshPosition.y, meshPosition.z);
I've been searching for this solution since a week and haven't been able to tackle the exact problem. Though my question is diferent but has same scenario, I would like to give a solution for those, looking for it.
I have a 3D object with different child meshes, and i want to replace one of my child mesh with another 3D model.
Below code snippet:
replacementMesh is a new 3D object, meshToReplace is the child mesh that needs to be replaced.
// Copy the transformation matrix from obj1 to obj2
replacementMesh.matrix.copy(meshToReplace.matrix);
// Update obj2's position, rotation, and scale to match the transformation matrix
replacementMesh.position.setFromMatrixPosition(replacementMesh.matrix);
replacementMesh.rotation.setFromRotationMatrix(replacementMesh.matrix);
replacementMesh.scale.setFromMatrixScale(replacementMesh.matrix);
meshToReplace.parent.add(replacementMesh);
meshToReplace.parent.remove(meshToReplace);

OrbitControls.js and re-focusing orbit target on a new selected object

I am very bad at three.js - but I believe I have cobbled together a basic raycast on a set of objects, to select the object of interest.
http://designs.playgami.com/webgl_loader_fbx.html
I am now trying to have OrbitControls.js focus the target vector on that object, i.e., once selected, be able to orbit around that object. I have tried a few variations, where some lead to what appears to be an empty (or out of camera range) scene.
controls.target.set(obj.position)
where obj is the raycast object and controls is the OrbitControl instance.
The quick(?) question: how do you set the orbit center of three.js OrbitControl given an object from a raycast?
It turns out that the fbx model on raycast seemed to return one of its child objects in the child object's coordinate system (though the material coloring seemed to color the whole object). Setting it to the parent seems to have solved it.
Check to see if it's a child object or child segment that is returning the same local coordinate
for controls.target setting, the vector3 is an object that needs to be copied .copy (thanks #WestLangley)

Group of objects on top but added to a camera

As a precision I already noticed threads about this but didn't find a way to achieve exactly what I need.
Basicaly I have a board of objects that I need remaining always on top of everything but also attached to the camera.
I first tried to add the group to the camera and it stayed as wished always in the viewport. But in this configuration the group of objects still be a part of the scene so while zooming to regular objects in the "editor" the board goes into/among these objects of the scene.
My second trial was based on this thread and work wonderfully in order to get all of the board objects rendered above everything. But on such a configuration when rotating around the axis (with orbit control) both scenes rotates. So I tried to update the foreground scene with coordinates of the camera but the update was not immediate and this scene is flickering (I suppose that while rotating the update function is not called immediately).
My best wish would have been to "attach" the foreground scene to the camera so that it would stay on top and sticked on the screen/viewport but I don't even know if it is possible and how to do that (as only groups of objects seem to be capable to be attached to the camera).
I am really stuck on that point. Thanks you for any help!
If this is what you need,
just set object.material.depthTest = false; and object.renderOrder = 1000; for all objects you need to be always on top and attached to the camera.

Why do two faces appear invisible in ThreeJs?

I've an object in Blender. Because I want to do some UV-unwrapping using ThreeJS (see here) I determined that I need merge two of the sides to correctly unwrap.
So before exporting the .blend as a .obj object I selected the Tris to Quads face option to create a square face for the two sides as opposed to it being made up of two triangles. Here's what it looked like in Blender:
But when I import the .obj and .mtl file into ThreeJs I get this:
Is this a problem to do with me not updating the material being added to the new object?
The handles appearing white makes me think this is the case. If so how can I go about fixing it?
When I see something like this, the first thing I usually do is to set the material to side: THREE.DoubleSide. If that helps, the problem has to do with the normal-directions (so the face is actually there but isn't rendered because it is facing away from you).
To fix this, you should try the following:
In blender you can enable displaying of normal-directions in the right-hand menu (select "Face normals in section "Mesh Display").
You should now see if any of the normals are pointing inwards/in the wrong direction.
There is an automatic fix that works well for properly constructed meshes:
select object and switch into edit-mode (<Tab>)
select all vertices (shortcut &ltA>)
via menu "Mesh" > "Normals" > "Recalculate Outside" (shortcut <Ctrl>+<N>).

Resources