I have two very simple projects.
One is created in the editor and displays a red cube: PlayCanvas 3D HTML5 Game Engine
The second does exactly the same, but is created without the editor (using only the Playcanvas library): Pacman
In the second project I tried to set everything exactly the same (cube material, light, scene settings) as it is set in the project created in the editor, but still both projects have different final colors.
Where is the problem?
This is how I set up the cube, scene and light in the “engine” project (I used the values I found in the editor):
// Camera
let cam = new pc.Entity();
cam.addComponent(pc.eCompomentType.camera, {
nearClip: 0.1,
fov: 45,
frustumCulling: false,
clearColor: new pc.Color(0.1, 0.1, 0.1)
});
cam.setPosition(0, 0, 10);
this._app.root.addChild(cam);
// Ambient color and scene setup
this._app.scene.toneMapping = pc.TONEMAP_LINEAR;
this._app.scene.exposure = 1;
this._app.scene.gammaCorrection = pc.GAMMA_SRGB;
this._app.scene.ambientLight.fromString("#333333");
// Dynamic light
let light = new pc.Entity();
light.addComponent(pc.eCompomentType.light, {
type: pc.LIGHTTYPE_DIRECTIONAL,
color: new pc.Color().fromString("#FFFFFF"),
intensity: 1,
isStatic: true,
bake: false,
affectDynamic: true,
affectLightmapped: false,
castShadows: false,
});
light.setEulerAngles(-45, 135, 0);
this._app.root.addChild(light);
// Red box
let mat = new pc.StandardMaterial();
mat.diffuse.set(1, 0, 0);
mat.update();
let box = new pc.Entity();
box.addComponent(pc.eCompomentType.render, {
type: pc.eModelType.box,
material: mat
});
this._app.root.addChild(box);