Import and Showcase Collada Models with Textures using Three.js and file inputs

Question

Import and Showcase Collada Models with Textures using Three.js and file inputs

Currently, I am faced with a challenge involving loading a Collada file along with textures from file inputs. Specifically, I have set up 2 inputs, one for the geometry (.dae) file, and another for textures (.png/.jpg). When these file inputs change, two separate functions are triggered:

loadCollada(): This function utilizes THREE.ColladaLoader to load the geometry file and stores it in a global variable named loadedCollada
loadTextures(): This function uses THREE.TextureLoader to load the textures and stores them in a global variable named loadedTextures

Once these functions have done their job, a third function, loadModel() is executed. While I have managed to get the model to display, the textures are not correctly applied and if the model's up axis is not Y_UP, it is displayed at the wrong angle. Here is an outline of what loadModel() entails:

Geometries are extracted from the loadedCollada variable and stored in an array called geometries
The geometries in the array are combined into a single geometry (THREE.Geometry) using the THREE.GeometryUtils.merge() function
A final mesh is created from the single geometry and textures stored in loadedTextures
The model is then placed into the scene

I would greatly appreciate any assistance on this matter as I have been struggling to find a solution for quite some time. While it would be easier if I didn't have to rely on loading Collada files from the user's machine, it is necessary for the project to work with file inputs. Thank you for any help provided :)

javascript three.js geometry textures collada

Answer 1

Answer №1

Lately, I've been working on a similar project involving OBJ+MTL files uploaded by users.

This new feature in three.js (r88) https://github.com/mrdoob/three.js/pull/11259 lets you specify resource URLs (pulled from uploaded files).

I came across this example https://github.com/mrdoob/three.js/pull/12591 that guided me in loading OBJ+MTL files. It should work for various model loaders as long as they utilize the loadingManager. This approach streamlines selecting both the model and textures simultaneously with just one file input (including drag and drop functionality).

So, I created a fiddle based on the above collada format example: https://jsfiddle.net/Lhrvna7a/45/

The key segments are highlighted below:

$('.inputfile').change(function (e) {

var files = e.currentTarget.files;
var dae_path;

var extraFiles = {}, file;
for (var i = 0; i < files.length; i++) {
  file = files[i];
  extraFiles[file.name] = file;

  //Filename ends in .dae/.DAE
  if (files[i].name.match(/\w*.dae\b/i)) {
    dae_path = files[i].name;
  }
}

const manager = new THREE.LoadingManager();
manager.setURLModifier(function (url, path) {       

  url = url.split('/');
  url = url[url.length - 1];

  if (extraFiles[url] !== undefined) {

    var blobURL = URL.createObjectURL(extraFiles[url]);
    console.log(blobURL); //Blob location created from files selected from file input
    return blobURL;     

  }
  return url;
});

var loader = new THREE.ColladaLoader(manager);
loader.load(dae_path, function (collada) {

  console.log(collada);
  var dae = collada.scene;

  scene.add(dae);

});                 
  });
}

Once the model loads, I suppose the same procedures for actions like merging can be carried out as when loading a model conventionally.

Concerning the model's orientation, it's possible that the software used to create the model employs a different coordinate system than three.js. It might not be feasible to determine the model's rotation in advance in collada (I could be mistaken on this), but setting dae.rotation.set(0, 0, 0); before adding the model to the scene could suffice.

Hopefully, this information proves useful to you.

Answer 2

Lately, I've been working on a similar project involving OBJ+MTL files uploaded by users.

This new feature in three.js (r88) https://github.com/mrdoob/three.js/pull/11259 lets you specify resource URLs (pulled from uploaded files).

I came across this example https://github.com/mrdoob/three.js/pull/12591 that guided me in loading OBJ+MTL files. It should work for various model loaders as long as they utilize the loadingManager. This approach streamlines selecting both the model and textures simultaneously with just one file input (including drag and drop functionality).

So, I created a fiddle based on the above collada format example: https://jsfiddle.net/Lhrvna7a/45/

The key segments are highlighted below:

$('.inputfile').change(function (e) {

var files = e.currentTarget.files;
var dae_path;

var extraFiles = {}, file;
for (var i = 0; i < files.length; i++) {
  file = files[i];
  extraFiles[file.name] = file;

  //Filename ends in .dae/.DAE
  if (files[i].name.match(/\w*.dae\b/i)) {
    dae_path = files[i].name;
  }
}

const manager = new THREE.LoadingManager();
manager.setURLModifier(function (url, path) {       

  url = url.split('/');
  url = url[url.length - 1];

  if (extraFiles[url] !== undefined) {

    var blobURL = URL.createObjectURL(extraFiles[url]);
    console.log(blobURL); //Blob location created from files selected from file input
    return blobURL;     

  }
  return url;
});

var loader = new THREE.ColladaLoader(manager);
loader.load(dae_path, function (collada) {

  console.log(collada);
  var dae = collada.scene;

  scene.add(dae);

});                 
  });
}

Once the model loads, I suppose the same procedures for actions like merging can be carried out as when loading a model conventionally.

Concerning the model's orientation, it's possible that the software used to create the model employs a different coordinate system than three.js. It might not be feasible to determine the model's rotation in advance in collada (I could be mistaken on this), but setting dae.rotation.set(0, 0, 0); before adding the model to the scene could suffice.

Hopefully, this information proves useful to you.

Import and Showcase Collada Models with Textures using Three.js and file inputs

Answer №1

Similar questions

I am working with a JSON Object in JavaScript and need to retrieve a key using a String variable

What causes the React app to fail in maintaining the login session with the Node.js server?

Can a variable name be created using a function input?

Is it possible to extract a div from a third-party domain and showcase it on my website?

jquery unbinding events can lead to faster performance

Refreshing the page results in a 404 error when utilizing React Router

Node.js Mistake - 'Attempting to import outside of a module is not allowed'

Javascript error in formatting

Experiencing trouble with implementing multiple textboxes based on option selection using javascript

Combining numerous objects into one object within an array, each with distinct keys, and displaying them using FlatList

The replaceWith() function in jQuery is able to transform PHP code into an HTML comment

Using Vue to dynamically upload multiple files simultaneously

The ajv-based middy validator does not adhere to the specified date and time format

I am interested in delivering a blended, divided response containing JSON and a string using Express

Can you explain the contrast between using require('d3') and require('d3-selection')?

Obtaining a file from Firestore using cloud functions

Best locations for placing files when integrating Javascript into Wordpress

Include a sub-component N times within the main component, depending on the current state value

Activate scroll event when image src changes in Angular using jQuery

Extract the input value from the bootstrap-datepicker using JavaScript