Лучший способ показать и скрыть GUI при нажатии - PullRequest
Новая
       14

Лучший способ показать и скрыть GUI при нажатии

1 голос
/ 28 мая 2020

Я хочу, чтобы экземпляр dat. GUI () отображался, когда щелчок происходит внутри меня sh, и когда он щелкает снова, чтобы исчезнуть. Очевидно, когда его повторно щелкают, я хочу, чтобы он вернулся. Я пробовал много разных вещей, но не могу добиться желаемого поведения ...

Например, цыпленок, этот код: 

 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()
        }


    }

Теперь, когда я нажимаю на меня sh, появляется GUi создается, когда я снова нажимаю, он исчезает, но когда я снова нажимаю, происходят странные вещи.

Иногда кнопка скрытия не работает, но в конечном итоге я получаю много разных GUIS, где мне нужен только один.

И есть возможность заставить его появляться / исчезать.

1 Ответ

2 голосов
/ 28 мая 2020

Это можно сделать так: 

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>
...