Use The Canvas Engine To Load The Local Json Model

The following is the source code of my JS part:
var canvas = document.getElementById(“application-canvas”);
var app = new pc.Application(canvas, {
mouse: new pc.Mouse(document.body),
touch: new pc.TouchDevice(document.body)
app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;
app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);
var url = “…/json/DoubleColumn.json”;
var asset = new pc.Asset(“Steel”, “model”, {
url: url
asset.on(“load”, function (err, model) {
// loaded
var steel = new pc.Entity();
steel.addComponent(“model”, {
type: ‘asset’,
asset: asset
}); = “DoubleColumn”;
var camera = new pc.Entity();
camera.addComponent(“camera”, {
clearColor: new pc.Color(0.4, 0.45, 0.5)
camera.translate(0, 7, 24);
var light = new pc.Entity();
light.addComponent(“light”, {
type: “point”,
color: new pc.Color(1, 1, 1),
range: 100
light.translate(5, 0, 15);

Powered by PlayCanvas 0.226.0-dev 863e24c:63342/json/DoubleColumn.json
Failed to load resource: the server responded with a status of 404 (Not Found)

The trouble can help me, just start using the engine, the document is slightly inappropriate for me.
Or who can give me reference to this part of the code.

Very Thanks

Is the triple period deliberate ... in the URL?

In a nutshell, it can’t find the JSON file, so I would double check the path and also the file directory on the server.

The path to the JSON file has been ensured, but the same error has occurred.
I’m thinking about it. The JSON file is what I got by importing the FBX model in the Playcanvas editor and then downloading it. Is there a problem with the code?

The issue is that the server can’t find the file rather than the code being the issue.

I would check what the file path of the request is being made using dev tools in the browser and also if the server has been set up to server json files.

@yaustar okay~very thanks

@yaustar There is another question you want to ask you, currently you can use the engine implementation model to display on the page, but I also have a JSON format file on the material. How can I write code to paste the material JSON into my scene model? Can I provide code writing examples?

I use loadFromUrl rather than load which also attempts to load the mapping and therefore the materials and textures along with:

You can see how I’ve hosted my models, textures etc here

I now have the right (0,0,0) for the model’s translate setting, but can’t I set Position and rotation?
As long as the position is set or the page is rotated, there will be no error, but the model will not be displayed.

var entity = new pc.Entity();
type: ‘asset’,
asset: asset

Can you provide the full code either via codepen or something similar please?

Its difficult to debug without being able to run it myself.