错误：cubeMaterial未定义javascript

I have a problem with javascript . it shows me the error that I wrote in the title to the line:

我的javascript有问题。它向我展示了我在行标题中写的错误:

this.color = cubeMaterial.color.getHex();

this.color = cubeMaterial.color.getHex();

I can not understand where I'm wrong. I am beginner.

我无法理解我错在哪里。我是初学者。

I tried to declare the variable "var cubeMaterial;" outside function "createCube" but it gives the error " Can not read property ' color' of undefined " Thanks!

我试图声明变量“var cubeMaterial;”外部函数“createCube”,但它给出错误“无法读取未定义的属性'颜色”谢谢!

    var scene,camera,renderer;

    function createScene() {
    // create a scene, that will hold all our elements such as objects,cameras and lights.

    scene = new THREE.Scene();

    //screate a camera, which defines where we're looking at

    camera = new THREE.PerspectiveCamera(45, window.innerWidth/ window.innerHeight, 0.1, 1000);
    camera.updateProjectionMatrix();

    //position and point the camera to the center of the scene

    camera.position.x=-30;
    camera.position.y=40;
    camera.position.z=30;
    camera.lookAt(scene.position);

    // create a render and set the size

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor(new THREE.Color(0xEEEEcE));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    //add the output of the renderer to the html element

     document.body.appendChild( renderer.domElement );
     }

    var ambientLight,spotLight;

    function createLights(){
    ambientLight = new THREE.AmbientLight(0x0c0c0c);

    //add spotlight for the shadow

    spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40,60,-10);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize.width = 1024;
    spotLight.shadow.mapSize.height = 1024;
    scene.add(ambientLight);
    scene.add(spotLight);
    }

    var cube,sphere,plane;

    function createPlane(){
    // create a plane

    var planeGeometry = new THREE.PlaneGeometry(60,40,11);
    var planeMaterial = new THREE.MeshLambertMaterial({color:0Xcccccc });
    plane= new THREE.Mesh(planeGeometry,planeMaterial);

    //rotate and position the plane

    plane.rotation.x= -0.5*Math.PI;
    plane.position.x= 15;
    plane.position.y= 0;
    plane.position.z=0;
    plane.receiveShadow = true;

    //add the plane to the scene

    scene.add(plane);
    }

   function createCube(){
   //create a cube

    var cubeGeometry = new THREE.CubeGeometry( 5, 5, 5 );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00,                  transparent:true} );
    cube = new THREE.Mesh( cubeGeometry, cubeMaterial );

    //position the cube

    cube.position.x = -4;
    cube.position.y = 3;
    cube.position.z =0;
    cube.castShadow= true;

    //add cube to the scene

    cube.name = "cube"
    scene.add(cube);

    }

    function createSphere(){
    //create a sphere

    var sphereGeometry= new THREE.SphereGeometry(4,20,20);
    var sphereMaterial= new THREE.MeshLambertMaterial({color: 0x7777ff});
    sphere= new THREE.Mesh(sphereGeometry,sphereMaterial);

    //position the sphere

    sphere.position.x=20;
    sphere.position.y=0;
    sphere.position.z=2;
    sphere.castShadow = true;

    //add the sphere ti the scene

    scene.add(sphere);
    }


     var controls = new function() {

        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
        this.opacity= 0.6;
        this.color = cubeMaterial.color.getHex();
        }

       function addControlGui(controlObject){

        var gui = new dat.GUI();
        gui.add(controlObject, 'rotationSpeed',0,0.5);
        gui.add(controlObject, 'bouncingSpeed',0,0.5);
        gui.add(controlObject,"opacity", 0.1, 1 );
        gui.add(controlObject,"color");

        }

         var step = 0;

        function render(){
      //rotate the cube aroun its axes

     cube.rotation.x += controls.rotationSpeed;
    cube.rotation.y += controls.rotationSpeed;
    cube.rotation.z += controls.rotationSpeed;

    scene.getObjectByName("cube").material.opacity= controls.opacity;
    scene.getObjectByName("cube").material.color = new   THREE.Color(controls.color);

    //bounce the sphere up and down

    step+=controls.bouncingSpeed;
    sphere.position.x= 20+(10*(Math.cos(step+=0.01)));
    sphere.position.y = 2 +( 10*Math.abs(Math.sin(step+=0.03)));

    requestAnimationFrame(render);
    renderer.render(scene,camera);

    //render using requestAnimationFrame
     }


    function init(){

    createScene();

    createLights();

    createPlane();

    createCube();

    createSphere();

    addControlGui(controls); 

    render();
    }

    window.addEventListener('load', init, false);

1 个解决方案

#1

This is a scope problem! When you declare cubeMaterial inside the createSphere function, it will only exist inside that function.

这是范围问题!在createSphere函数中声明cubeMaterial时,它只存在于该函数内部。

Variables declared at the top of the code, outside of the functions, such as on the line var scene,camera,renderer; will exist in all the inner functions.

在代码顶部声明的变量,在函数之外,例如在行var场景,相机,渲染器上;将存在于所有内在功能中。

Does that make sense? So all you have to do is make sure you declare the cubeMaterial in the right scope. Try putting it at the top next to the scene declaration.

那有意义吗?因此,您所要做的就是确保在正确的范围内声明cubeMaterial。尝试将它放在场景声明旁边的顶部。

#1