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

Edit: I just found out they use rive after visiting 2advanced.com for the first time in a few weeks. V3 is now live. Wow! I wonder how mobile design will be handled or are they just going to ignore it? I also left it open on my phone and my phone got super super hot!

Not sure you have to read the rest here but I will leave it:

I just want to comment here. I am an old school junior front end designer from the days of flash and gave up with web design when they killed table layouts and introduced DIV based layouts and as well as killed flashed. Killing table layouts killed bitmap designs and caused me to take 2-4x as long to build a non mobile site. Due to how touchy divs and there position are! Confusing as hell. Though better with flexbox. Which still is not widely supported!

Though with the resurgence of 2advanced.com, I’ve decided to try to take a stab at web design again. I am curious, what types of tools and workflows users are using to animate/build 2advanced types of websites?

Do they build the model in blender and export it threeJS? Also, does blender write animation code for threeJS, or do you have to write your own keyframes in threeJS by hand? If the answer is spline, can it create shocking animations/designs that are powerful, interactive and high resolution like 3DS max+after effects can? Or what do we do for the “After effects” GFX lighting and effects part? Photoshop is so powerful for BMP graphics/space scapes, etc. Can spline integrate some type of high fidelity texture resolutions, easily adjust lighting like Blender can to create a 3D space scape? Also, how hard would it be to make it semi interactive compared to the days of flash? Also, are there handlers for mobile devices in threeJS? Or is it nearly impossible to user interface on Canvas mobile right now? Does spline already accommodate for mobile websites, or would you still have to hard code something to mobile display websites? What are the recommendations here? To create highly dynamic, interactive flash type websites we use to have in the early 2000s? It seems the only option is canvas at the moment, does canvas still abide by the audio issues that a standard web page has? A web page won’t even load music until you click on it now days! Which is highly annoying for flashy websites! Ugh! I wish we never killed flash for “security concerns” fml!

Thanks,
Kyle Scott
Ps, I just miss table based layouts and macro media flash :sob:

It can be done with any math library. Threejs can be used to draw things.

Flash was capable of doing 3D via away3d or stage3d something like that. Its shaders were fun since it wqs all assembly and op codes.