Morph Targets with GLBs

Help & Support
1

Hi there,
Could you add an example to the morph targets of GLTF? I read the api(morph, morphInstance) but couldn’t get it to work.
An simple PlayCanvas project is all we need.

Much appreciated!

2

Do you have an example model that I could use to quickly put together a example?

3

Hi Yaustar,

Sure. Here it is: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free
The morph targets are:
截屏2022-04-14 上午11.51.02
We want to control the weights via script.
We loaded this GLB file via the glb-utils.js which was found in Loading glTF GLBs | Learn PlayCanvas project.

Much appreciated!

4

I’ve created an office hours video for this:

Example project link: https://playcanvas.com/project/912859/overview/f-morph-targets-with-glb

My personal devtools: https://github.com/yaustar/yaustar.github.io/tree/master/playcanvas-devtools

Relevant code:

var CakeEyes = pc.createScript('cakeEyes');
CakeEyes.attributes.add('lEyeWeight', { type: 'number', min: 0, max: 1});
CakeEyes.attributes.add('rEyeWeight', { type: 'number', min: 0, max: 1});

// initialize code called once per entity
CakeEyes.prototype.initialize = function() {
    this.entity.on('glb-loaded', function() {
        this._renderComponent = this.entity.findByName('PM3D_Sphere3D2_1').render;
    }, this);
};

// update code called every frame
CakeEyes.prototype.update = function(dt) {
    if (this._renderComponent) {
        /** @type {pc.MorphInstance} */
        var morphInstance = this._renderComponent.meshInstances[0].morphInstance;
        morphInstance.setWeight(0, this.lEyeWeight); 
        morphInstance.setWeight(1, this.rEyeWeight);
    }
};
4 Likes
5

Hi Yaustar, thank you so much! I will take a look!

6

Hi Yaustar,

It works beautifully. Thank you!

1 Like
7

For feedback to me, did you find the video useful? What could be improved?

1 Like
8

The video is perfect！ I would recommend it to everyone! Thanks yaustar!

1 Like