javascript - 如何使用 Babylon.js 的外部颜色选择器更改颜色?
问题描述
我最近有一个项目要使用 Babylon.js,我必须使用外部颜色选择器,而不是使用 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 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>
在 Babylon.js 代码中,我应该把这段代码放在哪里?
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);
}
解决方案
您可以将它放在脚本标签内的任何位置,如下所示:
<!-- 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>
推荐阅读
- node.js - 如何将图像上传到 Firebase?可能吗?
- python - 运行 dockerised Hello world python 示例时执行格式错误
- azure - Azure 自定义 DNS 服务器未刷新
- ios - GMSAutocompleteViewController 仅显示 5 个结果
- java - Eclipse:在 Eclipse 版本中更改了 ctrl+shift+/ 格式的块注释样式:2018-12 (4.10.0)
- mysql - mysql5.7 ON DUPLICATE KEY UPDATE 语法将更新额外的列
- java - Spring Boot @RestController 动态接受不同结构 bean 对象的 @RequestBody 并验证请求
- python - Python Configparser 未读取文件。说文件不存在
- javascript - Express Node.js 路由问题
- c++ - 如何将 int 和 int* 传递给函数来定义变量