The loading of DAE models is not supported in Three.js

I'm encountering a major issue with loading a model into Three.js. To start off, I downloaded https://github.com/mrdoob/three.js/ and extracted it onto my local WebMatrix server. Most of the examples run smoothly, except for the ones that are crucial for me.

When I try to access webgl_loader_collada.html, I receive the following error:

GET http://localhost:26238/three.js-master/examples/models/collada/monster/monster.dae 404 (Not Found)

Similarly, trying to load webgl_loader_obj.html gives me:

GET http://localhost:26238/three.js-master/examples/obj/male02/male02.obj 404 (Not Found) 

I've made sure that ColladaLoader.js is in the same folder as well.

For instance, attempting to load a Collada file like this presents an issue:

var loader = new THREE.ColladaLoader();
                loader.load("monster.dae", function loadCollada(collada) {
                                            var model = collada.scene;
                                            model.scale.set(0.1, 0.1, 0.1);
                                            model.rotation.x = -Math.PI/2;
                                            model.updateMatrix();
                                            scene.add(model);
                                            });

This results in:

GET http://localhost:26238/monster.dae 404 (Not Found)
ColladaLoader.js:108 load ColladaLoader.js:108

init webgl.html:43

onload webgl.html:107

While I can successfully load models using the JSON loader, I need other formats to be operational as well.

I'm at a standstill. It is imperative for this to function properly, yet I am unable to identify the root of the problem. Even after copying code from functioning examples, it remains unsuccessful.

Answer №1

Assuming you're utilizing visual studio express... if that's the case, it's likely you're using IIS express... to resolve the problem, follow these steps:

  1. Navigate to X:\Users\YOURUSERNAME\Documents\IISExpress\config
  2. Open the applicationhost.config file
  3. In the
    <staticContent lockAttributes="isDocFooterFileName">
    section, include the following:
    <mimeMap fileExtension=".dae" mimeType="text/xml" />

Expecting this to be of assistance!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for converting a date string to a date object and then back to a string in the same format

I seem to be encountering an issue with dates (shocker!), and I could really use some assistance. Allow me to outline the steps I have been taking. Side note: The "datepipe" mentioned here is actually the DatePipe library from Angular. var date = new Dat ...

`The Streaming module within React Native`

I am facing an issue in my React Native project where I want to use a node library that depends on stream (require('stream')). The problem arises with the error stream could not be found within the project because stream is a nodejs package not ...

Issue: Failed to locate module @angular/core

When attempting to run an Angular 4 application, I consistently encounter the following error: ERROR in Could not resolve module @angular/core There are no additional errors present. There are no dependency issues whatsoever as @angular/core is located i ...

Collaborative spreadsheet feature within a browser-based software platform

I am using an Angular-based SPA for my web application. My goal is to be able to open an Excel file within the application itself. Currently, I have a menu button or link that is linked to a specific path, for example //192.168.10.10/sharedExcels/myExcel. ...

Navigate through a nested JSON structure and update the data points

In my possession is a JSON tree structured as follows: { "projects": { "Proj1": { "milestones": { "default": "20150101", "default2": "20140406", "default3": "20140101", ...

Alternative way to search for child elements within an element without the use of jQuery

I am in the process of creating a universal set of functions to verify the existence of children with specific attributes within a particular element. Unfortunately, I do not have access to jQuery for this task. Here is an example function call: has_chil ...

Angular version 16+ is incompatible with Three.js and does not function properly together

I am attempting to integrate three.js into my Angular 16 project and encountering the following error message: npm i @angular-three/core npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email&# ...

When I delete the initial element from the array, the thumbnail image disappears

Using react-dropzone, I am attempting to implement image drag and drop functionality. The dropped image is stored in the React state within a files array. However, a problem arises when removing an image from the array causing the thumbnails of the remain ...

Attempting to incorporate the jquery-mousewheel plugin into the jquery cycle2 library

I've been working on integrating the jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel) with the jquery cycle2 plugin. Initially, everything was running smoothly until I encountered an issue where mouse scrolling was generating ex ...

What are the most effective techniques for utilizing JavaScript modules in both the Server and Browser environments?

Currently, I am in the process of developing a JavaScript project that utilizes NodeJS. There are certain objects that need to be shared between the client and server side. I attempted to employ the module system in Node, but struggled to find an appropria ...

Utilizing API data sharing across AngularJS controllers

I am facing a challenge with my parent controller and its children controllers, as I want them all to share the data fetched from an Api service. Controllers: var app = angular.module('mymodule',[]); app.controller('main', ['$scop ...

When utilizing Javascript's Array.push method, a nested array is generated that is inaccessible using the index

I have reviewed several articles discussing the issue of asynchronous calls returning undefined. Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference Get data from fs.readFile However, none of these articles ...

Can you explain the meaning behind this syntax?

Currently, I am utilizing Vuetify and I am in the process of getting the server-side controlled data tables up and running. While browsing through the documentation, I stumbled upon this code snippet here. However, I am facing some challenges in understan ...

Npm is unable to locate the package.json file in the incorrect directory

Hello, I am currently in the process of setting up webpack. I have all the configurations ready, but when I attempt to execute webpack in my terminal, it looks for the package.json file in the incorrect location. Is there a way for me to modify the path ...

How to make divs occupy the entire space of a parent div?

I've been scouring the website for a solution, but nothing I've found has been helpful. I'm attempting to create a grid within a containing div where a default (and eventually user-specified) number of divs will fill up the space. I'm t ...

Browse through all products with just one click using JQuery!

I am trying to achieve a feature where clicking a 'View all' button under the product sheets will display all the products in alphabetical order by adding clones at the bottom of the page to fill all available spaces. Can you assist me with this? ...

Getting the value from a .sh (Shell Script) file in React: How to do it?

There is a .sh file that contains the following code: echo "Hello" This code produces the output: Hello The question at hand is: I am trying to extract the output from the .sh file and integrate it into my React application. After exploring various ...

Retrieve data from an HTML form and utilize it to search a JSON array for a specific value

If I have a Json File structured like this: {"403": [ { "403-01-01": "219,00" }, { "403-01-02": "180,00" } ], "404": [ { "404-01-01": "26,00" }, {"403-01-02": " ...

Sorting function not working on dynamic Angular table

I'm currently facing a challenge with sorting a dynamic Angular table. If I manually code the table headers, everything works smoothly. Fiddle: https://jsfiddle.net/xgL15jnf/ <thead> <tr> <td> <a href="#" ...

Limit the material to just one instance of the fragmentMesh class within the Open Bim Components library, utilizing Three js

I recently encountered an issue where setting unique materials to a specific fragmentMesh resulted in the material being applied to all instances of the fragmentMesh. This brings up the question of how to determine and target a specific instance that the r ...