单击发生时显示和隐藏 GUI 的最佳方式

Question

我想要一个 dat.GUI() 实例在网格内部发生点击时显示，并在再次点击时消失。显然，当它被重新点击时，我想要它重新出现。我尝试了很多不同的东西，但我无法得到我想要的行为...

例如小鸡这个代码：

 function onDocumentMouseClick(event) //if we detect a click event
    {
        // the following line would stop any other event handler from firing
        // (such as the mouse's TrackballControls)
        event.preventDefault();

        // update the mouse variable
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        // calculate objects intersecting the picking ray
        var intersects = raycaster.intersectObjects( scene.children );

        //if mouse is on top of the mesh when the click occurs, change color of mesh and render GUI
        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            isClicked = true;
            cube.material.color.set( 0xF7F7F7 );


            var params = {
                textField: "Enter value:"
            }


            var item =  gui.add(params, "textField").onFinishChange(function (value) {
                //Do something with the new value
                console.log(value);
            });

        } 
        //if mouse is on top of the mesh when the click occurs, but it already marked as 'clicked', now mark it as 'unclicked'
        else if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === true)
        {
            isClicked = false;
            cube.material.color.set( cube.userData.originalColor );
           dat.GUI.toggleHide();
            //gui.toggleHide()
        }


    }

现在，当我单击网格时，会创建 GUI，当我重新单击它时会消失，但是当我再次单击时，会发生奇怪的事情。

有时隐藏按钮不起作用，但最终我得到了许多不同的 GUIS，而我只想要一个。

并且可以选择让它出现/消失。

Answer 1

你可以这样做：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

params = {
  zAxis: "1"
}
var gui = new dat.GUI();
gui.add(params, "zAxis").onFinishChange(val => {
  cube.scale.z = parseFloat(val);
});


var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var intersects;

window.addEventListener("click", event => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(cube);
  if (intersects.length > 0) {
    let vis = gui.domElement.style.visibility;
    gui.domElement.style.visibility = vis == "" ? "hidden" : "";
  }
});

var animate = function() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

单击发生时显示和隐藏 GUI 的最佳方式

Best way to show and hide GUI when click occurs

javascript

three.js

dat.gui