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).
Related
I am working on a configurator in Threejs for which I have a scene in which I load a model gltf, it has various elemenets in it like a real scene. For example inside office scene where we have a table, and on top of table there is notepad and pens. Apart from table there are some chairs and other material as well.
Now I want to give user a feature to change length, breadth, and height of any table or some other materials.
For this I have tried changing:
scaling of the material:
textureMaterials.scale.x = 1.5;
textureMaterials.scale.z = 1.5;
But the issue is that by changing the scale the position of the material also gets changed, and suppose even if I set the position of the material and show it at right position then the stuff which is placed on top of that table remains at its original position.
So there are a lot of things related.
Please let me know what is the good way to do this?
Thanks
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.
I am working on a CAD type system using threejs. I have thin objects next to other objects (think thin 2mm metal sheeting fixed to posts on a building measured in metres). When I am zoomed in it all looks fine. The objects do not intersect at all. As I zoom out the objects get smaller and I end up with cases where the post object 'glimmers' (sort of shows through) the metal sheet object as I rotate it around.
I understand it's the small numbers I am working with that is causing this effect. However, is there a way to set a priority such that one object (the metal sheeting) is more important than another object (post) so it doesn't get that sort of effect?
To answer the question from the title, it is possible to prioritize drawing orders with.
myMesh.renderOrder = 5
myOtherMesh.renderOrder = 7
It is then possible to apply different depth effects, turn off the test etc.
Another way is to group objects with, layers. Set the appropriate layer mask on the camera and then render (multiple times).
myMesh.layers.set(5)
camera.layers.set(1)
renderer.render(scene,camera)
camera.layers.set(5)
renderer.render(scene,camera)
This is called z-fighting, where two fragments are so close in the given depth space that their z-values are within the margin of error that their true depths might get inverted.
The easiest way to resolve this is to reduce the scale of your depth buffer. This is controlled by the near and far properties on your camera. You'll need to play with the values to determine what works best for your senario. If you can minimize the distance between the planes, you'll have better luck avoiding z-fighting.
For example, if (as a loose estimate) the bounding sphere of your entire model has a diameter of 100, then the distance between near and far need only be 100. However, their values are set as the distance into camera space. So as you zoom out, and your camera moves further away, you should adjust the values to maintain the minimum distance between them. If your camera is at z = 100, then set near = 50 and far = 150. When you pull your camera back to z = 250, then update near = 200 and far = 300.
Another option is to use the WebGLRenderer.logarithmicDepthBuffer option. (example)
Edit: There is one other cause: the faces of the shapes are actually co-planar. If two triangles are occupying the same space, then you're all but guaranteeing z-fighting.
The simple solution is to move one of the components such that the faces are no longer co-planar. You could also potentially apply a polygonOffset to the sheet metal material, but your use-case doesn't sound like that is appropriate.
I have 10K cubes and the draw calls is very high, well.. 10K
You can see this here:
http://thegrook.com/three.js/merge1.html
If I combine all cubes to a single mesh, the draw calls is down to one.
You can see this here:
http://thegrook.com/three.js/merge2.html
But in the first example, I change the scaling of each cube based on the distance from the camera,
So no matter what is the zoom - the cube staying the same size on screen, and this give me the effect that I need:
The closer the camera is - the lower the density between the cubes
In the second example - this doesn't work, because the scaling affect the whole mesh and not per cube
Any idea how to achieve the density effect with less draw calls?
Thanks.
* Edited 1 *
I managed to solve this with instancing and render 250K objects and stay on 60fps
When I zooming out - the objects are overlapping - that's ok for my case.
But what's wrong is all the textures are flickering a lot..
Seem like there are no fixed drawing order for all the instancing
There is a way to fix this?
Here is an example:
http://thegrook.com/three.js/instancing3.html
* just zoom out with the mouse wheel
* Edited 2 *
Looks like If I disabling the depthWrite on the material - the problem is solved
Is this the right solution?
I am using a very similar project to this example: https://developers.arcgis.com/javascript/latest/sample-code/scene-external-renderer-threejs/index.html
This application is displaying a 3D Object (ISS). If you zoom out, the object gets smaller (logical), however I want to have a minimum size for this object. I always want this object to take at least 10 % of the screen width.
How can I achieve this goal?
I don't want to restrict the camera movement by any metods, but I want to enlarge the object itself.
To get this working you need:
Compute bounding Spehre on a geometry of your object using boundingSphere (Geometry)
Project bounding spere (example of projection: Converting World coordinates to Screen coordinates in Three.js using Projection)
Check if pojected object width is not less than 10% of window width.