Morph Target in Model Viewer

[Dovatech]

Hello , is it possiable to use MorphTarget Method from Three.js in Model Viewer ? https://threejs.org/examples/webgl_morphtargets

• model-viewer: vX.X.X

Browser Affected

• Chrome, version: xx.x.xxxx.xx
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

AR

• WebXR
• SceneViewer
• QuickLook

[ghost]

MorphTarget animations are supported, I don't understand exactly what functionality you are looking for, do you want to procedurally apply two morph targets?

…

On Thu, Jun 17, 2021 at 1:34 AM Dovatech ***@***.***> wrote: Hello , is it possiable to use MorphTarget Method form Three.js in Model Viewer ? https://threejs.org/examples/webgl_morphtargets - model-viewer: vX.X.X Browser Affected - [ x ] Chrome, version: xx.x.xxxx.xx - [ x ] Edge - [ x ] Firefox - IE - Safari OS - Android - iOS - Linux - MacOS - [ x ] Windows AR - [ x ] WebXR - SceneViewer - QuickLook — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2484>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZY3MRXYML7G4YSFO2JFJLTTGXSDANCNFSM463FEKZA> .

[Dovatech]

Yes. I would like to change the 3D object using Shape Keys, as in the example ( https://threejs.org/examples/webgl_morphtargets ).

[ghost]

It looks like you need access to mesh.morphTargetInfluences ( https://threejs.org/docs/#api/en/objects/Mesh.morphTargetInfluences). This is not exposed in ModelViewer, however, I'm in the process of exposing several other features in the scene, we can take a look at this one too.

…

On Thu, Jun 17, 2021 at 10:58 AM Dovatech ***@***.***> wrote: Поддерживаются анимации MorphTarget, я точно не понимаю, какие функции вам нужны, вы хотите процедурно применить две цели морфинга? … <#m_247695466975566655_> В четверг, 17 июня 2021 г., в 01:34 Dovatech *@*.***> написал: Здравствуйте, возможно ли использовать форму метода MorphTarget Three.js в Model Viewer? https://threejs.org/examples/webgl_morphtargets - просмотрщик моделей: vX.XX Затронут браузер - [x] Chrome, версия: xx.x.xxxx.xx - [x] Edge - [x] Firefox - IE - Safari ОС - Android - iOS - Linux - MacOS - [x] Windows AR - [x] WebXR - SceneViewer - QuickLook - Вы получаете это, потому что подписаны на эту ветку. Ответьте на это письмо напрямую, просмотрите его на GitHub < # 2484 <#2484> > или откажитесь от подписки < https://github.com/notifications/unsubscribe-auth/ABZY3MRXYML7G4YSFO2JFJLTTGXSDANCNFSM463FEKZA >. Yes. I would like to change the 3D object using Shape Keys, as in the example ( https://threejs.org/examples/webgl_morphtargets ). — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2484 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZY3MXDRKRP2ZEIBJQA6NLTTIZWDANCNFSM463FEKZA> .

[Dovatech]

Yes. This is exactly what I need. It would be great if this could be applied in Model Viewer. 🙏

[elalish]

Can you give us some details of your use case? You can select a given morph target animation currently. You can also hack down into our three.js layer and have full control of animation mixers, but I'm not sure we want to expose that level of complexity in our high-level API.

[Dovatech]

I have a wardrobe model with different doors and drawers. The user must be able to open and close them. Animation is not very suitable for me here, because the user can open several cells at the same time, and several animations cannot work at the same time.

[elalish]

Okay, thanks. The best I can offer at the moment is to animate an open one closing before animating the next one to open. We'll consider what kind of API might be a simple approach for the more general problem.

[adam-code-labx]

Hi @elalish
We have recently starting using model-viewer for our avatar configurator project and this has really helped us so far with our project.
Especially with the built in AR implementation 👍

We are facing the same issue with not be able to use shape keys with our avatars.
It would be great if we were able to expose morphTargetInfluences for the shape keys.

Do you guys have any ETA for this feature?
Alternatively if you can point me in the right direction on how to expose the API to this method I would be more than happy once we have a working solution our side to submit a PR.
Thanks.

[adam-code-labx]

Not sure why but having issues setting this up with codesandbox very strange invalid json for my GLB so decided to create quick loom video as this is working under my local env. https://www.loom.com/share/7aa21ba1310843d59571ea93a95988f0

This is an extremely basic example using 2 morph sliders.
I believe we will only need access to morphTargetDictionary & morphTargetInfluences
From what I can see here, this should not require extending the animation API just exposing Object3D & Mesh should be enough?

Please advice.
Thanks.

[elalish]

Exposing Object3D and Mesh will expose a large fraction of the three.js API, which is not our intention here. Keep in mind, you can always hack your way down to our $scene private member if you want three's full API, we just don't promise anything about breaking changes down there.

Our API works at the level of glTF's structure, so I think animation is the right way to think of this (each slider is a currentTime of its referenced animation name). Still, this could easily snowball into a large API surface, so we should tread carefully.

[adam-code-labx]

Thanks @elalish
I have managed to access the three js scene via the getOwnPropertySymbols function.

For example I can now retrieve all the morphTargets
Perhaps this is a hack, however I can imagine via the API we can expose the threeScene only if required for advanced use.
something like modelViewer.threeScene

This is now working from our side using the following allows us to get our morphTargets and from there we are able to update the morphTargetInfluences values.

const model = modelViewer.model;
const threeScene = model[Object.getOwnPropertySymbols(model)[7]];
threeScene.traverse((child) => {
    if (child.isMesh) {
        child.material.metalness = 0;
        child.material.vertexColors = false;

        if (child.morphTargetDictionary) {
            for (const key in child.morphTargetDictionary) {
                const index = child.morphTargetDictionary[key];
                if (Array.isArray(morphTargets[key])) {
                    morphTargets[key].push({index, child});
                } else {
                    morphTargets[key] = [];
                    morphTargets[key].push({index, child});
                }
            }
        }
    }
});

console.info(morphTargets);

Thanks for all your help let me know if you would like me to create a small PR to expose threeScene for advanced use?

[elalish]

Thanks, but no thanks. I don't intend to mark that scene as part of our public API, as I have no way to ensure there aren't breaking changes there. Advanced users are always welcome to hack into it, but keeping it behind a symbol at least reminds them that they'll need to do more testing on each version update.

[adam-code-labx]

Ok I understand thanks anyway.