Can I draw 3D characters in three.js?

I am interested in doing 3D animations. As animation options they can be interactive or not interactive.

Questions:

Is Three.js any similar to Blender?

Can I create characters in Three.js? Or do I need to create the characters somewhere else and then bring them to Tree.js to animate them?

Are there any video references on where to learn Three.js and make all sort of drawings?

Yeah you can make animated characters in blender, export them as GLTF and import into threejs for playback.

You want to stick to skinned meshes, and/or morph targets. Other things like IK and such won’t export.

Go to the threejs main website for more info: three.js docs

1 Like

Hmmm…

So I am trying to find out how much I can do with Three.js by it self.

I did hear before you can bring characters from Blender into Three.js, but why not do the drawing in Three.js?

Do I have to learn how to draw in Blender? and then animate in Three.js? How does it work exactly?

I do not know anything from Blender or Three.js…

I like the idea of Three.js hosting it on the web, plus I have experience with JavaScript, CSS, html and Next.js

The drawings I want are some interactive, and some don’t need to be interactive.

For non-interactive animations I was thinking of learning Blender, but if I can do do it all in Three.js, then I don’t have to dig into Blender.

Blender is a 3D editor, one of the best. Three.js is a 3D JavaScript library, top-notch. To draw an analogy, they’re like Photoshop and the HTML canvas. While you can edit images programmatically on a canvas, it can be inefficient and may never achieve the polish Photoshop provides.

The best workflow combines both: use Blender for what it excels at, 3D modeling, animations… And use Three.js for displaying and interacting with the imported models. You can create multiple animations with blender, and trigger them with three.js.

Alternatively, if you’re more comfortable with Three.js and the animations are simple, you can create them there instead. It really depends on the complexity of your models and animations, so it’s up to you to choose the approach that works best for your needs.

And here’s an interesting discussion on the topic:

You can throw some boxes and spheres together https://codepen.io/Yakudoo/pen/YXxmYR Or if you’re a rare math genius you can actually draw with shaders iq - Shadertoy BETA

Either way, you wouldn’t normally create models in Threejs. That is what Blender is for and you should absolutely learn it. If you only know Threejs but can’t model your expression is severely limited, it’s like you have a canvas but no brushes and no paint.

PS

Get this x.com it’s 50% off atm. That is the best Threejs course on the market and it contains a blender chapter. You will create this model and bring it into Threejs https://codesandbox.io/p/sandbox/ni6v4

No.

Yes.

However, in Three.js characters must be created via program code, not via drawing. For example, Mannequin.js uses a Three.js-made character, no Blender used at all. Here is a demo:

image

3 Likes

No.

You want to create 3D assets in programs like 3ds max, maya, Houdini, blender etc. You can create static renderings of them, you can create animation, or you can export them to a file which can then be used in an engine. Three is not a (game) engine per se, since it can do whole bunch of other things, but lacks a lot of stuff that something like unreal has. But for sure, it can do stuff with 3D assets.

You could use threes math, threes render, and create something akin to blender or 3ds max, but that is… not a task for a single person.

Ahh! This is rad :+1:

My best is just a hand :sweat_smile:


Demo: https://codepen.io/prisoner849/full/YzBBEMG

2 Likes

Simpler shapes can be created and animated with three.js.

Something like that can be done, but it is not entirely trivial:

see hofk (Klaus Hoffmeister) · GitHub


From the Collection of examples from discourse.threejs.org

BumblebeeMara

Pino
CustomCylinderAndKnee
raycaster - drag and drop

ComputeNormalsInVertexShader

DynamicTubeGeometryCaps
MorphBoxSphere

RobotSimulation


With loaded models
CarRacing
MovementOnCurve

1 Like

One use case is to “block in” a scene. Setup on a mocap plugin. You get Spiderverse VFX if you composite the sequence(?) in StableDiffusion. Back up the JSONP!

Any progress,
Prinsck8s Pea