Hello everyone! I making redactor based on Three.js. I have a lot of different types of meshes (cubes, planes, circles and etc.). I’m trying to make tool wich allow change parameters of geometry (width, height, radius and others). In Stack Overflow and here (in this forum) I found different methods to do that, but I don’t know wich to use.
Let me show.
First method is to use scale:
let geometry = new THREE.PlaneGeometry( 30, 30 );
let material = new THREE.MeshLambertMaterial( {color: "#0087FF", side: THREE.DoubleSide} );
let plane = new THREE.Mesh( geometry, material);
scene.add(plane) ;
plane.scale(2, 1, 1);
This method is not very convenient, since it is easier to navigate when directly accessing parameters, through length and width, for example.
Second method is to recreate geometry:
plane.geometry.dispose();
plane.geometry = new THREE.PlaneGeometry( 40, 40 );
With this approach, it is already easier to work with geometry, but in the documentation I read that this operation is very expensive to calculate for use
As a result, which of these two methods is better used and what problems will have to be faced in the future? Are there other ways to change geometry parameters?
Changing parameters used to generate a geometry requires recreating the geometry and uploading it to the GPU. That will always be more expensive than changing the scale/position/rotation associated with the geometry, especially when the geometry has many vertices. For very small meshes it might not matter so much, but I still wouldn’t do it 60 times per second or anything like that.
I’d suggest creating a geometry with a known unit size of 1, and then just scaling it to the size you need with plane.scale.set(2, 1, 1) or similar.
Thank you for your answer. i will try to use scale if you insist on it. It’s a pity that I have to edit a lot of code, since everywhere I relied directly on geometry parameters
Here is a small comparison, based on my personal experience.
No
Method
Decsription
1
Recreating the geometry
This is the slowest method, uses a lot of resources. Must be applied only as a last option of none of the rest methods are possible.
2
Manually updating the geometry
Also slow, but not as in (1). The programmer must write loops and modify data in the geometry. Used predominantly for custom shapes and rarely used in animation cycles unless objects are deformed non-uniformly.
3
Updating the geometry with geometry’s translate, scale, rotate methods
Also slow, because it is done in the CPU. Often used when this change is done once, outside the animation loop.
4
Updating the mesh with mesh’s position, scale, rotation properties
The fastest approach as only a matrix is calculated in JavaScript, the actual transformation is done in the GPU. This is the preferred method for modification. Additionally, similar objects may share geometries (e.g. all cuboids can use one single box geometry).
5
Morphing between two shapes
Also fast to do in animation cycle, but requires some efforts to build the base geometries used for morphing. Used for custom 3D transitions that are hard or slow to calculate in real-time.
As for geometry’s parameters property – they just hold the initial parameters of the geometry. When you modify the geometry via methods (2)-(5), this property is not updated.
My advice is to use approach (4), unless there is a compelling reason to use another approach.
The bottom line is that there is no right approach. There are many approaches with pros and cons and you must pick the best one for your specific situation (and level of Three.js skills).
Incredible, thank you for the answer. This is one of the best and most detailed answers to this question. Today I have already spent all day rebuilding the editor for your 4 method
luckily I found this topic and detailed explanations; half a day I couldn’t understand why …geometry.parameters.width&heigt=… dynamically doesn’t change PlaneGeometry; @PavelBoytchev thank you very much!
thank you very much!