Import 3D models and textures from a multipart file into three.js using Collada format

Question

Import 3D models and textures from a multipart file into three.js using Collada format

I am facing a challenge with loading Collada and image data stored in a multipart file outputted from an application. My goal is to display the Collada object and its associated images using three.js on the Web. However, I'm unsure if three.js can interpret the multipart file directly or if the data within the file needs to be parsed into separate files. The Collada loader example references a .dae file (e.g., loader.load('models/monster.dae')) rather than the actual data. How can I achieve this task of loading and viewing the "box" represented by the multipart data?

Below is the structure of the multipart file received from the application:

MIME-Version:1.0
Content-Type:multipart/mixed; 
boundary="----=_Part_4_153315749.1440434094461"

------=_Part_4_153315749.1440434094461
Content-Type: application/octet-stream; name=Texture_1.png
Content-ID: response-1
Content-Disposition: attachment; filename=Texture_1.png

‰PNG
"blob data here"
...

UPDATE:

After having the vendor split up the files, I was able to load the collada file directly into the viewer. However, I'm still unsure how to load the images along with it. Here is my current loading code snippet:

// instantiate a loader
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('http://applicationvendorapi.com/dae', function (collada) {
    // processing logic
});

The XML of the Collada file contains references to images in the same directory as the Collada file. Can these images be referenced via URLs like /endpoint/texture_0 and /endpoint/texture_1?

UPDATE 2:

Incorporating advice to first load the texture using ImageUtils, I have updated the code as follows:

// Load texture before loading and initializing 3D object
var texture0 = THREE.ImageUtils.loadTexture('http://vendorwebservice/texture_0', {}, function loaded() {
    // Instantiate a Collada loader
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load('http://vendorwebservice/dae', function (collada) {
        // processing logic
    });
});

However, there seem to be issues with fetching the texture using URL endpoints specified in the DAE file. Any ideas on resolving this issue?

javascript three.js

Answer 1

Answer №1

For a web-service application without static URI's, it is necessary to download the data returned by the service locally. If texture files referenced in the Collada file are in a relative path to the .dae file, the THREE.ColladaLoader() function will successfully locate, load, and display them.

Answer 2

For a web-service application without static URI's, it is necessary to download the data returned by the service locally. If texture files referenced in the Collada file are in a relative path to the .dae file, the THREE.ColladaLoader() function will successfully locate, load, and display them.

Answer 3

Answer №2

Although it may be past the deadline, I am sharing my insights in the hopes of assisting future readers.

I found myself facing a similar predicament where the files were not linked by static URIs. To avoid downloading the files due to concerns about data inefficiency and server resource usage, I opted to handle them manually in the browser using the following method:

Determine the name of the image file referenced by the collada's texture
Locate the image file corresponding to the name identified in step 1
Create a Threejs texture utilizing the file discovered in step 2
Attach the texture produced in step 3 to the texture slot in the collada material

Below is an example code snippet. In this scenario, the URLs within the code are data URLs.

const loadCollada = async (dae, img) => {
  const collada = new ColladaLoader().load(dae.url);

  // Extract all materials from the loaded collada
  const materials = new Set();
  collada.traverse((object) => {
    const mat = object.material
    if (mat) {
      if (mat.constructor.name === "Array") {
        mat.forEach((e) => {
          materials.add(e);  
        })
      } else {
        materials.add(mat);
      }
    }
  });

  // Parse the collada file
  const daeText = await fetch(dae.url).then((r) => r.text())
  const daeXml = new DOMParser().parseFromString(daeText,"text/xml")
  const materialLibrary = daeXml.getElementsByTagName("material")

  // Retrieve material names and texture names (image file names)
  Array.from(materialLibrary).forEach((e) => {
    const materialName = e.getAttribute("name")
    const effect = e.getElementsByTagName("instance_effect")[0]
    const textureUrl = effect.attributes.url.value.slice(1)
    const textureTag = daeXml.getElementById(textureUrl)
    const textureName = textureTag.getElementsByTagName("init_from")[0]?.innerHTML

    // Match the material with the name
    if (textureName) {
      Array.from(materials).forEach((mat) => {
        if (mat.name === materialName) {
          // Create a texture and assign it to the matched material
          const texture = new THREE.TextureLoader().load(img[textureName].url)
          texture.wrapS = THREE.RepeatWrapping
          texture.wrapT = THREE.RepeatWrapping
          mat.map = texture
        }
      });
    }
  })
}

