Question

我有一个名为autorotation的复选框。我想在用户点击场景中的任何位置时将该复选框标记为false ...

controller = new function() {  
    this.autorotation=true;
}
var gui = new dat.GUI();
f1 = gui.addFolder('Sphere');
autorotation=controller.autorotation;
q=f1.add(controller, 'autorotation').listen().onChange( function()
{
    autorotation=controller.autorotation;

});

function onDocumentMouseDown(event)
{
    controller.autorotation=false;
    //stop autorotation and uncheck the box.
    //user may check the box for rotation manually by clicking on checkbox.
}

此代码有效。我想标记取消选中code.Controller.autorotation = false标记复选框为false但不会停止自动旋转。如果我通过autorotation = false停止旋转。然后我必须在复选框上单击两次检查它是否真实

Answer 1

您的代码运行正常。您只是没有向想要获得点击的对象添加事件侦听器。

例如，我添加了一个canvas元素，并在其鼠标按下事件中添加了onDocumentMouseDown。

从我的角度来看，没有必要拥有autorotation变量，因为您已经拥有contorller.autorotation，您可以轻松参考。

controller = new function() {  
    this.autorotation=true;
}
var gui = new dat.GUI();
f1 = gui.addFolder('Sphere');
q=f1.add(controller, 'autorotation').listen().onChange( function()
{
    autorotation=controller.autorotation;

});

scene.addEventListener("mousedown", onDocumentMouseDown, false);
function onDocumentMouseDown(event)
{
    controller.autorotation=false;
    //stop autorotation and uncheck the box.
    //user may check the box for rotation manually by clicking on checkbox.
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<canvas id="scene" style="border:1px solid red;background-color:aqua;"></canvas>

在dat.gui中使用ckecking和unchecking复选框

1 个答案: