Is it somehow possible to filter rendered objects based on distance between camera and object ? I would like to specify that some object can be rendered only from close distance ( like details on complicated meshes etc ). I know i can handle this myself but before that I'm looking if there is any build in solution.
Yes, a feature is available for that. It is called level-of-detail ( LOD ).
See http://threejs.org/examples/webgl_lod.html. Click the mouse to see the effect.
three.js r.62
Related
I am having a human body object and what I want is that my code should open a popup whenever I click on any of the specified body parts such as eyes, nose, arms, etc. The object is a single compiled .obj file and I'm unable to figure out as to how should I attach an event listener to the multiple body parts. Any kind of help is much appreciated!
PS: - I am also using orbit controls to handle the zoom and rotation of object.
Thanks in advance..
To solve this issue, it's necessary to design your model in a way such that individual components like arms, eyes etc. are independent 3D objects grouped together to build a more complex asset. This is something you have to ensure during the design phase with a tool like Blender.
In the next step export to glTF instead of OBJ, load the model with THREE.GLTFLoader into your app and then perform a recursive raycasting with the entire asset via:
raycaster.intersectObject( gltf.scene, true, intersects );
By executing this code in a pointermove or pointerdown event listener you can find out whether the user interacts with the model or not.
Notice that three.js has no system to directly assign event listeners to 3D objects. You have to use a different solution like raycasting for this.
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).
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 <A>)
via menu "Mesh" > "Normals" > "Recalculate Outside" (shortcut <Ctrl>+<N>).
I am using THREE.js via this - https://github.com/ubilabs/google-maps-api-threejs-layer and I would like to implement custom logic for switching LODs. The main reason is that distance from camera is still the same but camera have scale set based on zoom level of map. I would like to switch LOD based on zoom level. I am trying to figure out how to "hack" LOD logic so I could pass own function which will be called by THREE.js and will return which LOD to use.
Please can you give me some hints how to implement this in the way as clean as possible?
I am working on a program, that uses THREE.RollControls, when the user goes too far away from the center of the screen, they tend to get lost, so I am working on creating a function that reorients them, facing the center of the scene.
What I had intened to do was simply call the following:
camera.lookAt(scene.position)
However, this has no affect. From what I was reading on different stack overflow questions specifically this:
ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?
It seems like their solution was to do the camera position change using the controls, rather then changing the camera itself.
I do not believe there is any 'Target' in the Roll Controls, so I don't know how I can reset where the camera is looking at based on a THREE.Vector3() Is there a simple way to do this, or will I basically have to:
So far I have 'attempted' to do the follow:
- Calculate the difference of position of the camera with the position of the scene.
- Normalize this vector
- Subtract it from the direction forward of the camera
- use this vector in controls.forward.add(thisVector)
but this doesn't do at all what I want (probably because I have no idea what I'm doing)
Thank you in advance for your time!
Isaac
The same thing bugged me too about the RollControls but I took a different approach in solving the problem. Since the controls are in the example code (in r55) you can modify the controls, as they are not part of the core library. You can see my modifications at http://www.virtuality.gr/AGG/EaZD-WebGL/js/three.js/examples/js/controls/RollControls.js
I introduced a local variable called mouseLook because I could not use the this.mouseLook. I initialized it to false and I only make it true when there is a button press i.e. when navigating in the scene. That solved my problem.