Answer 4

Although it may be past the deadline, I am sharing my insights in the hopes of assisting future readers.

I found myself facing a similar predicament where the files were not linked by static URIs. To avoid downloading the files due to concerns about data inefficiency and server resource usage, I opted to handle them manually in the browser using the following method:

Determine the name of the image file referenced by the collada's texture
Locate the image file corresponding to the name identified in step 1
Create a Threejs texture utilizing the file discovered in step 2
Attach the texture produced in step 3 to the texture slot in the collada material

Below is an example code snippet. In this scenario, the URLs within the code are data URLs.

const loadCollada = async (dae, img) => {
  const collada = new ColladaLoader().load(dae.url);

  // Extract all materials from the loaded collada
  const materials = new Set();
  collada.traverse((object) => {
    const mat = object.material
    if (mat) {
      if (mat.constructor.name === "Array") {
        mat.forEach((e) => {
          materials.add(e);  
        })
      } else {
        materials.add(mat);
      }
    }
  });

  // Parse the collada file
  const daeText = await fetch(dae.url).then((r) => r.text())
  const daeXml = new DOMParser().parseFromString(daeText,"text/xml")
  const materialLibrary = daeXml.getElementsByTagName("material")

  // Retrieve material names and texture names (image file names)
  Array.from(materialLibrary).forEach((e) => {
    const materialName = e.getAttribute("name")
    const effect = e.getElementsByTagName("instance_effect")[0]
    const textureUrl = effect.attributes.url.value.slice(1)
    const textureTag = daeXml.getElementById(textureUrl)
    const textureName = textureTag.getElementsByTagName("init_from")[0]?.innerHTML

    // Match the material with the name
    if (textureName) {
      Array.from(materials).forEach((mat) => {
        if (mat.name === materialName) {
          // Create a texture and assign it to the matched material
          const texture = new THREE.TextureLoader().load(img[textureName].url)
          texture.wrapS = THREE.RepeatWrapping
          texture.wrapT = THREE.RepeatWrapping
          mat.map = texture
        }
      });
    }
  })
}

Import 3D models and textures from a multipart file into three.js using Collada format

Answer №1

Answer №2

Similar questions

How can I bind an event for changing innerHTML in Angular 2?

Creating HTML using JavaScript

Retrieve the total number of users in a Node.js application by querying the MongoDB database

What is the significance of using curly braces within the function setFormData to update the formData object with the key-value pair [e.target.name]: e

React callbacks involve the interaction between three different components

Is there a way to show a 'Refresh' icon in HTML without the need to download an image through HTTP?

trouble displaying Google AdSense ads

Select the five previous siblings in reverse order using jQuery's slice method

If the div element undergoes a change, use an if-else condition to populate the data fields accordingly

Access the second DIV using JavaScript's getElementById method

Using cookies in JavaScript for saving and fetching data

Passing the IDs of other elements as arguments when invoking a JavaScript function

Difficulty in displaying additional search outcomes

Having trouble updating state in React after making a fetch request

Need to monitor a Firebase table for any updates

Resolving Jest error in React JS unit tests

Tips for retrieving only the changes or updates from DynamoDB streams

react-swiper does not trigger a re-render

No response observed upon clicking on the li element within the personalized context menu

I'm completely baffled as to why the client console is unable to locate my JS file