Javascript JS库dat.gui不工作

我已尝试使dat.gui（）库正常工作。运行javascript时，我看到以下消息：

Uncaught TypeError: this.onResize is not a function
    at Object.GUI (GUI.js:429)
    at loadScene (main.js:21)
    at main.js:163

我不熟悉这个库，因为我只导入了它，所以我不知道我可能做错了什么。我尝试过使用缩小版，但返回相同的错误

这是我正在使用的JS代码：

function update(renderer, scene, camera)
{
//Make the renderer render the scene and the camera
renderer.render(
    scene,
    camera
);

//Calls itself each time the function is called upon using recursion
requestAnimationFrame(function()
{
    update(renderer, scene, camera);
})
}

function loadScene()
{
console.log("LOG: Program start");

//Create dat.gui instance
 var gui = dat.GUI();

//Create scene
var scene = new THREE.Scene();
//Create a fog effect in the scene
//scene.fog = createFog(0xffffff, 0.2);


//Create camera
var camera = new THREE.PerspectiveCamera(
    //Perspective
    45,
    //Ratio
    window.innerWidth/window.innerHeight,
    //Near clipping distance
    1,
    //Far clipping distance
    1000
);

//Set the camera position x,y,z
setCameraPosition(camera, 1, 2, 7);

//Create a box with width, depth and height
var box = createBox(1, 1, 1);
box.position.y = box.geometry.parameters.height/2;

//Create a square plane
var plane = createPlane(4);
plane.name = "plane-1";
rotateObject(plane, -90, 0, 0);

//Create a (point) light source
var pointLight = createLightSource(1, 1, 2, 2, gui);

//Create a sphere
 var sphere = createSphere(0.05);

scene.add(plane);
scene.add(box);
scene.add(pointLight);
pointLight.add(sphere);

//Create renderer
var renderer = new THREE.WebGLRenderer();
//Set renderer size
renderer.setSize(window.innerWidth*0.9, window.innerHeight*0.9);
renderer.setClearColor('gray');
//Get element by ID
document.getElementById('scene').appendChild(renderer.domElement);

//Update the renderer, scene and camera
update(renderer, scene, camera);

return scene;
}

function createFog(color, density)
{
return new THREE.FogExp2(color, density);
}

function createPlane(size)
{
var object = new THREE.PlaneGeometry(size, size);
var material = new THREE.MeshPhongMaterial
({
    color: 'gray',
    side: THREE.DoubleSide
});

var mesh = new THREE.Mesh(object, material);

console.log("LOG: Plane created");
return mesh;
}

function createBox(w, d, h)
{
    var object = new THREE.BoxGeometry(w, d, h);
var material = new THREE.MeshPhongMaterial
({
    color: 'gray'
});

var mesh = new THREE.Mesh(object, material);

console.log("LOG: Box created");
return mesh;
//scene.add(mesh);
}

function createSphere(radius)
{
var object = new THREE.SphereGeometry(radius, 24, 24);
var material = new THREE.MeshBasicMaterial
({
    color: 'white'
});

var mesh = new THREE.Mesh(object, material);

console.log("LOG: Box created");
return mesh;
//scene.add(mesh);
}

function createLightSource(intensity, x, y, z, gui)
{
var light = new THREE.PointLight('white', intensity)
light.position.x = x;
light.position.y = y;
light.position.z = z;

gui.add(light, 'intensity', 0, 10);

return light;
}

function setCameraPosition(camera, x, y, z)
{
//Set camera position
camera.position.x = x;
camera.position.y = y;
camera.position.z = z;

camera.lookAt(new THREE.Vector3(0, 0, 0));

console.log("LOG: Camera position set");
}

function rotateObject(object,degreeX=0, degreeY=0, degreeZ=0)
{
degreeX = (degreeX * Math.PI)/180;
degreeY = (degreeY * Math.PI)/180;
degreeZ = (degreeZ * Math.PI)/180;

object.rotateX(degreeX);
object.rotateY(degreeY);
object.rotateZ(degreeZ);
}

var scene = loadScene();

---

这是您希望遵循的设计模式：

