Having trouble loading a JSON file in three.js?

I have been trying to load a JSON image in Three.js by following a tutorial video. However, despite copying the code exactly as shown in the video, I am not able to see anything in the browser when using my own images. The JSON file is downloaded from clara.io.

Below is the relevant code snippet from my JavaScript file that I have implemented:

<script src="js/ObjectLoader.js"></script>
<script>


            var loader = new THREE.ObjectLoader();

            loader.load
            (
                'models/standard-male-figure.json',

                function(object)
                {
                    scene.add(object);
                }
            );


            camera.position.z = 3;
</script>

The console displays some errors which makes me suspect that the video tutorial might be outdated. However, I am unsure how to address these issues. Here are the error messages:

Uncaught SyntaxError: Unexpected token {

three.js:22676 THREE.WebGLRenderer 104

three.js:38584 THREE.ObjectLoader: You have to import LegacyJSONLoader in order load geometry data of type "Geometry".

three.js:38598 Uncaught TypeError: Cannot set property 'uuid' of undefined
    at ObjectLoader.parseGeometries (three.js:38598)
    at ObjectLoader.parse (three.js:38274)
    at Object.onLoad (three.js:38244)
    at XMLHttpRequest.<anonymous> (three.js:34554)

Answer №1

JSONLoader was recently removed from the core of three.js and rebranded as LegacyJSONLoader. You can now find this file in the examples directory, accessible through this link.

To resolve any issues you may be experiencing, download this file and integrate it into your project. It is worth noting that using legacy JSON files, likely created with the now deprecated Blender JSON exporter, should be avoided. For better alternatives, such as glTF, refer to the official three.js documentation for guidance.

For further information on loading 3D models, check out the following link: here.

three.js R103

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

Issue with Redux saga not responding to action initiated by clicking on an icon

Declaration of Saga function* DoStuffInSaga({myRef}){ try { console.info("saga running"); return yield delay(1000, 1); } catch(error){ console.warn(error); } } export function* mySaga(){ yield all([ yi ...

Can you explain why there is a discrepancy in the canvas coloration?

When I try to draw a line on my canvas with color "#ca5100", the actual color that appears is "#e4a77f". Why does this difference occur and how can I ensure that the correct color is set? var ctx = document.getElementById("mycanva").getContext("2d"); ct ...

Transform a string into an array in PostgreSQL json(b) and then update the corresponding field

In my PostgreSQL database, there is a jsonb field with the following content: { "object": { "urls": "A;B;C" } } My objective is to modify the value of urls within the object and convert the semicolon-separated string into a JSON array. The desired result ...

Why isn't my object updating its position when I input a new value?

<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...

The LINQ to Entities framework does not support the 'System.Web.Mvc.FileResult' method

I'm working on a project where I need to display multiple usernames along with their corresponding images. In order to achieve this, I've created a Json action method like so: public JsonResult GetUsers() { var result = (from user in db.Use ...

"Handling Errors in JavaScript when a Button Click Event Triggers a

There are 2 buttons intended for "Add to Favorites" and "Remove from Other Favorites". Here is the code snippet: <button type="submit" class="btn btn-warning btn-xs" id="FavoriButonex" data-id="<?php echo $sorid ?>"> <i class="fa fa-hea ...

Switch between two fields using just one animation

I've been experimenting with creating an information tag that slides out from behind a circular picture. To achieve this effect, I created a block and circle to serve as the information field placed behind the image. However, I'm facing a challe ...

Following the submission of a message, the textarea automatically inserts a line-break

Can someone please help me troubleshoot an issue with my chat app? Every time I try to send a message, the textarea adds a line break instead of just focusing on the textarea so I can send a new message smoothly. I have recorded a video demonstrating the ...

Utilizing Python's json.loads() object_hook for Dynamic Object Creation

Currently, I am in the process of developing an application that makes use of Python's JSON module. I had the idea to bring JSON data back into a suitable Python object, and fortunately, the following code snippet worked flawlessly. Class NewClass : ...

What steps can be taken to address an undefined error before the execution of useEffect?

Today I encountered a small issue with my online player. It's fetching songs from the database using useEffect and saving them in state like this: const [songs, setSongs] = useState([]); const [currentSong, setCurrentSong] = useState(songs[0]); a ...

Invoke the express function on the client using the callable method

When I'm listening on a local port with my browser, the following method will return Hello world. //Node app.get('/', (req,res)=>{ res.send('Hello world') }); I've successfully exported the app as a ca ...

Incorrect data retrieval from JSON object with JQUERY

I am working on a function that extracts data from a database on the server-side and assigns it as the value of a textbox on the client-side. The function is functioning correctly on the server-side, but on the client-side, when I use console.log to view t ...

Vue: The enigmatic world of ghost properties?

During my project work, I encountered the following code snippet: Main component - <ParameterModal>: <template> <modal-wrapper props="..."> <!-- ... other similar templates are present... --> <template v-else-if="moda ...

Struggling with displaying Firebase data in React

I am facing an issue with rendering data fetched from Firebase onto the screen. The problem arises when I attempt to call the function that retrieves data from the database inside the componentDidMount() lifecycle method. Surprisingly, the function does no ...

Changing the background image of the body when hovering over a li element: a step-by-step

For my website, I want to achieve the same effect as seen on the homepage of this site: I am looking to change the background image of my webpage when a specific li element is hovered over. Each li element should trigger a different background image. Add ...

Adjusting the color of specific sections within a text box

Can I change the color of a specific section of a text input box? I'm working on a comment widget that needs everything between the @ and : symbols to be in a different color: <input type="text" placeholder="Want To Say Something?" value="@user55 ...

Is there a way to effectively organize an RSS feed using the .isoDate parameter while ensuring that the feed's elements remain interconnected (such as title and link)?

My goal is to organize the RSS feed by the most recent item while ensuring that each title corresponds correctly with its link. Currently, I am parsing and displaying the feed using the .isoDate property, but I am unsure of the best approach to achieve thi ...

I'm having trouble finding the solution to setting a token in my request header

I have been following a tutorial in a book to build the authentication for my app. However, I am facing an issue where after logging in correctly, I am unable to set the token back into the request. The error message that I receive is: Failed to execute ...

Python Daily on Discord

Looking to build a bot using discord.py I'm having issues with the daily check feature where users receive a small amount of money every day. I've implemented a restriction so users can only do this once a day. However, I'm now wondering: ...

Outdated jQuery script no longer functioning (Wordpress)

I recently updated a WordPress site to Version 5.7.2 and now two of the custom Metaboxes are not functioning as expected. The issue seems to be related to the outdated jQuery version used by the Metaboxes. To address this problem, I installed a Plugin cal ...