i got a Scene which loads a very large .obj File (a lot of faces), this results in low fps ...
I want to set a maximum distance from camera where faces should be rendered.
So far i only tried to use the fog component, which does not what i expected...
Anyone got a idea ?
I believe you can achieve this by a THREE.PerspectiveCamera property called far which determines the camera frustum far plane.
You can check it out in the docs. It can be easily set it like this:
let scene = document.querySelector("a-scene")
scene.camera.far = 3 // default is 1000 afaik
Check it out in this fiddle (move around a bit).
Here i threw it into an aframe component.
Related
I use an equirectangular EXR image to light my scenes. To achieve this, I re-used the code found in this threejs example. This works as expected.
Now, I want users to be able to rotate this map around the vertical axis in real time.
After looking at the code of the loader EquirectangularToCubeGenerator.js, I figured out that I could rotate the boxMesh around the Y-axis using this simple code:
var radRotation = Math.PI;
this.boxMesh.rotateY(radRotation);
That works OK for a set angle however it doesn't work for angles changing in real time. It is too slow as it reloads the texture and goes through the generation process for every new value.
Is there a simple and fast way to change the rotation for an environment map already generated?
Thank you for your help.
I'm learing three.js and I faced a z-fighting problem.
There are two plane object, one is blue and the other is pink.
And I set the positions using the flowing codes:
plane1.position.set(0,0,0.0001);
plane2.position.set(0,0,0);
Is there any solution in three.js to fix all the z-fighting problem in a big scene?
I ask this problem because I'm working on render a BIM(Building Information Model, which is .ifc format) on the web.
And the model itself have so much faces which are so closed to each other. And it cause so much z-fighting problems as you can see:
Is three.js provide this kind of method to solve this problem so that I can handle this z-fighting problem just using a couple of code?
Three.js has given a general solution like this:
var renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });
The demo is provided also here:
https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html
It changes the precision of depth buffer, Which generally could resolve the z-fighting problem in a distance.
At least for the planes on your screenshot, you can solve that problem without switching to the logarithmicDepthBuffer. Try to set depthWrite on the material to false for the planes. Sometimes you also have to override renderOrder for meshes.
There is an example
.depthWrite Whether rendering this material has any effect on the depth buffer. Default is true.
When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
.renderOrder This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently. When this property is set for an instance of Group, all descendants objects will be sorted and rendered together. Sorting is from lowest to highest renderOrder. Default value is 0.
What is your PerspectiveCamera's zNear and zFar set to. Try a smaller range. Like if you currently have 0.1, 100000 use 1, 1000 or something. See this answer
https://stackoverflow.com/a/21106656/128511
Or consider using a different type of depth buffer
I just stumbled across z-fighting using multiple curved planes with front and backside textures placed along the z-axis of the scene. Even though depthWrite would remove the artifacts, I kinda lost the correct visual placements of my objects in space. Flatshading did the trick for me. With enough segments, the light bouncing is perfectly fine and z-fighting is gone.
I've been struggling with an application where I'm trying to set the camera rotation initially so when the scene is loaded, you'll be looking where we want you to look.
The backstory, I'm creating a panorama viewer where the panorama is applied to a mesh with a sphere geometry.
The problem I'm having is I don't seem to be able to set the camera rotation. I've tried multiple attempts, but none have been working. I attempted setting the camera rotation after creating the camera, and I tried applying the target of my orbitcontrols and setting the object rotation in the orbit controls. I haven't had any luck yet with just setting an initial camera rotation.
I'm really hoping at this point that this is due to something minor that I'm over looking.
Here's a source: http://www.freeptools.com/mapster/testing-360s2.php
It shows the camera itself AND the orbit controls object. It also shows what their target is I'm setting, and what they really are. So far I haven't been able to get this to accept anything I give it.
THREE.js OrbitControls take over the camera completely, so you should not use that in conjunction with updating camera rotations.
Instead, OrbitControls has methods that help you do this: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js
orbitControls.rotateLeft( angle );
orbitControls.rotateUp( angle );
In addition, you can move orbitControls.target around (it's a THREE.Vector3) and the camera will just look to that direction.
I am using the version THREE.js57. I want to hide selected face at run time. Is this possible in three.js
Thanks & Regards
Indeed this is possible, you'll want to look into the Raycaster library, here's the high level steps
unproject your mouse click coordinates into the 3D scene.
cast rays into your scene and return an intersected array of collided objects
this intersected object will have the affected face and faceIndex as parameters
on collision turn the face # faceIndex transparency to 0
Have a look at these doc pages:
http://threejs.org/docs/#Reference/Core/Projector
http://threejs.org/docs/#Reference/Core/Raycaster
And this example for a start:
https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes.html
Edit:
Alright, well to then hide the face you can have a peak at this other SO post:
Can I hide faces of a mesh in three.js?
The gist is you have a multimaterial object, the first material is your default, and a second material that's fully opaque. Then when you intersect you set the face to use the second materialIndex. Anyway, the above link should do the job. Off to up vote that response. :)
I am using Three.JS r58 and I would like to resize a CubeGeometry object on the screen.
One approach I tried is, when resizing required, to remove the effected cubes and add a new one with updated dimentions. This process works but it slows down the visualisation dramatically. I would like to know if there is a way to resize a CubeGeometry dynamically using Three.js rather than removing/adding a new one. A sample in jsfiddle is appreciated.
Call .scale.set(x, y, z) on the mesh (see this ticket).
Initially the scale is set to (1, 1, 1) (see the constructor of Object3D, the parent class of Mesh). You will want to increase those values by the percentage scale you require, in the dimensions you require.
In this fiddle I increase the cube in all directions by 50 percent using .scale.set(1.5, 1.5, 1.5).