[SOLVED] Player Texture problem

Help & Support
, , ,
1

Hello everyone

i am facing a problem in character change . Currently i am using READY PLAYER ME for character customization . But the characters are not updating the textures and showing to download the model

project link

https://playcanvas.com/project/956478/overview/backupfromt

below is the problem image

Please provide the solution for this

image
image1780×868 88.4 KB

2

Hi @Tr_andreson,

I think you need to pass the ?frameApi at your iframe url, that will enable postMessage subscribing according to the Ready Player Me docs:

iframe.src = 'https://streamyhouse.readyplayer.me/avatar?frameApi';
3

this is my script for character change as you have told me but nothing seems to work

var CustomAvatarLoader = pc.createScript('customAvatarLoader');

CustomAvatarLoader.attributes.add('css', { type: 'asset', assetType: 'css', title: 'CSS Asset' });

CustomAvatarLoader.attributes.add('html', { type: 'asset', assetType: 'html', title: 'HTML Asset' });

CustomAvatarLoader.attributes.add("LoadAvatarBtn", { type: "entity" });

CustomAvatarLoader.attributes.add("LoadingScreen", { type: "entity" });

CustomAvatarLoader.instance = null;

window.addEventListener("message", function (event) {

    if (event.origin === "iframe.src = 'https://streamyhouse.readyplayer.me/avatar?frameApi';") {

        CustomAvatarLoader.instance.LoadNewAvatar(event.data);

    }

}, false);

// initialize code called once per entity

CustomAvatarLoader.prototype.initialize = function () {

    CustomAvatarLoader.instance = this;

    this.GlbURL = null;

    this.iframeWidth = window.innerWidth;

    this.iframeHeight = window.innerHeight;

    this.app.on("BtnManager:LoadAvatarButtonClick", this.customAvatarSelection.bind(this));

    this.on('destroy', function () {

        this.app.off("BtnManager:LoadAvatarButtonClick", this.customAvatarSelection.bind(this));

    }.bind(this));

    this.setupIframe();

    this.isMobile = false;

    if (pc.platform.mobile || pc.platform.android || pc.platform.ios) { // Mobile

        let avatarIframe = document.getElementById("avatarIframe");

        avatarIframe.style.width = this.iframeWidth + "px";

        avatarIframe.style.height = this.iframeHeight + "px";

        avatarIframe.style.border = "none";

        this.isMobile = true;

    } else { // Desktop

        let avatarIframe = document.getElementById("avatarIframe");

        avatarIframe.style.width = "900px";

        avatarIframe.style.height = "650px";

        avatarIframe.style.border = "none";

        this.isMobile = false;

    }

};

CustomAvatarLoader.prototype.LoadNewAvatar = function (data) {

    let iframe = document.getElementById('avatarIframe');

    let avatarDiv = document.getElementById('avatarDiv');

    iframe.style.display = "none";

    avatarDiv.style.display = "none";

    this.loadGLBModelFromURL(data);

};

CustomAvatarLoader.prototype.loadGLBModelFromURL = function (modelURL) {

    var self = this;

    this.GlbURL = modelURL;

    this.app.fire("LoadingMenu:SetLoading", true, "Loading Avatar..");

    let name = "model_" + (Math.floor(Math.random() * 10000));

    let cacheURL = modelURL + "?cacheBuster=" + (Math.floor(Math.random() * 10000));

    this.LoadingScreen.enabled = true;

    utils.loadGlbContainerFromUrl(cacheURL, null, name, function (err, asset) {

        if (asset.resources[0].model)

            // this.app.root.findByName("ModelTPC").model.asset = asset.resources[0].model.id;

            this.app.root.findByName("ModelTPC").model.asset =asset.resources[0].model.id;

        else {

            console.log(asset.resources);

        }

        this.LoadAvatarBtn.enabled = true;

        this.LoadingScreen.enabled = false;

    }.bind(this));

};

CustomAvatarLoader.prototype.setupIframe = function () {

    // create STYLE element

    var style = document.createElement('style');

    // append to head

    document.head.appendChild(style);

    style.innerHTML = this.css.resource || '';

    // Add the HTML

    this.div = document.createElement('div');

    this.div.id = "avatarDiv";

    this.div.classList.add('avatarContrainer');

    this.div.innerHTML = this.html.resource || '';

    this.div.style.display = "none";

    // append to body

    // can be appended somewhere else

    // it is recommended to have some container element

    // to prevent iOS problems of overfloating elements off the screen

    var canvas = document.getElementById("application-canvas");

    // canvas.style.pointerEvents = "none";

    //document.body.insertBefore(this.div,canvas);

    document.body.appendChild(this.div);

};

CustomAvatarLoader.prototype.customAvatarSelection = function () {

    this.LoadAvatarBtn.enabled = false;

    let iframe = document.getElementById('avatarIframe');

    let avatarDiv = document.getElementById('avatarDiv');

    iframe.src = 'https://streamyhouse.readyplayer.me/avatar'; // Change this to your custom subdomain

    // iframe.src = 'https://streamyhouse.readyplayer.me/avatar?frameApi';

    iframe.style.display = "block";

    avatarDiv.style.display = "block";

};

// update code called every frame

