0

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

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

2 回答 2

0

解决方案：不要使用 Internet Explorer，我在 Firefox 中运行相同的代码并且它可以工作。

于 2015-01-30T15:37:57.853 回答
0

按照这个步骤

首先关闭您现有的项目并打开一个新文件夹。然后通过 {cd [path]} 转到终端中的此文件夹位置

运行以下命令： 1.https://github.com/designcourse/threejs-webpack-starter.git 2.npm install

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

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

  1. npm 审计修复尚未解决....运行..

  2. npm audit fix --force [如果需要几次]

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

于 2021-06-19T16:24:58.690 回答