Issue with require in Three.js

I am delving into the world of Three.js and Require.js for the first time. My objective is to load an Obj and Mtl file using the OBJMTLoader. However, I have encountered timeout errors in the console with my current setup:

require({
    baseUrl: 'js',
    // three.js should have UMD support soon, but it currently does not
    shim: { 
      'vendor/three': { exports: 'THREE' }, 
      'vendor/MTLLoader': { exports: 'MTLLoader'},
      'vendor/OBJMTLLoader': { deps: ['MTLLoader'], exports: 'OBJMTLLoader'}

       }
}, [
    'vendor/three',
    'vendor/MTLLoader',
    'vendor/OBJMTLLoader'

], function(THREE, OBJMTLLoader) {

var scene, camera, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;

    camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 1, 20000);
    camera.position.set(0,6,1000);
    scene.add(camera);

     window.addEventListener('resize', function() {
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;
      renderer.setSize(WIDTH, HEIGHT);
      camera.aspect = WIDTH / HEIGHT;
      camera.updateProjectionMatrix();
    });

     var light = new THREE.PointLight(0xffffff);
     light.position.set(-100,200,100);
     scene.add(light);

     var onProgress = function ( xhr ) {
          if ( xhr.lengthComputable ) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round(percentComplete, 2) + '% downloaded' );
          }
        };

        loader = new THREE.OBJMTLLoader();
        loader.load( '/obj/Shoes_Air_Jordans_4.obj', '/obj/Shoes_Air_Jordans_4.mtl', function ( object ) {

          object.position.y = - 80;
          scene.add( object );

        }, onProgress );

    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer({alpha:true});
    renderer.setSize( WIDTH, HEIGHT );
    renderer.setClearColor(0x333F47, 1);

    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}

});

For this experiment with three.js, I used the following generator: https://github.com/timmywil/generator-threejs

Answer №1

Changing the extension of your file from .obj to .txt may help. Try loading the file as a .txt

'/obj/Shoes_Air_Jordans_4.txt'

UPDATE:

It's important to note that you should not open the file locally. The ThreeJS obj loader is unable to load files from local directories. Consider using a software like HFS or hosting your HTML file on a domain

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

I'm looking to transfer my stringified object into the HTML body. How can I achieve

When sending an HTML file to a client using the res.write() method, I also need to include an object within the HTML. However, when I stringify the object and add it along with the HTML, the JSON object ends up outside of the HTML structure. I require the ...

What methods do HTML document Rich Text Editors use to incorporate rich text formatting features?

I am curious about the way text in the textarea is styled in rich-text editors. I have attempted to style text in the form but it doesn't seem to change. How does JS recognize the characters typed by the user? Can you explain this process? Edit: Aft ...

The Benefits of Semantic Class Names compared to Microdata

As I strive to use semantic class names, my exploration of microdata and SEO raises a question: Is it necessary to use both? Compare these two HTML snippets representing an event: Using CSS classes: <div class="event" itemscope itemtype="http://schema ...

Achieve dynamic styling and adjust window size using window.open

My mind is exhausted after days of trying: function prtDiv( o ) { var css = 'body {font:normal 10px Arial;}' ; var wo = window.open('','print','width=600,height=600,resizable=yes'); wo.document.write( '<he ...

Instead of having the animation loop in three.js, let's set it to

After successfully exporting blender JSON animation into THREE.js, I have encountered a situation where everything is functioning correctly. However, my current goal is to only play the animation once and then stop instead of having it loop continuously. ...

Distinguishing between selecting rows and selecting checkboxes in Mui Data Grid

Is there a way to differentiate between clicking on a row and clicking on the checkboxes? I want to be able to select multiple rows by clicking anywhere in the row except for the checkbox column. When clicking outside the checkbox column, I would like to p ...

Tips for handling data strings using axios

In my node.js project, I am following a manual and attempting to display data obtained from jsonplaceholder app.get('/posts', async (req, res) => { const response = await axios.get('https://jsonplaceholder.typicode.com/posts'); ...

What is the best way to attach every sibling element to its adjacent sibling using jQuery?

I've been working with divs in Wordpress, where each div contains a ul element. <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Rent 1< ...

React app does not auto-refresh after modifications in App.js with NPM

React is expected to work seamlessly with just a few simple commands: npm create-react-app npm run build However, I have encountered an issue when using WebGL with Three.js. If I make changes to the App.js file, refreshing the page does not reflect the up ...

Malfunction in triggering events within an Ajax Magnific popup feature

I'm trying to load a page within a magnific popup using ajax: $("#operator").magnificPopup({ delegate: 'a.edit', mainClass: 'mfp-fade', closeBtnInside: true, removalDelay: 300, closeOnContentClick: false, t ...

ng-repeat not functioning properly with FileReader

Here is a look at how my view appears: <body ng-controller="AdminCtrl"> <img ng-repeat="pic in pics" ng-src="{{pic}}" /> <form ng-submit="postPic()"> <input id="photos" type="file" accept="image/*" multiple/> <button> ...

Interacting with external domains through ajax queries

I'm encountering an issue with my javascript code that sends an ajax request, but I'm not receiving any response. Can anyone offer some guidance on how to troubleshoot this problem? Thank you! The URL I am attempting to retrieve is: Here's ...

Updating the Ajax Url dynamically while scrolling

I am trying to update the Ajax URL dynamically, and here is my progress so far: var size=1; var from = 1; window.addEventListener('mousewheel', function(e){ if(e.wheelDelta<0 && from<5){ from++; } else if(e.whe ...

Cannot update VUEjs array following the splice operation

My array is only updating in the console and not in the DOM. I've already tried using :key but it's still not working. Here is my code: <div style="margin-top: 5px;" v-for="(file, index) in editedItem.file_name" ...

Error encountered during Jest snapshot testing: Attempting to destructure a non-iterable object which is invalid

I am currently facing an issue with my React codebase where I am attempting to create snapshot tests for a component. However, Jest is showing an error indicating that I am trying to destructure a non-iterable instance. Despite thoroughly reviewing the cod ...

Is it possible to dynamically assign a value to a property?

Check out the code snippet below: let data.roles = "Admin:Xxxx:Data"; for (let role of data.roles.split(':')) { user.data.role[`is${role}`] = true; } Is there a way to optimize this code to dynamically create role propertie ...

Issue with printing data consecutively using Javascript

My JavaScript code aims to display the content of the body tag again when the add button is clicked. The purpose is to add authors, with each author being added in sequence. For example, if there is only 1 author present, the user simply selects whether th ...

Troubleshooting Vue.js dynamic image path loading issues

Struggling to dynamically load images in a single file component, I keep encountering an error stating that the module cannot be found. It seems like I'm attempting something similar to what was discussed in this post on Stack Overflow, but I can&apos ...

Issue with displaying Bootstrap modal on top of another modal

Upon clicking the "Click me here" button, a modal pops up and displays a toast message expressing gratitude. The thank you modal should remain open on top of the save modal even after clicking save. However, upon saving, an error message appears: Cannot r ...

Steps for creating a herringbone design on an HTML canvas

Seeking Help to Create Herringbone Pattern Filled with Images on Canvas I am a beginner in canvas 2d drawing and need assistance with drawing mixed tiles in a cross pattern (Herringbone). var canvas = this.__canvas = new fabric.Canvas('canvas' ...