Question

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

现在我希望相机随着柏林噪音移动。所以我下载了这个Perlin噪声库并将其粘贴到其他库旁边：

我还链接在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);

最后一步是在相机中使用这个变量，所以在我的＆＃34; my-three.js＆＃34;文件我添加了这一行：

camera.position.z = ruido;

但我得到了：

未捕获的ReferenceError：未定义ruido

不知何故，变量没有被接收到＆＃34; my-three.js＆＃34;文件。

完整的＆＃34; my-three.js＆＃34;文件是：

  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

它解决了变量，模块及其依赖性等的这个和许多类似的问题。

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

2 个答案: