Cannot initialize dat.GUI in Three.js

Question

When i run my code, i get the following error in this line:

var gui = new dat.GUI();

error: Unable to get the 'getItem' property null reference or undefined.

I imported the library, i don't know what is wrong, here is my code:

<html>
    <head>
        <title>Stack Overflow</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/three.min.js"></script>
        <script src="js/optimer_regular.typeface.js"></script>
        <script src="js/TrackballControls.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/threex.dynamictexture.js"></script>
        <script src="js/dat.gui.min.js"></script>
        <script>
            //Basic Three components
            var scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000 );
            //position camera
            camera.position.z = 700;
            //Set camera controls
            var controls = new THREE.TrackballControls( camera );
            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            //Set the renderer
            var renderer = new THREE.WebGLRenderer( { antialias: false } );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );


            //Set the lights
            var light;
            scene.add( new THREE.AmbientLight( 0x404040 ) );

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 0, 1, 1 );
            scene.add( light );

            //Let's add a cute cube
            var object;
            var map = THREE.ImageUtils.loadTexture( 'images/UV_Grid_Sm.jpg' );
            map.wrapS = map.wrapT = THREE.RepeatWrapping;
        map.anisotropy = 16;

            var material = new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } );

            object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ), material );
            object.position.set( 400, 20, 50 );
            scene.add( object );

            //Let's add a GUI
            var API = {
                'show model'    : true,
                'show skeleton' : false
            };

            var gui = new dat.GUI();



            function animate() {
                 requestAnimationFrame( animate );
                 render();
            }


            //Render scene
            function render() {
                controls.update();
                renderer.render( scene, camera );
            }


            animate();
        </script>
    </body>
</html>

Need more information, looks like some other part of your code is causing the issue, not the code you posted. — Flux, Jan 26 '15 at 19:33
Hi Flux, i posted my entire code, could you take a look? Thanks! — Jose Miguel Vega Lopez, Jan 27 '15 at 15:58
Hi everyone! i solved the issue running my app with Firefox (i was using IE11) — Jose Miguel Vega Lopez, Jan 27 '15 at 18:56
Good to keep in mind... beware, even the DAT.gui examples fail completely in IE11/Edge. Blank page, JavaScript errors apparently thrown from the browser-detection function itself (in dat/utils/System). So... IE support doesn't seem to be a priority. https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage — Jonathan Lidbeck, Apr 14 '17 at 20:21

score 1 · Accepted Answer · answered Jan 30 '15 at 15:37

1

Solution: Don't use Internet Explorer, i run the same code in Firefox and it works.

answered Jan 30 '15 at 15:37

Jose Miguel Vega Lopez

111
13

score 0 · Answer 2 · answered Jun 19 '21 at 16:24

Follow this steps

First Close your existing project and open a new folder. then go to this folder location in terminal by {cd [path]}

Run this commands: 1.https://github.com/designcourse/threejs-webpack-starter.git 2.npm install

3.npm run dev 4.npm run build

after no.3 execution you may face some warnings try to ignore or if you see some fatal issues then run

npm audit fix not solved yet ....run..
npm audit fix --force [couple of time if need]

after running no.3 if you browser opens then all is fine. you can dat.gui is installed in your folder just use it customize as you want. you will find all the required files in your newly created folder.

Cannot initialize dat.GUI in Three.js

2 Answers2