我尝试实现一种方法来防止用鼠标更新值(实际上当three.js
动画已开始,通过单击按钮启动)。
目前,我有以下内容dat.GUI
menu:
单击“开始”按钮后,我想阻止用户用鼠标修改参数“Rotation x
" and "Rotation y
".
这是该菜单的相关代码部分:
// Create GUI
var gui = new dat.GUI({
autoplace: false,
width: 350,
height: 9 * 32 - 1
});
var params = {
GreatCircle : '',
Rotationx : torusRotationInitX,
Rotationy : torusRotationInitY,
StartingVector : '',
ComponentVectorTheta : 15.0,
ComponentVectorPhi : 15.0,
CovariantDerivativeVector : '',
ComponentCovariantDerivativeTheta : 15.0,
ComponentCovariantDerivativePhi : 15.0
};
// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0, 2*Math.PI, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0, 2*Math.PI, 0.001).name('Rotation y ');
...
当我单击重置按钮时,我调用以下函数:
// Reset Button
resetButton.onclick = function ResetParameters() {
...
// Reinitialize parameters into gui
params.Rotationx = torusRotationInitX;
params.Rotationy = torusRotationInitY;
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
render();
}
我不知道控制器是否有一个选项可以锁定这些通常会更改其值的滑块。是否可以?
Update 1
也许我可以将 dat.GUI 菜单包装到一个 div 中,并使该 div 不可点击,这是一个解决方案吗?
Update 2
我尝试应用使用的方法禁用 dat.gui 中按钮的方法? https://stackoverflow.com/questions/24461964/method-for-disabling-a-button-in-dat-gui
按照这个解决方案,我将扩展添加到dat.gui
, 刚过:
dat.controllers.FunctionController = (function (Controller, dom, common) {
...
});
添加的代码片段如下:
function blockEvent(event)
{
event.stopPropagation();
}
Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
get: function()
{
return this.domElement.hasAttribute("disabled");
},
set: function(value)
{
if (value)
{
this.domElement.setAttribute("disabled", "disabled");
this.domElement.addEventListener("click", blockEvent, true);
}
else
{
this.domElement.removeAttribute("disabled");
this.domElement.removeEventListener("click", blockEvent, true);
}
},
enumerable: true
});
扩展代码是否位于dat.GUI
source?
然后,我设置了属性“disabled
“进入我的代码以防止用户滑动”controllerRotationx
" 用鼠标(按下开始按钮后):
if (animation)
controllerRotationx.__li.disabled = true;
不幸的是,我的方法不起作用:当动画开始时,我仍然可以将包含的滑块移动到“controllerRotationx
".
我看到上面的链接(禁用 dat.gui 中按钮的方法? https://stackoverflow.com/questions/24461964/method-for-disabling-a-button-in-dat-gui),这是关于一个按钮而不是滑块,它对我的情况有什么改变吗?
我没有找到滑块的明确控制器。