TREE.js:Errormessage" THREE.OBJLoader不是构造函数"

时间:2016-02-23 18:29:31

标签: javascript three.js

我只是在学习使用three.js。这似乎很好,但现在我遇到了一个问题,我无法解决。

我想加载一个我以前在blender中创建的OBJ文件。为此,我尝试使用THREE.OBJloader。 我从http://mamboleoo.be/learnThree/复制了代码,但是我得到了错误消息" THREE.OBJLoader不是构造函数"在第32行。

其他一切正常:添加场景,添加素材,添加立方体等。

为了方便起见,这是代码:

var renderer, scene, camera, banana;
var ww = window.innerWidth,
wh = window.innerHeight;

function init(){

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

scene = new THREE.Scene();

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

//Load the obj file
loadOBJ();
}

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', addBananaInScene);

};

var addBananaInScene = 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();
    }
});
//Add the 3D object in the scene
scene.add(banana);
render();
};


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

//Turn the banana
banana.rotation.z += .01;

renderer.render(scene, camera);
};

init();

我希望,有人有一个想法,这可能来自哪里。

此致,基督徒

3 个答案:

答案 0 :(得分:11)

当您从Codepen示例进行复制时,请务必转到笔,然后在“设置”下查看。查看项目中使用的任何其他文件。

在您的情况下,作者正在使用OBJLoader.js以及OBJLoader构造函数来自的地方,并且您没有引用它。因此,您收到错误。包括参考,它应该工作。

答案 1 :(得分:0)

导入OBJLoader -从'./jsm/loaders/OBJLoader.js'导入{OBJLoader};

enter image description here

答案 2 :(得分:-1)

好答案。 尽管有一个想法...在该.js文件中,没有引用该版本,并且这些更改就像过山车一样,每天都弃用功能(例如,在我认为v71左右之前,投影机还可以吗? ) three.js项目的向后兼容性存在很多问题,并且缺少针对.js文件的有组织的存储库