How do I change the color using an external color picker for Babylon.js?

Question

I recently have a project to be working with Babylon.js and instead of using Colorpicker GUI, I must use an external color picker. In this case I'm using http://jscolor.com/ . Here's my partial code (I'm only showing my small code, because of a strict post rule. Tell me if you still need more detailed code).

 <!-- This is the external color picker --> <input class="jscolor {onFineChange:'updateColor(this)'}" value="ffcc00" style="position: absolute;z-index: 999;"> <!-- end of external color picker --> <script type="text/javascript"> var divcvs = document.getElementById("cvs"); var loader = document.getElementById("load"); if (loader && loader.parentElement) loader.parentElement.removeChild(loader); var engine = new BABYLON.Engine(divcvs, antialias, null, adaptive); engine.enableOfflineSupport = offline; engine.clear(new BABYLON.Color3(0, 0, 0), true, true); engine.displayLoadingUI(); engine.loadingUIText = "Loading Content Assets"; var updateStatus = (status) => { engine.loadingUIText = status; }; var showSceneLoader = () => { divcvs.style.opacity = "0"; engine.clear(new BABYLON.Color3(0, 0, 0), true, true); engine.displayLoadingUI(); updateStatus("Loading Content Assets"); }; var removeSceneLoader = () => { engine.hideLoadingUI(); divcvs.style.opacity = "1"; updateStatus(""); }; var progressSceneLoader = () => { if (loaded === false && TimerPlugin && TimerPlugin.requestAnimFrame) { if (scene != null) { var waiting = 0 + scene.getWaitingItemsCount(); var content = (waiting > 1) ? " Content Assets" : " Content Asset"; updateStatus((waiting > 0) ? "Streaming " + waiting.toString() + content : ("Starting " + title)); } TimerPlugin.requestAnimFrame(progressSceneLoader); } }; // Only works on this part for the scene var executeSceneLoader = (root, name) => { progressSceneLoader(); BABYLON.SceneLoader.Load(root, name, engine, (newscene) => { scene = newscene; // Access the Babylon Mesh and create a default scene var pbr = new BABYLON.PBRMaterial("cube", scene); var cube = scene.getMeshByName("sample_Cube"); cube.material = pbr; pbr.albedoTexture = new BABYLON.Texture("scenes/KnittedMetal_AlbedoTransparency.png", scene); pbr.useRoughnessFromMetallicTextureGreen = true; // GUI and Controls var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); var panel = new BABYLON.GUI.StackPanel(); panel.width = "200px"; panel.isVertical = true; panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT; panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER; advancedTexture.addControl(panel); // Babylon Color Picker, but I'm not using this. It's // only for testing. var textBlock = new BABYLON.GUI.TextBlock(); textBlock.text = "Choose color:"; textBlock.color = "#ffffff"; textBlock.height = "30px"; panel.addControl(textBlock); var picker = new BABYLON.GUI.ColorPicker(); picker.value = pbr.albedoColor; picker.height = "150px"; picker.width = "150px"; picker.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER; picker.onValueChangedObservable.add(function(value) { pbr.albedoColor.copyFrom(value); }); panel.addControl(picker); // End Babylon Color Picker // End GUI and Controls if (!scene.manager) { if (BABYLON.SceneManager && BABYLON.SceneManager.CreateManagerSession) { BABYLON.SceneManager.CreateManagerSession(root, scene); BABYLON.Tools.Warn("Babylon.js created default scene manager session"); } } scene.executeWhenReady(() => { loaded = true; if (scene.manager && scene.manager.start) { scene.manager.start(); } else { engine.runRenderLoop(function() { scene.render(); }); BABYLON.Tools.Warn("Babylon.js running default scene render loop"); } removeSceneLoader(); }); }); }; // Default babylon scene loader var defaultSceneLoader = (root, name) => { scene = null; loaded = false; showSceneLoader(); executeSceneLoader(root, name); }; if (engine) window.addEventListener("resize", () => { engine.resize(); }); </script>

Where do I put this code below inside Babylon.js code?

function updateColor(custPicker) {
        // This is only to show you the return value when the color picker is the trigger.
        // This returns a hexadecimal string ex: #FFCC00
        var colorval = custPicker.toHEXString();
        console.log(colorval);
    }

Answer 1

You can put it anywhere inside your script tag like this:

 <!-- this is the external color picker --> <input class="jscolor {onFineChange:'updateColor(this)'}" value="ffcc00" style="position: absolute;z-index: 999;"> <!-- end of external color picker --> <script type="text/javascript"> function updateColor(custPicker) { // this only to show you return value when color picker is trigger // this return hex string ex: #FFCC00 var colorval = custPicker.toHEXString(); console.log(colorval); } // Your other code goes here: // ... </script>