Working off the "Basic Scene" example on babylonjs-playground here, I am trying to do a simple modification on the color of the sphere.

Here is my attempt, which can be run interactively:

Here is the code:

var createScene = function () {

    // The original example, without ments:
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
    sphere.position.y = 1;
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

    // My attempt to color the sphere
    var material = new BABYLON.StandardMaterial(scene);
    material.alpha = 1;
    material.diffuseColor = new BABYLON.Color3(1,0,0);
    scene.material = material;

    return scene;

};

My attempt to add the colored material to the sphere has no effect.

I also tried to look for color-related attributes on the sphere object:

Object.keys(sphere).filter((key) => return key.includes("Color") )
// => "outlineColor", "overlayColor", "_useVertexColors", "edgesColor"

Except for _useVertexColors, all of these seem to be color objects, but changing them has no effect:

sphere.overlayColor.g = 1;
sphere.outlineColor.g = 1;
sphere.edgesColor.g = 1;

Working off the "Basic Scene" example on babylonjs-playground. here, I am trying to do a simple modification on the color of the sphere.

Here is my attempt, which can be run interactively:

https://www.babylonjs-playground./#95BNBS

Here is the code:

var createScene = function () {

    // The original example, without ments:
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
    sphere.position.y = 1;
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

    // My attempt to color the sphere
    var material = new BABYLON.StandardMaterial(scene);
    material.alpha = 1;
    material.diffuseColor = new BABYLON.Color3(1,0,0);
    scene.material = material;

    return scene;

};

My attempt to add the colored material to the sphere has no effect.

I also tried to look for color-related attributes on the sphere object:

Object.keys(sphere).filter((key) => return key.includes("Color") )
// => "outlineColor", "overlayColor", "_useVertexColors", "edgesColor"

Except for _useVertexColors, all of these seem to be color objects, but changing them has no effect:

sphere.overlayColor.g = 1;
sphere.outlineColor.g = 1;
sphere.edgesColor.g = 1;

• javascript
• babylonjs

1 Answer 1

You're pretty close. You are setting a color correctly with diffuseColor but you aren't actually adding it specifically to your sphere.

Your sphere object is stored in sphere so what you need to do is you need to set the material you created on sphere and not on scene.

// My attempt to color the sphere
var material = new BABYLON.StandardMaterial(scene);
material.alpha = 1;
material.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);
sphere.material = material; // <--

See this tutorial