Rules and standards for modeling in Three.js

“I’m having an issue where a model I created in Blender can’t be selected or moved once loaded into my Three.js scene. I suspect this might be due to my model not being created according to the proper guidelines. As a beginner, I’m not very familiar with the rules and standards for modeling in Three.js. Could anyone please guide me through the process?” (2.7 MB)

What do you mean by selected or moved? What controls / code are you using for selecting and moving the model? Three doesn’t handle that for you, it’s just a 3D library that renders stuff - logic you’ll need to add with code.

Tbh there are none - just maybe consider always using .glb or .gltf format. Besides that - you’re free to do pretty much anything (if it loads here - it’ll load and work the same in your project as well.)

There are software specific guidelines - like non-exportable shader nodes in Blender - but they’ll at most cause the model to render a bit weird, not to fail to work entirely.


Hi. Your mesh is one big a skinned mesh. You can animate it like this:

let aminationMixer = null

// Load the model

gltfLoader.load('/models/kuka.glb', (koka) => {

// I moved the model to world center for convenience.

  koka.scene.children[0].position.set(0, 0, 0)
  koka.scene.scale.set(0.75, 0.75, 0.75)

// Set up animation mixer

  aminationMixer = new THREE.AnimationMixer(koka.scene)
  const action = aminationMixer.clipAction(koka.animations[0])


// In your animation loop. Update the animationMixer

1 Like

Sorry for my late reply. When I imported the model into the glTF Viewer, there was a warning: Node with a skinned mesh is not root. Parent transforms will not affect a skinned mesh.

Is it for this reason that I cannot drag the model by clicking on it in the editor
CleanShot 2024-02-28 at 10.14.30

What should I do in Blender to avoid this problem? Thanks for your response.

it’s not necessarily a problem, but means that you’d need to drag the root bone rather than the mesh itself. skinned meshes in glTF are moved only via their bones. the warning will go away if the mesh doesn’t have any parent nodes.


Thank you for your response. This model cannot move normally in my project after adding TransformControls with raycaster. When the model has a skeleton, do we have to select its parent add TransformControls?
The structure of the model in Blender.

It depends on where the skinned mesh’s bones are. If the bones are under the same parent as the mesh, then selecting the parent will work fine. If the bones are somewhere else, selecting a parent won’t help. If the bones are children of the mesh, selecting the mesh is enough.

If this is the only model in your scene, and it works now, then using the parent node should be fine. To support arbitrary glTF skinned meshes, you would need to do something like traversing up from each bone in the mesh.skeleton.bones array until you find the common root node.

1 Like

Hey @Zhi_She , A children was selected. So you can’t move it.

You have to select a parent group to move.

It seems like the centers of parent and child are not match.

I sincerely thank you for solving my problem.