5

我正在开发一个简单的 Web 应用程序，我正在使用两个 js 库：dat.gui 和three.js。

我的问题是下拉菜单被锁定。我无法打开它。

// gui initialization (dat.gui)
function initGui() {

    var Options = function() {
        this.tenda = 'bar';
    };

    config = new Options();
    var gui = new dat.GUI();
    var subGui = gui.addFolder('Setting');
    subGui.open();

    // callbacks
    subGui.add( config, 'tenda', ['bar', 'pie', 'area']).
        onChange(
            function() {
                if (config.tenda === 'bar') { ... }
                else if (config.tenda === 'pie') { ... }
                else if (config.tenda === 'area') { ... }
            }
        );
};

在网上阅读，这似乎是一个已知问题，但在某些示例中，我看到下拉菜单运行良好。我是 js 新手，我认为“可能存在一些范围问题”，所以我将初始化过程放在一个可以完成工作的函数中。但问题依然存在。

我正在研究 Ubuntu/Chrome 和 Ubuntu/Firefox。你可以在这里查看整个代码，这里我使用复选框而不是下拉菜单。

4

3 回答 3

1

我面临同样的问题。在我的代码中，我改变了：

var controls = new THREE.OrbitControls(camera);

至

var controls = new THREE.OrbitControls(camera, renderer.domElement);
于 2018-12-06T10:42:14.283 回答
0

我面临同样的问题。在我的代码中，我监听鼠标点击事件。和这样的回调函数：

function onDocumentMouseDown( event ) {
    event.preventDefault();

    ... //other code
}

我发现问题是“event.preventDefault();”，这将阻止点击下拉列表，所以通过评论它，我的问题解决了。您还可以检查与鼠标单击事件相关的其他功能。

于 2016-01-18T15:58:42.690 回答
0

确保仅从绘图画布中为 mouseEvents 调用 preventDefault 为我解决了这个问题（在 Three.js 的上下文中，并使用 OrbitControls 和 raycaster 在鼠标单击时进行选择）

function onDocumentMouseDown(event) {
  // https://stackoverflow.com/a/11562933/1497139
  var target = event.target || event.srcElement;
  var tag = target.tagName;
  if (tag!='CANVAS')
    return;
  event.preventDefault();
于 2019-08-14T13:26:20.000 回答