如何在另一个文件中的一个js文件中使用变量？

Question

我有Three.js的基本立方体场景

现在，我想让相机随着Perlin噪声移动。 因此，我下载了此Perlin噪声库，并将其粘贴到其他库旁边：

https://github.com/josephg/noisejs

我还链接在html中添加了脚本：

<script src="three.min.js"></script>  
<script src="my-three.js"></script>  
<script src="perlin.js"></script> 

然后，我想使用噪音，因此我在perlin.js文件的末尾创建了一个变量，如下所示：

var ruido = noise.simplex3(10, 10, 1);

最后一步是在相机中使用此变量，因此在我的“ my-three.js”文件中添加了以下行：

camera.position.z = ruido;

但是我得到了：

未被捕获的ReferenceError：未定义ruido

不知何故该变量未在“ my-three.js”文件中接收。

完整的“ my-three.js”文件为：

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = ruido;

  var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.001;
    cube.rotation.y += 0.001;

    renderer.render(scene, camera);
  };

  render();

提前致谢。

Answer 1

您应该在my-three.js文件之前包括perlin.js文件，因为my-three.js取决于perlin.js文件。

<script src="perlin.js"></script> 
<script src="my-three.js"></script>  

Answer 2

您可以使用AMD（异步模块定义）方法和实现它的库。

https://github.com/amdjs/amdjs-api/blob/master/AMD.md

它通过变量，模块，其依存关系等解决了这一问题以及许多类似的问题。