Node.js Girl
  1. Node.js Girl
  3. Three.TextureLoader ne charge pas de fichiers images
Intereting Posts
NodeJS: Confusion au sujet de “readdir” et de “stat” async Utilisation de async / wait + Bluebird pour promisifyAll socket.io récupère les salles dans lesquelles se trouve la prise nodejs webserver “indéfini n’est pas une fonction” Comment reformater le code JavaScript dans WebStorm? comment utiliser Promise avec express dans node.js? Node.js – Appels de requête d’API dépendants utilisant async.waterfall et fusion de la réponse JSON avec underscore.extend But de la sérialisation / désérialisation des utilisateurs dans une session lors de l’utilisation de PassportJS? Socket.io node.js, comment enregistrer les temps de connexion à éviter ou compte pour l’actualisation de page / plusieurs sockets? Erreur lors de la connexion à la firebase database – nodejs et mongodb Existe-t-il des outils de minification CSS agressifs? imagemagick avec nodejs ne fonctionne pas L’écriture sur S3 (aws-sdk nodeJS) est-elle en conflit avec la liste des objects dans un compartiment? le regroupement a échoué: Erreur: le plug-in 0 a fourni une propriété non valide de “default” Est-il possible de déclarer des variables globales dans Node / Express 4.0

Three.TextureLoader ne charge pas de fichiers images

Donc, je bricole avec THREE et Node depuis un moment, et jusqu’à maintenant, j’ai chargé des textures en utilisant la classe TextureLoader comme suit: 

var loader = new THREE.TextureLoader; loader.crossOrigin = ''; function createSphere ( radius , segments , rings ) { var geometry = new THREE.SphereGeometry(radius , segments , rings); var material = new THREE.MeshPhongMaterial({ map: loader.load('./images/...'), bumpMap: loader.load('./images/...'), ect... }); return new THREE.Mesh ( geometry, material ) }

Cela fonctionnait bien, puis j’ai décidé qu’au lieu de charger les textures lors de la création du matériau, je voudrais pré-charger toutes mes textures. J’ai donc créé un petit utilitaire pour faire exactement cela: 

 var loader = new THREE.TextureLoader; loader.crossOrigin = ''; var textureMap = { earthTex : {file : 'earth_no_ice_clouds.jpg', message : 'Loading Global Land Masses'}, earthBumpTex : {file : 'earth_bump.jpg', message : 'Loading Global Depth'}, earthSpecTex : {file : 'earth_specular.png', message : 'Loading Water'}, earthCloudTex : {file : 'earth_clouds.png', message : 'Loading Clouds'}, earthCultureTex : {file : 'earth_cultural.png', message :'Loading Country Borders'}, earthLookUpTex : {file : 'earth_lookup.jpg', message :'Loading Country Projections'}, moonTex : {file : 'moon.jpg', message :'Loading Lunar Surface'}, moonBumpTex : {file : 'moon_bump.jpg', message : 'Loading Lunar Depth'}, skyDomeTex : {file : 'galaxy_3.png', message : 'Loading Galaxy'} }; Object.size = function(obj) { var size = 0, key; for (key in obj) { if (obj.hasOwnProperty(key)) size++; } return size; } function loadTextures( ) { var path = "./images/"; var size = Object.size(textureMap); var count = 0; for(var key in textureMap) { var textureItem = textureMap[key]; var texture = loader.load(path + textureItem.file); console.log(texture); } } loadTextures();

Chaque fois que j’exécute cette opération dans mon navigateur (Chrome) avec les outils de développement ouverts, l’object THREE.texture qui finit par être enregistré a sa propriété image définie sur “non définie” et sa propriété src sur “”. Je ne comprends pas pourquoi cela se produit et je n’ai changé aucun des chemins pour mes fichiers .png ou .jpg, ni l’emplacement du fichier dans lequel j’utilise le TextureLoader.

Lorsque j’essaie d’exécuter le premier extrait de code en haut, l’erreur se produit également et maintenant, il semble impossible de charger des textures dans mon application.

Toute aide pour comprendre pourquoi cela est arrivé tout à coup serait grandement appréciée.

MODIFIER

J’ai édité le premier bloc de code pour tenter de clarifier mon problème. Je n’utilisais pas de promesses, de rappels ou quoi que ce soit du genre auparavant. J’appelais simplement ma fonction ‘createSphere’ et des fonctions similaires à partir de ma fonction d’initialisation de la scène. Auparavant, cela fonctionnait bien et je n’avais aucun problème à charger les textures.

Maintenant, en utilisant la même structure de programme que précédemment, le premier bloc de code ne fonctionne pas.

Vous ne l’appelez pas correctement. TextureLoader.load() retourne immédiatement (avec un object THREE.Texture vide, qui doit encore être THREE.Texture … il est THREE.Texture uniquement lorsque la demande est terminée) et n’attend pas que l’image soit chargée.

Au lieu de cela, comme vous pouvez le lire dans sa documentation , vous pouvez l’alimenter avec des méthodes de rappel qui seront appelées une fois le chargement terminé, terminé ou en cours.

En prenant l’exemple de la documentation: 

 // instantiate a loader var loader = new THREE.TextureLoader(); // load a resource loader.load( // resource URL 'textures/land_ocean_ice_cloud_2048.jpg', // Function when resource is loaded function ( texture ) { // do something with the texture var material = new THREE.MeshBasicMaterial( { map: texture } ); }, // Function called when download progresses function ( xhr ) { console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); }, // Function called when download errors function ( xhr ) { console.log( 'An error happened' ); } );

Si vous voulez attendre que toutes les textures soient chargées, ça va devenir plus compliqué. Une solution consiste à utiliser Promises. Voici une réponse à une question très similaire que j’ai déjà posée: existe-t-il un moyen d’attendre que THREE.TextureLoader.load () se termine?