Using Three.js for 3D modeling in web development, the JSONLoader coupled

Question

Using Three.js for 3D modeling in web development, the JSONLoader coupled

While dealing with heavy models, I am experimenting with displaying the loading percentage dynamically when loading JSON data. I conducted a basic test using the loadAjaxJSON method...

The loading process shows the percentage completion, but it never reaches the callback function.

I'm unsure if this issue is caused by a missing declaration, incorrect context parameters, or something else entirely. Unfortunately, I couldn't find any relevant documentation on this matter.

var loader = new THREE.JSONLoader( true );
loader.loadAjaxJSON(
            document,           // < context ??
            'try.js',
            function ( geometry, materials ) { CreateScene( geometry, materials ); },
            false,              // < texturePath
            function( progress, result ) { console.log((progress.loaded / progress.total * 100).toFixed());}
            )

Console :

7 13 20 .. 100
TypeError: a.parse is not a function [three.min.js (ligne 204)]

javascript three.js webgl

Answer 1

Answer №1

Instead of always relying on documentation, it can sometimes be quicker to check the actual sources directly. If you need to see the code for JSONLoader, you can find it here: https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js. Within this context, there are two key methods that should be included: parse and onLoadComplete. You simply need to pass the loader as the context and take a shortcut by looking at the loadAjaxJSON method for loading. Regarding texturePath, within the load method you'll find how it should be structured:

texturePath = texturePath && (typeof texturePath === "string") ? texturePath : this.extractUrlBase(url);

If you delve deeper, you'll notice that extractUrlBase will return './'. Therefore, in your case, your code should resemble this:

var loader = new THREE.JSONLoader(true);
loader.loadAjaxJSON(
        loader,           // context 
        'try.js',
        function(geometry, materials) { CreateScene(geometry, materials); },
        './', // texturePath or loader.extractUrlBase('try.js'), 
        function(progress, result) { console.log((progress.loaded / progress.total * 100).toFixed());}
        )

Answer 2

Instead of always relying on documentation, it can sometimes be quicker to check the actual sources directly. If you need to see the code for JSONLoader, you can find it here: https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js. Within this context, there are two key methods that should be included: parse and onLoadComplete. You simply need to pass the loader as the context and take a shortcut by looking at the loadAjaxJSON method for loading. Regarding texturePath, within the load method you'll find how it should be structured:

texturePath = texturePath && (typeof texturePath === "string") ? texturePath : this.extractUrlBase(url);

If you delve deeper, you'll notice that extractUrlBase will return './'. Therefore, in your case, your code should resemble this:

var loader = new THREE.JSONLoader(true);
loader.loadAjaxJSON(
        loader,           // context 
        'try.js',
        function(geometry, materials) { CreateScene(geometry, materials); },
        './', // texturePath or loader.extractUrlBase('try.js'), 
        function(progress, result) { console.log((progress.loaded / progress.total * 100).toFixed());}
        )

Using Three.js for 3D modeling in web development, the JSONLoader coupled

Answer №1

Similar questions

Using React Hooks to dynamically adjust onClick behavior based on history.location.path

What could be the reason for the error message when using rs.send with a string input?

Challenges encountered when attempting to access files from the filesystem on vercel

What is the process for extracting image data from a fancybox gallery image when it is clicked?

Is there an Angular directive that can replicate a mouseenter event?

Issue with Vue-ChartJS where adding datasets does not refresh the chart display

What steps can I take to ensure that a callback is added only once?

Issue with post-processing filters in Three.JS r71: Transparent renderer is not functioning as expected

What is the best way to identify and retrieve the objects that do not match when comparing two arrays of objects

Can Vuex mapActions be utilized within a module that is exported?

Creating a double-layered donut chart with Chart.js

Tips for adding style to a group of SVG elements:

Restrict the number of requests made to the Facebook graph_url_engagement_count API

Encountering an error with TypeScript in combination with Angular 2 and Grunt. The error message is TS

What is the process for displaying the editor logo icon as a preview in files when the "default open program" is set to Atom?

"Upon clicking, toggle the addition or removal of the overflow hidden

How do I choose the specific financial date of April 1st in the datepicker selection?

Using either Javascript or JQuery to update every cell in a particular column of a table

AngularJS: Transitioning from Expressions to Javascript (Coffeescript)

Enhancing your scene with new objects using three.js