I have been tasked with making a runtime editor that can resize the object in the scene. The object I am talking about is the large frame. We want to make that resizable but I have not enough knowledge about three.js to know if I can do runtime manipulation while keeping somewhat decent performance. I also couldnt really find anything like this in the examples…
Of course scaling the main structure would also include scaling the underlying (wall panels) but I feel like I am in a bit over my head. I have done procedural mesh generation, but I legit can’t think this would run at a decent speed in the web… If anyone has done any runtime mesh manipulation (actually moving some vertices) that would be really helpful.
tl;dr: I know how procedural generation works (in Unity/UE4) but am struggling to get started on it with three.js
With such a simple object there is no worries to have about being able to do it at runtime.
If you are new to three.js, you will find it much easier to use the Geometry class instead of the BufferGeometry that you can see in most examples. This class has a ‘vertices’ property containing the vectors of your geometry. If you update one these vectors, you must then set geometry.verticesNeedUpdate = true, for the changes to apply. That’s not hard with such simple shapes, have a try first with a basic face, then apply what you learned to your project.
The Geometry class is less performent than BufferGeometry, but your scene looks small, so it should not be a big issue.
BufferGeometry is recommended for large or serious projects.
BufferGeometry is taking over more and more. Luckily, it is (and I guess will for the foreseeable future) possible to do new BufferGeometry().fromGeometry(geometry);.
@Torben_Van_Assche Are you expected to add and remove planks according to the frame size? If so, are you allowed to remake the planks in procedural geoemtry? If yes, will your team, encouraged by your wonderful results, expect you to just as easily remake and update other details?
If you only need to scale, without regard to relative dimensions and plank count, you can modify the vector object.scale (which works instantly by modifying only a few transforms and no geometry).
At the very least, you need access to the full 3D model. If you are lucky, it is already structured with an object hierarchy where each plank/bar is a separate object. If it is not, I think you must demand (or make from the source) a version which is. Because there is no way you (or anyone) can be productive if you have to manually split by vertex something which has already been merged. Especially from three.js.
Yes, you need to be able to say “Here I want K planks scaled to dimensions LxBxH, spaced at intervals of D or evenly distributed along frame length L_F”. To say that to your computer.
I’ve been trying this out now, and it seems to work. Generating the geometry procedurally does somehow strain my rendering… I am using about 80% of my GPU while rendering this scene… Is this normal for threejs to use that many resources? I will make a separate topic to discuss this one because its off topic, this issue in itself is resolved.
Just make sure you reuse geometries as much as you can. There are also tricks like instancing, which draw multiple copies of a geometry in one GPU call.
Appearantly I drew the wrong conclusion, I am using about the same amount of GPU when nothing is being rendered… Also, if I were to do instancing wouldn’t that mess with my need for runtime manipulation?
I would say no, for simple geometry like this. If you share your code here, we may be able to give you some pointers. Otherwise, profile your code using the browser dev tools and see what the bottleneck is.
Also, if you are using Geometry and then converting to BufferGeometry you might gain a lot of performance by creating BufferGeometry directly.
Here is my project, feel free to take a look. Note that it is written in typescript with angular but that shouldn’t be a problem.
Edit: Also for the application of the project, there will be controls set up on the side of the threejs window with some UI to apply various transformations to the object in the scene. All the sides of the structure can be configured with meshes and those can even be personalized. Resizing and moving parts are also included in this project (3d-editor more or less, draw a gizmo and move/scale selected part)
Edit 2: I added the transform controls, and that seems to have made things far worse. I am probably doing some things horribly wrong… Hoping someone can shine some light on my situation
