How can i load model on run time loading fine on static url

Help & Support
1

Play canvas code:

var Obj = pc.createScript('obj');
    console.log('132a');

window.onmessage = function(e){
Obj.attributes.add('material', { type: 'asset', assetType: 'material' });
    Obj.prototype.loadModel = function (objStr) {
            var objData = new OBJ.Mesh(objStr);
            var url;
            var options = {};
            if (objData.vertexNormals) options.normals = objData.vertexNormals;
            if (objData.textures) options.uvs = objData.textures;
            if (objData.indices) options.indices = objData.indices;
            if (objData.vertices && objData.vertexNormals && objData.textures && objData.indices) {
                var tangents = pc.calculateTangents(objData.vertices, objData.vertexNormals, objData.textures, objData.indices);
                options.tangents = tangents;
            }

            var mesh = pc.createMesh(this.app.graphicsDevice, objData.vertices, options);
            var node = new pc.GraphNode();
            var material = this.material ? this.material.resource : new pc.StandardMaterial();
            var meshInstance = new pc.MeshInstance(node, mesh, material);
            var model = new pc.Model();
            model.graph = node;
            model.meshInstances = [ meshInstance ];

            this.entity.addComponent('model');
            this.entity.model.model = model;
        };

        alert('http://network.daruldev.com/models');

        Obj.prototype.initialize = function() {
        var asset = new pc.Asset("obj", "text", {
            url: 'https://network.daruldev.com/models/eyeball.obj'
        });

        var self = this;
        asset.ready(function (asset) {
            self.loadModel(asset.resource);
        });

        this.app.assets.add(asset);
        this.app.assets.load(asset);
    };
        Obj.prototype.update = function(dt) {

    };
        // url = 'https://network.daruldev.com/models'+e.data;
        // Obj.attributes.add('url', { type: 'string' });
    console.log('132');
    
};

Web page code :

Click me 
                                            <script>
                                                function myFunction(){
                                                    var app = document.getElementById('app');
                                                    app.contentWindow.postMessage('{{ $models_3d->model }}', '*');
                                                 }
                                            </script>
                                    </div>
2

Hi @Fahadi_Nadeem,

Loading an .obj model on runtime requires first adding to your project the obj-loader extension, from the Playcanvas repo.

You can find the script here:

And here is an example on how to add it to your project and then how to call the loadFromUrl() to load the remote file:

https://playcanvas.github.io/#loaders/loader-obj.html

1 Like
3

@Leonidas
We have worked on it its working fine when we code the static url but when use the postmessage its not working with iframe please let me know what to do with iframe

4

Sorry that’s on your parent website codebase, not Playcanvas.

You will have to search for a JavaScript tutorial on how to setup a communication between two windows using postMessage.

5

@Leonidas we are already communicating the communication works fine i have debug the communication is working fine but the model is not load after i get the url from website that the problem

6

Try sharing here a url to your project to take a look, not sure what’s wrong with the code you shared.

7

What error message do you get as well?

Is new OBJ.Mesh(objStr) one of your classes/code?

8

Looking at the code of the project, you seem to have wrapped a bunch of code in the on window.message function.

Sounds like this is what you wanted to do and have to on message callback do something with the message string?

https://playcanvas.com/project/712121/overview/obj-forum-project

1 Like
9

@yaustar link is not working !

10

@yaustar
@Leonidas

http://network.daruldev.com/test

this is the test link i have created for you !

11

yes !

12

yes exactly !

13

Oops. Left it on private. It’s now public.

14

can you please check the link and suggest the code

15

You can now access the project I posted with the code that I believe fixes your issue. You still need to tweak it should be pretty straightforward forward.

16

@yaustar
http://network.daruldev.com/test

their is an error of undefined asset

image
image2820×1440 817 KB

17

it is showing :Uncaught TypeError: Cannot read property ‘assets’ of undefined
@yaustar

18

I’ve modified the PlayCanvas project and set up an example on JSFiddle: https://jsfiddle.net/2yzpdec9/5/

https://playcanvas.com/editor/scene/974566
The code is just a modified version of what was given here: Connect web App with Playcanvas iFrame

19

What if we want to load on page load not on click when we should load it ?
@Leonidas

20

  1. You should send first a message from the Playcanvas side to your parent page, that Playcanvas loading has finished, app is ready.

  2. As a response send back from the parent page to Playcanvas the message @yaustar prepared on jsfiddle:

app.contentWindow.postMessage('https://network.daruldev.com/models/eyeball.obj', '*');