feat(packages/view): support to render MorphTargets #1427
Conversation
| const meshValue = this.mesh.value as Group; | ||
|
|
||
| if (meshValue && !(this.value as Mesh).morphTargetInfluences) { | ||
| (this.value as Mesh).morphTargetInfluences = (meshValue.children?.[0] as Mesh)?.morphTargetInfluences; | ||
| } |
There was a problem hiding this comment.
I'd expect this.value to have either type THREE.Object3D or THREE.Bone here, depending on context — any THREE.Mesh types would be nested two levels down. Are you sure this part works as it should?
A unit test in NodeSubject.test.ts would be very welcome, though not required. :)
There was a problem hiding this comment.
@donmccurdy The thing is, we need the morphTargetInfluences on the node object for the Animation (with Weights target path) to work properly. When THREE.JS applies the AnimationClip, it searches for the morphTargetInfluences property on that particular node that has the animation. I don't know if there's any other way to do this, but I've tested it with my current project, and it works properly. I've also added a test case in the NodeSubject.test.ts.
| // Convert geometry attributes | ||
| for (const accessor of def.listAttributes()) { | ||
| const array = accessor.getArray() as TypedArray; | ||
| geometry.setAttribute(accessor.getName(), new BufferAttribute(array, accessor.getElementSize())); | ||
| } | ||
|
|
||
| // Convert indices if available | ||
| if (def.getIndices()) { | ||
| const accessor = def.getIndices() as AccessorDef; | ||
| const array = accessor.getArray() as TypedArray; | ||
| geometry.setIndex(new BufferAttribute(array, 1)); | ||
| } |
There was a problem hiding this comment.
Attributes and indices are set up below, with a subscription callback to update them when definitions change — is it required to set them up a second time here?
There was a problem hiding this comment.
@donmccurdy You're right, there is no need to set them up a second time. I didn't look at the subscription callback; I've removed the code for Attributes and indices. Thanks.
| // Convert morph targets | ||
| const targets = def.listTargets(); | ||
| if (targets.length > 0) { | ||
| geometry.morphAttributes = {}; | ||
|
|
||
| for (const [index, target] of targets.entries()) { | ||
| for (const semantic of target.listSemantics()) { | ||
| const attriName = semantic.toLowerCase(); | ||
| if (!geometry.morphAttributes[attriName]) { | ||
| geometry.morphAttributes[attriName] = []; | ||
| } | ||
| const accessor = target.getAttribute(semantic) as AccessorDef; | ||
| const array = accessor.getArray() as TypedArray; | ||
| geometry.morphAttributes[attriName][index] = new BufferAttribute(array, accessor.getElementSize()); | ||
| } | ||
| } | ||
|
|
||
| geometry.morphTargetsRelative = true; | ||
| } |
There was a problem hiding this comment.
At some point, it will probably be necessary to create a PrimitiveTargetSubject class that handles listening for changes to each morph target definition, and emits events so that the BufferGeometry can be updated when things change.
It's OK with me if the morph targets are readonly (just one-time setup, no live updates) for now though. Perhaps this code for adding targets to the geometry could just be moved into PrimitiveSubject.createValue, or a helper function, to keep the constructor concise?
There was a problem hiding this comment.
@donmccurdy For now, I've moved the code to PrimitiveSubject.createValue.
|
@donmccurdy @prince7688 Any updates on this? |
This will add support for Morph Targets in the @gltf-transform/view package, enabling animations for the weights channel target path.