如何為Three.js中的init（）外部創建的網格設置動畫？

Question

我正在學習three.js，並且想了解如何為常規init（）之外的函數創建的網格設置動畫。

我可以在init（）內部創建一個多維數據集，並在animate（）內部旋轉它，但是如果該多維數據集是由init（）外部的函數創建的，則控制台會說未定義多維數據集。

這是一個簡單的示例： http : //jsfiddle.net/mattsparrer/yqbp5hx4/10/

function createCube(size) {
    var geometry = new THREE.CubeGeometry(size, size, size);
    var material = new THREE.MeshNormalMaterial();

    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    }

通過在Web上搜索，我了解“多維數據集”不在animate（）的范圍內，但是我找不到正確的方法。 請有人可以解釋走的路嗎？

Answer 1

這不是一個Three.js問題，而是一個JavaScript 變量范圍問題。

如果申報cube的內部變量init()函數，它將只提供內部init()而不是內部的render() 您必須在這兩個函數之外聲明它，以使其對兩個函數均可用。

錯誤：

function init(){
    // Declaring cube inside this function limits its scope
    var cube = new THREE.Mesh();
}

function render(){
    // Cube is not defined.
    // it's only available within the init() function.
    cube.rotation.y += 0.01;
}

console.log(cube); // Cube is also not defined out here.

---

正確：

// Declare cube in global scope so both functions can "see" this variable
var cube;

function init(){
    // Assigns value to existing cube var
    cube = new THREE.Mesh();
}

function render(){
    // cube is also available inside this function
    cube.rotation.y += 0.01;
}

console.log(cube); // No error, because cube exists out here too

有關變量范圍的更多示例，請參見此處： JavaScript中變量的范圍是什么？