如何为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中变量的范围是什么？