功能更新（渲染器、场景、摄影机）{
//使渲染器渲染场景和摄影机
渲染器。渲染（场景、摄影机）；
//每次使用递归调用函数时调用自身
requestAnimationFrame（函数（）{
更新（渲染器、场景、摄影机）；
});
}
函数loadScene（）{
log（“日志：程序启动”）；
//创建dat.gui实例
var gui=new dat.gui（）；
//为gui的属性创建对象
变量guiProperties={}；
//创建场景
var scene=new THREE.scene（）；
//在场景中创建雾效果
//scene.fog=createFog（0xffffff，0.2）；
//创建摄影机
var摄像机=新的三视角摄像机(
//透视图
45,
//比例
window.innerWidth/window.innerHeight，
//近剪裁距离
1.
//远削波距离
1000
);
//设置相机位置x、y、z
设置摄像机位置（摄像机，1,2,7）；
//创建具有宽度、深度和高度的长方体
var-box=createBox（1,1,1）；
box.position.y=box.geometry.parameters.height/2；
//创建一个正方形平面
变量平面=创建平面（4）；
plane.name=“plane-1”；
旋转对象（平面，-90,0,0）；
//创建（点）光源
var pointLight=createLightSource（1,1,2,2，gui，gui属性）；
//创建一个球体
var-sphere=createSphere（0.05）；
场景。添加（平面）；
场景。添加（框）；
场景。添加（点光源）；
点光源。添加（球体）；
//创建渲染器
var renderer=new THREE.WebGLRenderer（）；
//设置渲染器大小
renderer.setSize（window.innerWidth*0.9，window.innerHeight*0.9）；
渲染器。setClearColor（“灰色”）；
//按ID获取元素
document.getElementById（“场景”）.appendChild（renderer.doElement）；
//更新渲染器、场景和摄影机
更新（渲染器、场景、摄影机）；
返回场景；
}
函数createFog（颜色、密度）{
返回新的3.FogExp2（颜色、密度）；
}
函数createPlane（大小）{
var对象=新的三个平面几何体（大小、大小）；
var材质=新的3.0网格材质({
颜色：“灰色”，
侧面：三个。双面
});
var mesh=新的三个网格（对象、材质）；
console.log（“日志：创建的平面”）；
回流网；
}
函数createBox（w、d、h）{
var对象=新的三箱几何体（w、d、h）；
var材质=新的3.0网格材质({
颜色：“灰色”
});
var mesh=新的三个网格（对象、材质）；
console.log（“log:Box已创建”）；
回流网；
//场景。添加（网格）；
}
函数createSphere（半径）{
var对象=新的三个。球度法（半径，24，24）；
var材料=新的三网格基本材料({
颜色：“白色”
});
var mesh=新的三个网格（对象、材质）；
console.log（“log:Box已创建”）；
回流网；
//场景。添加（网格）；
}
函数createLightSource（强度、x、y、z、gui、gui属性）{
var灯光=新的三点灯光（“白色”，强度）；
灯光位置x=x；
灯光位置y=y；
灯光位置z=z；
属性[“强度”]=强度；
add（guiProperties，“intensity”，0，10）.onChange（函数（值）{light.intensity=value；}）
返回灯；
}
功能设置摄像机位置（摄像机，x，y，z）{
//设置摄像机位置
摄像机位置x=x；
camera.position.y=y；
camera.position.z=z；
摄影机。注视（新的三个向量3（0，0，0））；
控制台日志（“日志：摄像机位置设置”）；
}
函数旋转对象（对象，degreeX=0，degreeY=0，degreeZ=0）{
degreeX=degreeX*Math.PI/180；
degreeY=degreeY*Math.PI/180；
degreeZ=degreeZ*Math.PI/180；
对象。旋转度（度）；
对象。旋转（度）；
对象旋转（degreeZ）；
}
var scene=loadScene（）；

我也有同样的问题。dat.GUI必须用new关键字实例化

var gui=dat.gui（）；

应该是

var gui=new dat.gui（）；

这为我解决了问题

