Question

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

var gui = new dat.GUI();

错误：无法获得＆＃39; getItem＆＃39; property null reference or undefined。

我导入了图书馆，我不知道出了什么问题，这是我的代码：

<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 审计修复 --force [如果需要，可以使用几次]

运行 3 号后，如果浏览器打开，则一切正常。您可以将 dat.gui 安装在您的文件夹中，只需根据需要自定义即可。您将在新创建的文件夹中找到所有必需的文件。

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

2 个答案: