CODEWITHSUNDEEP
javascriptbabylonjs
max pleaner
max pleaner

Reputation: 26768

How to color a shape in Babylon.js?

Working off the "Basic Scene" example on babylonjs-playground.com 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.com/#95BNBS

Here is the code:

var createScene = function () {

    // The original example, without comments:
    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;

Upvotes: 3

Views: 7906

Answers (1)

aug
aug

Reputation: 11714

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

Upvotes: 5

Related Questions