CustomAvatarLoader.prototype.update = function (dt) {

};
4

Solved the issue Use This Script AND MAKE SURE TO CHANGE YOUR MODEL NAME FROM THE MODEL NAME YOU HAVE IN LINE 119

var CustomAvatarLoader = pc.createScript('customAvatarLoader');

CustomAvatarLoader.attributes.add('css', { type: 'asset', assetType: 'css', title: 'CSS Asset' });
CustomAvatarLoader.attributes.add('html', { type: 'asset', assetType: 'html', title: 'HTML Asset' });
CustomAvatarLoader.attributes.add("LoadAvatarBtn", { type: "entity" });
CustomAvatarLoader.attributes.add("LoadingScreen", { type: "entity" });

CustomAvatarLoader.instance = null;

window.addEventListener("message", function (event) {
    if (event.origin === "https://rarerooms.readyplayer.me") {
        CustomAvatarLoader.instance.LoadNewAvatar(event.data);
    }
}, false);

// initialize code called once per entity
CustomAvatarLoader.prototype.initialize = function () {
    CustomAvatarLoader.instance = this;
    this.GlbURL = null;
    this.iframeWidth = window.innerWidth;
    this.iframeHeight = window.innerHeight;
    this.app.on("BtnManager:LoadAvatarButtonClick", this.customAvatarSelection.bind(this));

    this.on('destroy', function () {
        this.app.off("BtnManager:LoadAvatarButtonClick", this.customAvatarSelection.bind(this));
    }.bind(this));

    this.setupIframe();
    this.isMobile = false;

    if (pc.platform.mobile || pc.platform.android || pc.platform.ios) { // Mobile
        let avatarIframe = document.getElementById("avatarIframe");
        avatarIframe.style.width = this.iframeWidth + "px";
        avatarIframe.style.height = this.iframeHeight + "px";
        avatarIframe.style.border = "none";
        this.isMobile = true;
    } else { // Desktop
        let avatarIframe = document.getElementById("avatarIframe");
        avatarIframe.style.width = "900px";
        avatarIframe.style.height = "650px";
        avatarIframe.style.border = "none";
        this.isMobile = false;
    }
};

CustomAvatarLoader.prototype.LoadNewAvatar = function (data) {
    let iframe = document.getElementById('avatarIframe');
    let avatarDiv = document.getElementById('avatarDiv');
    iframe.style.display = "none";
    avatarDiv.style.display = "none";
    this.loadGLBModelFromURL(data);
};

// CustomAvatarLoader.prototype.loadGLBModelFromURL = function (modelURL) {
//     var self = this;
//     this.GlbURL = modelURL;
//     this.app.fire("LoadingMenu:SetLoading", true, "Loading Avatar..");
//     let name = "model_" + (Math.floor(Math.random() * 10000));
//     let cacheURL = modelURL + "?cacheBuster=" + (Math.floor(Math.random() * 10000));

//     this.LoadingScreen.enabled = true;
//     utils.loadGlbContainerFromUrl(cacheURL, null, name, function (err, asset) {
//         if (asset.resources[0].model)
//             this.app.root.findByName("ModelTPC").model.asset = asset.resources[0].model.id;
//         else {
//             console.log(asset.resources);
//         }
//         this.LoadAvatarBtn.enabled = true;
//         this.LoadingScreen.enabled = false;
//     }.bind(this));
// };

CustomAvatarLoader.prototype.setupIframe = function () {
    // create STYLE element
    var style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';

    // Add the HTML
    this.div = document.createElement('div');
    this.div.id = "avatarDiv";
    this.div.classList.add('avatarContrainer');
    this.div.innerHTML = this.html.resource || '';
    this.div.style.display = "none";
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    var canvas = document.getElementById("application-canvas");
    // canvas.style.pointerEvents = "none";
    //document.body.insertBefore(this.div,canvas);
    document.body.appendChild(this.div);
};

CustomAvatarLoader.prototype.customAvatarSelection = function () {
    this.LoadAvatarBtn.enabled = false;
    let iframe = document.getElementById('avatarIframe');
    let avatarDiv = document.getElementById('avatarDiv');

    iframe.src = 'https://rarerooms.readyplayer.me/avatar'; // Change this to your custom subdomain
    iframe.style.display = "block";
    avatarDiv.style.display = "block";
};

// update code called every frame
CustomAvatarLoader.prototype.update = function () {
    CustomAvatarLoader.prototype.loadGLBModelFromURL = function (modelURL) {
    var self = this;
    this.GlbURL = modelURL;
    this.app.fire("LoadingMenu:SetLoading", true, "Loading Avatar..");
    let name = "model_" + (Math.floor(Math.random() * 10000));
    let cacheURL = modelURL + "?cacheBuster=" + (Math.floor(Math.random() * 10000));

    this.LoadingScreen.enabled = true;
    utils.loadGlbContainerFromUrl(cacheURL, null, name, function (err, asset) {
        if (asset.resources[0].model)
            this.app.root.findByName("ModelTPC").model.asset = asset.resources[0].model.id;
        else {
            console.log(asset.resources);
        }
        this.LoadAvatarBtn.enabled = true;
        this.LoadingScreen.enabled = false;
    }.bind(this));
};
};
1 Like