THREE.js: Message d'erreur "THREE.OBJLoader n'est pas un constructeur"

Question

J'apprends juste l'utilisation de three.js. Cela semble très bien, mais maintenant j'ai un problème que je ne peux pas résoudre.

Je veux charger un fichier OBJ que j'ai créé auparavant dans Blender. Pour ce faire, j'essaie d'utiliser le THREE.OBJloader. J'ai copié le code de http://mamboleoo.be/learnThree/ , mais j'obtiens le message d'erreur "THREE.OBJLoader n'est pas un constructeur" à la ligne 32.

Tout le reste fonctionne bien: ajouter une scène, ajouter un matériau, ajouter un cube, etc.

Pour vous faciliter la tâche, voici le code:

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

J'espère que quelqu'un a une idée d'où cela pourrait venir.

Cordialement, Christian

Answer 1

Lorsque vous copiez à partir d'exemples Codepen, accédez toujours au stylet et vérifiez sous les "Paramètres" pour voir tous les autres fichiers utilisés dans le projet.

Dans votre cas, l'auteur utilise OBJLoader.js et c'est de là que vient le constructeur OBJLoader et vous n'avez aucune référence à cela. Par conséquent, vous obtenez l'erreur. Incluez la référence et cela devrait fonctionner.

Answer 2

import OBJLoader - importez {OBJLoader} depuis './jsm/loaders/OBJLoader.js';