How to clone a VRM model?

[mattrossman]

In Three.js you can reuse glTF models by cloning them prior to adding them to the scene. Adding multiple copies of the same gltf.scene instance can otherwise lead to unexpected behavior.

For simple models this can be accomplished via gltf.scene.clone(). For models with skinned meshes, more care must be taken to clone internal objects. In these cases, you may clone the model using SkeletonUtils from three/examples:

const copy = SkeletonUtils.clone(gltf.scene)
scene.add(copy)

See discussion: https://discourse.threejs.org/t/how-to-clone-a-model-thats-loaded-with-gltfloader/23723/8

---

As VRM is an extension of glTF, I expect to be able to clone VRM models in a similar way as regular glTF models. However, while I can clone the gltf.scene with SkeletonUtils.clone() as shown above, this doesn't clone the VRM object associated with it, so I lose out on VRM functionality.

Example code: https://jsfiddle.net/mattrossman/satvh5kr/3/

As you can see in the example, I can clone and reposition the model, but I don't have a VRM object for the copy.

Is there a suggested way to fully clone VRM models? I see a VRMHumanoid.clone() method in the API reference, but I'm not sure if/how it would be used here.

[0b5vr]

Cloning the entire VRM! I have never thought of it.
The current design of three-vrm definitely doesn't imagine that.

What is your purpose here?

[mattrossman]

My purpose is using this library with React Three Fiber. The standard behavior for loaders in React Three Fiber is to cache assets in memory to improve performance: https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader

This means that if you add the same model multiple times in a scene and/or plan to modify instances of the model at runtime, you need to clone it prior to use (see issue thread). Note that this pattern is not unique to React though, the caching / cloning use case appears in vanilla Three as well (discussion 1, discussion 2)

The React Three Fiber community has built a tool gltfjsx to assist with reusing glTF assets, but that only works if you know your model's structure ahead of time. For arbitrary assets loaded at runtime you still need to do a deep clone for reuse.

Currently this library is structured as a GLTFLoader plugin which I register in useGLTF like so:

const gltf = useGLTF('/model.vrm', undefined, undefined, (loader) => {
  loader.register(parser => new VRMLoaderPlugin(parser, { autoUpdateHumanBones: true }))
})

This means that any time I load '/model.vrm' in my scene, I get the same GLTF instance with the same VRM instance, which causes hard-to-debug problems once I start manipulating VRM bones and retargeting animations.

Typically I would clone a glTF character asset with SkeletonUtils like so:

/** @type {THREE.Object3D} */
const sceneCopy = useMemo(() => SkeletonUtils.clone(gltf.scene), [gltf.scene])

But as mentioned this doesn't give me access to a corresponding VRM object, just the plain skinned meshes and bones.

What I want is is something like:

const vrm = gltf.userData.vrm

/** @type {VRM} */
const vrmCopy = useMemo(() => VRMUtils.clone(vrm), [vrm])

Then I could safely add the cloned vrmCopy.scene to my scene and manipulate it with vrmCopy.humanoid

[0b5vr]

I see! That sounds like a legit motivation.
I'm still determining when we can work on this; I will discuss it with the team.

(I'm sorry for the late response 🙇)

[Samsy]

+1

[a-saq]

+1

[gwendall]

+1

[Ending2015a]

Any updates?

[saori-eth]

+1