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);
    }

通过网络搜索我理解＆＃34; cube＆＃34;不在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

有关变量范围的更多示例，请参见此处：What is the scope of variables in JavaScript?

如何在three.js中为init（）外部创建的网格设置动画？

1 个答案: