錯誤：cubeMaterial未定義javascript

Question

我有一個javascript問題。 它讓我發現，我在標題寫的行錯誤：

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

我能不明白的地方，我錯了。我是初學者。

我試圖聲明變量「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); 

Answer 1

這是一個範圍問題！當您在createSphere函數內部聲明cubeMaterial時，它將只存在於該函數內。

在函數之外的代碼頂部聲明的變量（例如行var scene,camera,renderer;）將存在於所有內部函數中。

這有道理嗎？所以你所要做的就是確保你在正確的範圍內聲明cubeMaterial。嘗試將它放在場景聲明旁邊的頂部。