无法在 Three.js 中初始化 dat.GUI

Question

当我运行我的代码时，我在这一行收到以下错误：

var gui = new dat.GUI();

错误：无法获取 'getItem' 属性空引用或未定义。

我导入了这个库，我不知道哪里出了问题，这是我的代码：

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

Answer 1

解决方案：不要使用 Internet Explorer，我运行在 Firefox 中使用相同的代码就可以了。

Answer 2

按照以下步骤操作

首先关闭现有项目并打开一个新文件夹。然后通过 {cd [path]}

转到终端中的这个文件夹位置

运行这个命令： 1.https://github.com/designcourse/threejs-webpack-starter.git 2.npm 安装

3.npm 运行开发 4.npm 运行构建

在第 3 次执行后，您可能会遇到一些尝试忽略的警告，或者如果您看到一些致命问题，那么运行

npm 审核修复还没解决....运行..
npm audit fix --force [如果需要，可以多花点时间]

在运行ning no.3 如果你打开浏览器那么一切都很好。您可以 dat.gui 安装在您的文件夹中，只需根据需要自定义即可。您将在新创建的文件夹中找到所有必需的文件。

无法在 Three.js 中初始化 dat.GUI

Cannot initialize dat.GUI in Three.js

javascript

three.js

dat.gui