Create a 3D modeling app with ThreeJS

Hi all, I have a questrion. I am trying to create a FEM application to be used in the cloud. For my initial project, I am using CROW to create two servers, one would be a mesher and the other would be a solver. But I wan’t also to create a frontend, web based, where you can add or create 3D models. Now, I know I can import 3D models into ThreeJS based apps, but can ThreeJS be used to create a 3D modeling application, meaning, an application that can be used to create new models from scratch? Or do I need to use webgl raw? I am ok with that, since I have used opengl in some of my apps. Maybe, if I can not use ThreeJS for such a modeling app, I could still use it partialy, to cover some aspects of the project? Do you guys have some advice?

Yeah threejs is perfect for making a modeller. I’d say it’s literally your best choice.

Here’s an example to mine for ideas:
https://threejs.org/editor/

source:

1 Like

So, I can add a box or something, but how to change it, how to model it?

You have to write that part. :smiley: You can change position/rotation/scale/material in that editor. But it doesn’t support vertex level editing (if that’s what you mean).

Well, yes. I want to be able to create models from scratch. Ok, you don’t have it implemented here but as you say, it can be done with ThreeJS?

Yeah. Threejs is a scene graph on top of webGL. All 3d modellers use a scene graph concept. (A scene node with children, and children with children etc.) Meshes have geometry which contain vertices… pretty much maps to software like Blender or whatever.
I will say though, It’s going to be very challenging to write a useful 3d modeller for you. Threejs gets you about 2/3rds of the way there. The rest is gonna take a lotta code and headbanging. :smiley:

I guess. I thought to go with threejs and raw webgl and just try and use as much as I can from what threejs can give me. But to sumarize, I can not create a modeler with just threejs…

https://spline.design is using threejs. you can do anything but writing a modeller is probably the hardest task you could have picked. i’m guessing you are a mathematician, you must be, it wouldn’t matter to you then if you’re using three or webgl though three will surely help when it comes to high level interaction and manipulation.

1 Like

You can create geometries of any complexity with three.js. It is a question of using the mathematical-geometric relationships correctly.

You can find some examples to demonstrate this at Collection of examples from discourse.threejs.org

Some shapes
Addon. Produces almost infinite many time-varying geometries with functions

Addon to create special / extended geometries
Multi Form Geometry

BumblebeeMara ( see [solved] Problem porting SkinnedMesh from old Geometry to BufferGeometry - #2 by hofk)

Pino

and more …

1 Like

No that’s incorrect. You absolutely can create a full 3d modeller in threejs. You just have to know what you’re doing… .And I’m guessing that being sorta new at this, that may be a huge challenge, but also a really good/hard way to learn.

If your question is “Is there an opensource 3d modeller written in threejs that I can copy/make my own from” the answer is… probably not, unless its something really specific.

There are 3d modellers written in threejs out there.

1 Like

I never heard of it, looks nice, so it is possible to do this using just threjs. I was thinking also more in the direction of serious design abilities so for example to create a complex 3d model of a ship based on the factory design etc, and then to be able to mesh it the way I want. But I think this is to much work, I also need to create a solver and a mesher, so I think that for now I will stickto developing these two, and develp the modeler and GUI as I need them, just for testing purposes.

So basicaly you can produce anything…ok. I was doing some work with opengl so thought that I might skip threejs and go straight to web gl
But threejs mght be a better choice in the end, since you can do much with it…I wonder If I can also use raw webgl and integrate this with threejs, so to have more flexibility.

You can find a very special editor for a specific problem here: Construction of frames with contour/profile

A ship’s hull is very similar to a fish.

A fish of splines
Curved2Geometry - a twofold curved geometry

see also PlaneToFish

With three.js you can easily integrate shaders,
elementary example Morph box sphere geometry (+shader)

and from shadertoy, see Little Shader Book ( :uk: a bit more complicated … )

@prisoner849 is an absolute expert in the use of shaders, check out https://codepen.io/prisoner849/ .

Good luck to you. :slightly_smiling_face:

1 Like