<html>
    <head>
        <meta charset=utf-8>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js"></script>     
    </head>
    <body>
    <div id="scene"></div>

    <script>

        function update(renderer, scene, camera) {
          //Make the renderer render the scene and the camera
          renderer.render(scene, camera);

          //Calls itself each time the function is called upon using recursion
          requestAnimationFrame(function() {
            update(renderer, scene, camera);
          });
        }

        function loadScene() {
          console.log("LOG: Program start");

          //Create dat.gui instance
          var gui = new dat.GUI();

          //Create object for gui's properties
          var guiProperties = {};

          //Create scene
          var scene = new THREE.Scene();
          //Create a fog effect in the scene
          //scene.fog = createFog(0xffffff, 0.2);

          //Create camera
          var camera = new THREE.PerspectiveCamera(
            //Perspective
            45,
            //Ratio
            window.innerWidth / window.innerHeight,
            //Near clipping distance
            1,
            //Far clipping distance
            1000
          );

          //Set the camera position x,y,z
          setCameraPosition(camera, 1, 2, 7);

          //Create a box with width, depth and height
          var box = createBox(1, 1, 1);
          box.position.y = box.geometry.parameters.height / 2;

          //Create a square plane
          var plane = createPlane(4);
          plane.name = "plane-1";
          rotateObject(plane, -90, 0, 0);

          //Create a (point) light source
          var pointLight = createLightSource(1, 1, 2, 2, gui,guiProperties);

          //Create a sphere
          var sphere = createSphere(0.05);

          scene.add(plane);
          scene.add(box);
          scene.add(pointLight);
          pointLight.add(sphere);

          //Create renderer
          var renderer = new THREE.WebGLRenderer();
          //Set renderer size
          renderer.setSize(window.innerWidth * 0.9, window.innerHeight * 0.9);
          renderer.setClearColor("gray");
          //Get element by ID
          document.getElementById("scene").appendChild(renderer.domElement);

          //Update the renderer, scene and camera
          update(renderer, scene, camera);

          return scene;
        }

        function createFog(color, density) {
          return new THREE.FogExp2(color, density);
        }

        function createPlane(size) {
          var object = new THREE.PlaneGeometry(size, size);
          var material = new THREE.MeshPhongMaterial({
            color: "gray",
            side: THREE.DoubleSide
          });

          var mesh = new THREE.Mesh(object, material);

          console.log("LOG: Plane created");
          return mesh;
        }

        function createBox(w, d, h) {
          var object = new THREE.BoxGeometry(w, d, h);
          var material = new THREE.MeshPhongMaterial({
            color: "gray"
          });

          var mesh = new THREE.Mesh(object, material);

          console.log("LOG: Box created");
          return mesh;
          //scene.add(mesh);
        }

        function createSphere(radius) {
          var object = new THREE.SphereGeometry(radius, 24, 24);
          var material = new THREE.MeshBasicMaterial({
            color: "white"
          });

          var mesh = new THREE.Mesh(object, material);

          console.log("LOG: Box created");
          return mesh;
          //scene.add(mesh);
        }

        function createLightSource(intensity, x, y, z, gui,guiProperties) {
          var light = new THREE.PointLight("white", intensity);
          light.position.x = x;
          light.position.y = y;
          light.position.z = z;

          guiProperties["intensity"] = intensity;

          gui.add(guiProperties, "intensity", 0, 10).onChange(function (value){light.intensity = value;  } )

          return light;
        }

        function setCameraPosition(camera, x, y, z) {
          //Set camera position
          camera.position.x = x;
          camera.position.y = y;
          camera.position.z = z;

          camera.lookAt(new THREE.Vector3(0, 0, 0));

          console.log("LOG: Camera position set");
        }

        function rotateObject(object, degreeX = 0, degreeY = 0, degreeZ = 0) {
          degreeX = degreeX * Math.PI / 180;
          degreeY = degreeY * Math.PI / 180;
          degreeZ = degreeZ * Math.PI / 180;

          object.rotateX(degreeX);
          object.rotateY(degreeY);
          object.rotateZ(degreeZ);
        }

        var scene = loadScene();



        </script>
    </body>
</html>