THREE.FileLoader不是构造函数(...)

时间:2016-11-13 13:41:10

标签: javascript three.js

我正在尝试将模型加载到我的场景中。

我已将这些文件包含在项目的顶部:

     <script src="js/build/three.min.js"></script>
     <script src="js/loaders/OBJLoader.js"></script>

这是我的代码

    var loader = new THREE.OBJLoader();
    loader.load( "res/rose/ModelsAndTextures/rose.obj", function ( object ) {
      scene.add( object );
    } );

但是我收到错误:OBJLoader.js:46 Uncaught TypeError:THREE.FileLoader不是构造函数(...)

我查看了OBJLoader.js文件并查找了THREE.FileLoader - 这是错误所在的行:

           var loader = new THREE.FileLoader( scope.manager );

其他人的这种工作的例子很好

2 个答案:

答案 0 :(得分:0)

查看您是否使用right OBJLoader.js

看一个示例,说明如何正确使用此对象:

var scene = new THREE.Scene();
var renderer, camera, banana;

var ww = window.innerWidth,
  wh = window.innerHeight;

renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById('scene')
});
renderer.setSize(ww, wh);

camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
camera.position.set(0, 0, 500);
scene.add(camera);

//Add a light in the scene
directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(0, 0, 350);
directionalLight.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(directionalLight);

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

  banana.rotation.z += .01;

  renderer.render(scene, camera);
};

var loadOBJ = function() {
  //Manager from ThreeJs to track a loader and its status
  var manager = new THREE.LoadingManager();
  //Loader for Obj from Three.js
  var loader = new THREE.OBJLoader(manager);

  //Launch loading of the obj file, addBananaInScene is the callback when it's ready 
  loader.load('http://mamboleoo.be/learnThree/demos/banana.obj', function(object) {
    banana = object;
    //Move the banana in the scene
    banana.rotation.x = Math.PI / 2;
    banana.position.y = -200;
    banana.position.z = 50;
    //Go through all children of the loaded object and search for a Mesh
    object.traverse(function(child) {
      //This allow us to check if the children is an instance of the Mesh constructor
      if (child instanceof THREE.Mesh) {
        child.material.color = new THREE.Color(0X00FF00);
        //Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
        child.geometry.computeVertexNormals();
      }
    });
    
    scene.add(banana);
    render();
  });
};

loadOBJ();
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="http://mamboleoo.be/learnThree/demos/OBJLoader.js"></script>

<canvas id="scene"></canvas>

答案 1 :(得分:0)

我遇到了这个问题并意识到我使用了旧版本的three.js文件。我用three.js下载的build文件夹中的three.js替换了它,我从中获取了OBJLoader。