Question

我试图让dat.gui（https://github.com/dataarts/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();

Answer 1

这是您要遵循的设计模式：https://codepen.io/ubermario/pen/OEadOa?editors=1010

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

Answer 2

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

var gui = dat.GUI(); 应该 var gui = new dat.GUI();

这为我解决了问题。

JS Library dat.gui不能正常工作

2 个答案: