Comment charger des modèles 3D en spécifiant le contenu du fichier plutôt que le chemin d'accès dans three.js?

Question

Je souhaite créer un visualiseur en ligne dans lequel un utilisateur peut télécharger des modèles et les afficher, plutôt que d'avoir à modifier le chemin dans le code source. Étant donné que les navigateurs ne permettent pas de récupérer le chemin du fichier mais que je peux lire le contenu du fichier, comment charger un modèle (obj, ply, mtl etc) étant donné le contenu du fichier?

Answer 1

Il existe plusieurs façons de le faire, mais si vous allez dans le référentiel github three.js, dans les exemples, vous verrez un chargeur d'obj. Il y a des exemples avec mtl, stl, Collada, etc.

http://threejs.org/examples/webgl_loader_obj.html

Le référentiel a le dossier des exemples qui a un dossier js avec tous les exemples de chargeurs:

https://github.com/mrdoob/three.js/tree/master/examples/js/loaders

Si vous voulez pour renverser le chargeur interne trois, chaque exemple de chargeur a une méthode d'analyse (texte).

Answer 2

Eh bien, juste découvert que l'éditeur en ligne three.js fait @http://threejs.org/editor/.

Fichier -> Importer.

Answer 3

Vous pouvez utiliser the HTML5 filereader API et ensuite vous pouvez appeler la méthode d'analyse à partir du chargeur correspondant directement avec le résultat.

Ou vous pouvez utiliser le lecteur de fichiers, lire le fichier dans une URL de données et charger l'URL de données au lieu de votre URL normale.

code HTML permettant à l'utilisateur de charger le fichier modèle

<h1>Model File Reader</h1> 
<div> 
    Select a model file: 
    <input type="file" id="fileInput"> 
</div> 

code Javascript pour gérer l'événement onload:

window.onload = function() { 
    var fileInput = document.getElementById('fileInput'); 

    fileInput.addEventListener('change', function(e) { 

     // file selection is done you can now read the file 
     var file = this.files[0]; 

     // set your file encoding 
     var encoding = 'ISO-8859-1'; 

     // create a file reader 
     var reader = new FileReader(); 

     // set on load handler for reader 
     reader.onload = function(e) { 
      var result = reader.result; 

      // parse using your corresponding loader 
      loader.parse(result); 
     } 

     // read the file as text using the reader 
     reader.readAsText(file, encoding); 

    }); 
} 

Vérifiez here pour plus d'informations sur la classe de lecteur de fichiers