I’m building a web game engine only with react, because the only other way to use editor with a custom website seems to be to host it separately and connect with iframe, then you have to send all input to the game through messages.
I thought it was simpler to use playcanvas directly, so in pretty much all the playcanvas engine only examples, glb files are imported like this:
const assets = {
helipad: new pc.Asset(
'helipad-env-atlas',
'texture',
{ url: rootPath + '/static/assets/cubemaps/helipad-env-atlas.png' },
{ type: pc.TEXTURETYPE_RGBP, mipmaps: false }
),
statue: new pc.Asset('statue', 'container', { url: rootPath + '/static/assets/models/statue.glb' }),
cube: new pc.Asset('cube', 'container', { url: rootPath + '/static/assets/models/playcanvas-cube.glb' })
};
const device = await pc.createGraphicsDevice(canvas);
const createOptions = new pc.AppOptions();
createOptions.graphicsDevice = device;
createOptions.componentSystems = [pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem];
createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler];
const app = new pc.AppBase(canvas);
app.init(createOptions);
const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {
app.start();
// get the instance of the statue and set up with render component
const statueEntity = assets.statue.resource.instantiateRenderEntity();
app.root.addChild(statueEntity);
// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent('camera', {
clearColor: new pc.Color(0.2, 0.1, 0.1),
farClip: 100
});
camera.translate(-20, 15, 20);
camera.lookAt(0, 7, 0);
app.root.addChild(camera);
// set skybox
app.scene.envAtlas = assets.helipad.resource;
app.scene.toneMapping = pc.TONEMAP_ACES;
app.scene.skyboxMip = 1;
// spin the meshes
app.on('update', function (dt) {
if (statueEntity) {
statueEntity.rotate(0, -12 * dt, 0);
}
});
});`
In my code I run the same format, creating an assets object, creating a new Asset for each model, calling it “container” and in the third param adding the path to the file. But from my debugging it seems like there is an issue with path to my glb file. I get this invalid magic number error even if my path is something like “.glb”, even if my path doesnt point to a real location.
But when I put in the correct path it still gives me this error, so is playcanvas not really loading the glb from that location? I dont understand, my code is very similar to the example.
heres my code and the error im getting below:
var canvas = document.getElementById("application-canvas");
// Import Model
const assets = {
rose: new pc.Asset('rose', 'container', {url : '../../assets/rose.glb'})
};
const device = await pc.createGraphicsDevice(canvas);
const createOptions = new pc.AppOptions();
createOptions.graphicsDevice = device;
createOptions.componentSystems = [
pc.RenderComponentSystem,
pc.CameraComponentSystem,
pc.LightComponentSystem,
pc.ScriptComponentSystem,
pc.AnimComponentSystem
];
createOptions.resourceHandlers = [
pc.TextureHandler,
pc.ContainerHandler,
pc.ScriptHandler,
pc.AnimClipHandler,
pc.AnimStateGraphHandler
];
// Start and init Application
var app = new pc.AppBase(canvas);
app.init(createOptions);
app.start();
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
const resize = () => app.resizeCanvas();
window.addEventListener('resize', resize);
app.on('destroy', () => {
window.removeEventListener('resize', resize);
});
const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load( () => {
// Create camera
var camera = new pc.Entity();
camera.addComponent("camera", { clearColor: new pc.Color(0.8, 0.8, 0.8) });
app.root.addChild(camera);
camera.setPosition(0, 0, 7);
// Create light
var light = new pc.Entity();
var light = new pc.Entity();
light.addComponent('light');
light.rotate(45, 0, 0);
app.root.addChild(light);
app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);
const rose = assets.rose.resource;
app.root.addChild(rose);
// create box entity
const box = new pc.Entity('cube');
box.addComponent('render', {
type: 'box'
});
app.root.addChild(box);
});
Error :
