How to edit a design using HTML5

Help & Support
1

Hello! I am asking this on behalf of a friend who is a programmer but his English is not good. He would like to know once a design is made in canvas, there are several files. Where is the actual design? more specifically where can he edit the colours, or the different elements of the design? The idea is that once the design is made, he would like to set up a menu to people can change colours in certain parts of the 3D model, or textures,etc… He needs to know how which piece of code is the design. You can be as technical as possible in your reply because, as I said, he is a programmer so he will understand what you mean. Thanks!

2

So Playcanvas is simply a rendering and physics engine. It has a nice online editor, but in the end it can display objects and model their interactions.

Anything beyond that is up to the programmer. So if you want to edit the colors you can use the Playcavas API to edit the materials, but the math controlling the color the programmer has to implement.

As a brief summary:

  • .json files are textures and models
  • .js files are behaviour
3

Thanks for your reply!
Some more questions. What are the .json and js files where the colours are? what are their names?
Once it is exported how can you see the modelled 3D object in the web?

Thanks again for your help!

4

If you use the playcanvas online editor, you cannot see the .json files that contain the models and colors. They are hidden to keep things tidy.
The .js files you can see and edit using the code editor.

If you don’t use the online editor, then you’ll have to manage your own .json and .js files.

As for what they are:

  • .js files are javascript files. They can be made using any text editor, or the online editors code tab.
  • json files are javascript object files, and contain json dictionaries representing the models. These have to be made using the playcanvas website, and are automatically generated when you upload a model into a project. They can be downloaded using the ‘export model archive’ button.

When you export a game you end up with a bunch of .js, .json and.html files, and to see it on the web you have to host it. If you are using the online editor, you don’t have to bother with that though, as the game is already hosted at the playcanvas website.

5

If I understand you correctly. You are asking about how to import models and then change the materials and textures at runtime (during the game).

Note, there is details about most of this in our developer documentation.

To import models, you just drop a 3D model file (e.g. FBX or Collada file) into the asset panel in the Editor. Materials that are in the model file will be created for you by our import process.

You can import textures by dropping image files in to the asset panel.

Use the Material Editor to modify the materials inside the Editor.

To modify materials at runtime (during the game) you will have to write some javascript. A simple example here changes the color of a material to red.

var materials = this.entity.model.model.getMaterials();
materials[0].diffuse = new pc.Color(1,0,0);
materials[0].update();

See the API reference for the Phong Material for all the properties you can modify.

Hope that helps.

6

Thanks Dave, my friend reviewed the links you sent him but he still wants to have an answer to these questions:
What are the .json and js files where the colours are? what are their names?
Once it is exported how can you see the modelled 3D object in the web?

Thanks again for your help!

7

Thanks dave and sdfgeoff for all your help. My friend wants to reformulate the question:

For example imagine that we could see a modelled object in this link (just an example):
http://www.grafosdesign.com/3dVisual_Interact/BioracerDEMO/vitrina2.html
This modelled object is connecting to an api and it only gives access to the executed model. Because of this I can’t make any changes. The question is how can I see the modelled object in the navigator with the created files. These are the ones I need. Is this possible?
Basically once the project is downloaded how can it be visualised and in which file (whether js o json with its name not its extension) contains the colours and the textures?

Thanks!

8

Are you trying to click on the colors on this website ( http://www.grafosdesign.com/3dVisual_Interact/BioracerDEMO/vitrina2.html ) and change the colors of the displayed 3D model ? Just trying to understand what you’re trying to do.

9

yes the idea is to have a menu where people can select a colour and this changes in the displayed 3D model

10

So there’s various parts you need to understand.

First of all the appearance of a 3d model is controlled by its material. If you want to change the color of a 3d model you need to change the color in the model’s material. For example you can have a script on an Entity that has a model component of type ‘box’ and do the following:

var myModel = this.entity.model; // get the model component
var material = myModel.material; // get the material
material.diffuse = new pc.Color(1, 0, 0); // set the diffuse color to red
material.update(); // call update so that the changes are saved

You can learn more about materials here http://developer.playcanvas.com/en/user-manual/assets/materials/ .

Now when you publish an app and embed it on your site, you do it using an iframe. For example the site you mentioned contains an iframe which displays a PlayCanvas application.

If you want to interact with the application that is running inside the iframe you need to use postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage .

So if you have a site that contains a menu with colors, and you want to change the color of a 3D model that is shown inside an iframe, you need to send a message to the iframe every time the user clicks on one of the colors, to tell the iframe which color to set to the model. Something like this:

var iframe = document.getElementById('frame').contentWindow;
var origin = 'http://apps.playcanvas.com.s3-website-eu-west-1.amazonaws.com/';
iframe.postMessage({color: '#ff0000'}, origin);

Then inside a script in your application you can have some code that accepts the message and handles it like so:

initialize: function () {
    var material = this.entity.model.material;
    window.addEventListener('message', function (msg) {
         var colorString = msg.data.color;
         var color = new pc.Color().fromString(colorString);
         material.diffuse = color;
         material.update();
    });
}

Let me know if this makes sense.

1 Like
11

Thanks! I referred your answer to my friend and he wants me to ask you: How can he see a modelling that was made locally from the downloaded (or exported) files. In other words if a modelled is made and then the files are downloaded how can someone else use these files to see the modelled object.
Thanks again for all your help.

12

When you download an exported application from PlayCanvas, you get a .zip file with all the files that are needed for the application to run. If you want to run the application locally (so only on your computer - not the internet) you can start a local server inside the folder where you extracted the zip file. For example using python:

cd exported_application
python -m SimpleHTTPServer 8000

Then you open your browser and navigate to localhost:8000 to see the application

Alternatively you can host the exported application on a server of your choice. Is this what you’re asking?

13

Thanks for your answer. My friends says that the local server is an xampp and that the zip with the downloaded (exported) files is in the folder htdocs but at the moment of opening index.html the modelled object can’t be seen. This is the source code that has the index.html just how it was downloaded from Play Canvas:

<!doctype html>

HolaMundo

Any ideas? thanks again for all your help.
Best Regards, Cristina

14

Sorry here is the source code I mentioned before.
<!doctype html>

HolaMundo
15

16

What can be seen?

This is a very common use-case for PlayCanvas, so there must be something incorrect about your set up. The folder supplied in the download for web option is ready-to-serve and will just work if you put it on a web server.

Check file permissions (does server have permission to serve) and paths (is server serving the correct folder).

17

Hi Dave,
Nothing can be seen… a dark screen. We will look into the set up then. Thanks for your help!
Cristina