I cannot type in dat.gui in JSFiddle

Question

I have written code that works perfectly when i run it locally on my system.

This is the link: https://jsfiddle.net/rand0mus3r/L3j7kz5a/

When you click the mesh, a dat.gui instance appears. However, when i use backspace or try to input something in the textbox, it doesn't work.

It works fine in my system though.

This is the code:






    Example 01.02 - First Scene
    
    
    
    













window.onload = init();
    animate(); //calling function that does all the rendering 


    //GLOBAL VARS
    var scene, camera, renderer;
    var cube;
    var raycaster, mouse;
    var INTERSECTED;

    //global flag
    var isClicked = false;

    //for the camera
    var controls;

//creating and rendering the GUI
params = {
  yAxis: "0.00001"
}
var gui = new dat.GUI();
gui.add(params, "yAxis").onFinishChange(val => {
  cube.scale.y = parseFloat(val);
}); 

//we make sure to make it hidden
 let vis = gui.domElement.style.visibility;
 gui.domElement.style.visibility = vis == "" ? "hidden" : "";

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        //SET CAMERA
        camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
        camera.position.z = 5;

        // create a render and set the size
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor("#e5e5e5"); //background color
        renderer.setSize(window.innerWidth,window.innerHeight); //size of renderer




        //bind rendered to the dom element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);  


        //RAYCASTER
        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2(1,1);


        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00 }); //0xF7F7F7 = gray
        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.scale.y = 0.00001;
        cube.userData.originalColor = 0xffff00;

        // position the cube
        cube.position.x = 0;
        cube.position.y = 3;
        cube.position.z = 0;
        /*
        //USEFUL METHODS
        cube.rotation.x +=0.5
        cube.scale.x +=0.5
        */
        // add the cube to the scene
        scene.add(cube);


        /*  RENDERING A PLANE
        var geometry = new THREE.PlaneGeometry( 20, 20);
        var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
        var plane = new THREE.Mesh( geometry, material );
        plane.rotation.set(80,0,0);
        scene.add( plane );
        //plane.position.x = 2;
        */

        //ADDING LIGHTS
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);


        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);


        //camera
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.minDistance = 1;
        controls.maxDistance = 1000;

        // when the mouse moves, call the given function
        document.addEventListener('mousemove', onDocumentMouseMove, false);

        //when the mouse is clicked, call the given function
        document.addEventListener('click', onDocumentMouseClick, false);
    }

    function onDocumentMouseMove(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 );

        //TRY THIS
        // intersects = raycaster.intersectObject(cube); // to get the cube only

        //if the mouse hovers over the cube mesh, change its color to red
        //when mouse leaves the mesh, change it back to its original color
        //ONLY MAKE THESE MODIFICATION IF THE MESH IS NOT CLICKED
        //BECAUSE IF IT IS CLICKED, YOU HAVE TO PAINT THE MESH ACCORDING TO THE onDocumentMouseClick()
        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            cube.material.color.set( 0xF7F7F7 );    
        } 
        else if (isClicked === false)
        {
            cube.material.color.set( cube.userData.originalColor );
        }

    }

    // 0xff0000 red
    //0xF7F7F7 = gray

    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( 0xff0000);

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



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

*/       

//when its clicked, change the visibily of the GUI
 vis = gui.domElement.style.visibility;
    gui.domElement.style.visibility = vis == "" ? "hidden" : "";


        } 
        //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 );
            //when its clicked, change the visibily of the GUI
            vis = gui.domElement.style.visibility;
            gui.domElement.style.visibility = vis == "" ? "hidden" : "";
   //         gui.__proto__.constructor.toggleHide()
            //dat.GUI.toggleHide();
            //gui.toggleHide()
        }


    }


    function render() 
    {
        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera( mouse, camera );
        renderer.render(scene, camera); //render the scene
    }


    function animate()
    {
        requestAnimationFrame( animate ); //pauses when user switches tab
        controls.update();
        render();
    }

Mugen87 · Accepted Answer

