如何使用Babylonjs的外部颜色选择器更改颜色

Question

我最近有一个要与babylonjs一起使用的项目，而不是使用Colorpicker GUI，我必须使用外部颜色选择器。在这种情况下，我使用的是http://jscolor.com/。这是我的部分代码（由于严格的发布规则，我只显示我的小代码，告诉我是否仍然需要更多详细信息代码）

<!-- 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 work on this part for the scene
		var executeSceneLoader = (root, name) => {
			progressSceneLoader();
			BABYLON.SceneLoader.Load(root, name, engine, (newscene) => {
				scene = newscene;
				// access Babylon Mesh and create 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 test
				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>

该代码在巴比伦代码下面放在哪里？谢谢，为我的英语不好

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);
    }

Answer 1

您可以将其放在脚本标签内的任何位置，如下所示：

<!-- 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>