This problem is related to a bug in OrbitControls which was fixed with r110. Upgrading OrbitControls to r110 solves the issue.

window.onload = init();
    animate(); //calling function that does all the rendering 
    

    //GLOBAL VARS
    var scene, camera, renderer;
    var cube;
    var raycaster, mouse;
    var INTERSECTED;

    //global flag
    var isClicked = false;

    //for the camera
    var controls;

//creating and rendering the GUI
params = {
  yAxis: 0.00001
}
var gui = new dat.GUI();
gui.add(params, "yAxis").onFinishChange(val => {
  cube.scale.y = val;
}); 

//we make sure to make it hidden
 let vis = gui.domElement.style.visibility;
 gui.domElement.style.visibility = vis == "" ? "hidden" : "";

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        //SET CAMERA
        camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
        camera.position.z = 5;

        // create a render and set the size
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor("#e5e5e5"); //background color
        renderer.setSize(window.innerWidth,window.innerHeight); //size of renderer

        
          

        //bind rendered to the dom element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);  

       
        //RAYCASTER
        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2(1,1);

        
        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00 }); //0xF7F7F7 = gray
        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.scale.y = 0.00001;
        cube.userData.originalColor = 0xffff00;

        // position the cube
        cube.position.x = 0;
        cube.position.y = 3;
        cube.position.z = 0;
        /*
        //USEFUL METHODS
        cube.rotation.x +=0.5
        cube.scale.x +=0.5
        */
        // add the cube to the scene
        scene.add(cube);
        

        /*  RENDERING A PLANE
        var geometry = new THREE.PlaneGeometry( 20, 20);
        var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
        var plane = new THREE.Mesh( geometry, material );
        plane.rotation.set(80,0,0);
        scene.add( plane );
        //plane.position.x = 2;
        */

        //ADDING LIGHTS
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

       
        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);


        //camera
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.minDistance = 1;
        controls.maxDistance = 1000;

        // when the mouse moves, call the given function
        document.addEventListener('mousemove', onDocumentMouseMove, false);

        //when the mouse is clicked, call the given function
        document.addEventListener('click', onDocumentMouseClick, false);
    }

    function onDocumentMouseMove(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 );

        //TRY THIS
        // intersects = raycaster.intersectObject(cube); // to get the cube only

        //if the mouse hovers over the cube mesh, change its color to red
        //when mouse leaves the mesh, change it back to its original color
        //ONLY MAKE THESE MODIFICATION IF THE MESH IS NOT CLICKED
        //BECAUSE IF IT IS CLICKED, YOU HAVE TO PAINT THE MESH ACCORDING TO THE onDocumentMouseClick()
        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            cube.material.color.set( 0xF7F7F7 );    
        } 
        else if (isClicked === false)
        {
            cube.material.color.set( cube.userData.originalColor );
        }

    }

    // 0xff0000 red
    //0xF7F7F7 = gray

    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( 0xff0000);

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

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

*/       

//when its clicked, change the visibily of the GUI
 vis = gui.domElement.style.visibility;
    gui.domElement.style.visibility = vis == "" ? "hidden" : "";
          
           
        } 
        //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 );
            //when its clicked, change the visibily of the GUI
            vis = gui.domElement.style.visibility;
            gui.domElement.style.visibility = vis == "" ? "hidden" : "";
   //         gui.__proto__.constructor.toggleHide()
            //dat.GUI.toggleHide();
            //gui.toggleHide()
        }


    }

    
    function render() 
    {
        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera( mouse, camera );
        renderer.render(scene, camera); //render the scene
    }


    function animate()
    {
        requestAnimationFrame( animate ); //pauses when user switches tab
        controls.update();
        render();
    }

body {
  margin: 0;
}
canvas {
  display: block;

}

BTW: Please always ensure to use three.js files from the same release. In your demo, three.js is from r110 whereas OrbitControls is from 101.1. Such configurations are not supported and can produce undefined behavior.

I cannot type in dat.gui in JSFiddle

Answers (1)

Related Questions