Creating an interactive Threejs environment using Blender and manipulating objects within it

Here's the issue I'm facing:
I created a scene in Blender and exported it using the io_three addon. The resulting JSON file contains all objects when the scene option is selected during export. If I do not select this option, only the currently selected object is exported.

The Problem:
I am unable to display the entire scene using Three.js. When I load the file, I only see the background and not the actual scene. Here is how my loader looks:

var loader = new THREE.JSONLoader();
loader.load('test.json', function(geometry, material){
    var materials = new THREE.MeshFaceMaterial(material);
    mesh = new THREE.Mesh(geometry, materials);
    scene.add(mesh);
});

An error I encounter:

Uncaught TypeError: Cannot read property 'length' of undefined(anonymous function) @ three.min.js:268THREE.JSONLoader.parse @ three.min.js:271f.onreadystatechange @ three.min.js:266

The JSON file generated (which includes 2 basic cubes with textures):

{
    "textures": [{
        "image": "E30E1CC2-2152-3E22-8467-D5845ECA8529",
        "anisotropy": 1,
        "repeat": [1,1],
        "magFilter": "LinearFilter",
        "mapping": "UVMapping",
        "uuid": "F7F25B99-8709-3776-8D32-B0774203CF6B",
        "type": "Geometry",
        "name": "Tex",
        "wrap": ["RepeatWrapping","RepeatWrapping"],
        "minFilter": "LinearMipMapLinearFilter"
    }],
    // Additional JSON data goes here
}

I have tried using 'test.js', OBJLoader, OBJMTLLoader, and searched for similar issues online but haven't found a solution yet. Could someone please point out what I might be doing wrong or provide a simple example where loading and displaying multiple objects works correctly in Three.js? It seems to work fine when working with a single cube without using the scene option, but I'm struggling to figure out how to load and display a complete scene comprising multiple objects from a JSON file.

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

Rotate Chevron icon downwards on mobile devices in a Multilevel Dropdown Bootstrap 4

Bootstrap 4 is being utilized for my current project, I am looking to modify the rotation of the chevron icon in a multi-level dropdown menu specifically on mobile devices when the parent link is tapped, Here is the code snippet for the multi-level dropd ...

Discovering how to retrieve data from the payload() function when receiving information from Firestore using an Arduino

Utilizing Arduino to access data from Firestore, a database, has been successful. By using the REST API, I managed to retrieve the payload from Firestore. However, my goal now is to store some of this data into a boolean variable. Here is the information ...

Failure to send AJAX POST data

When the login button is clicked, I want to send the contents of the email text box. However, nothing happens when I click the login button. Here is the file directory structure: Model/ <-- configuration.php is located inside the Model ...

Sending a personalized event to a JavaScript object

I am looking to create an object Constructor that can dispatch a customEvent, which I then want to listen to from the instance of the object. The code snippet provided showcases what I have been attempting. I would appreciate any assistance on how to mak ...

Tips on creating a JSON structure with metadata and a result pair

I'm currently working on developing REST client wrappers in multiple languages (Java, C#, Objective-C, and Python) for a REST service that I do not have access to the source code for. I am facing challenges with modeling in all of them, which leads me ...

What is the best way to modify a specific value in a JSON object?

I need some help with the newtonsoft json library. Specifically, I want to change the value of a token called "Status" from false to true in the JSON below. Can you show me how to do that?: { "type": "FeatureCollection", "Status": false, "cr ...

JQuery unable to append AJAX response

Seeking assistance from the community here. My expertise lies more in PHP and less in JQuery or JavaScript. I am facing an issue with my code where it appears to work fine, except for appending content to the UL element using JQuery. Despite seeing the cor ...

Changing the border color of a Material UI textbox is overriding the default style

Upon the initial page load, I expected the border color of the text box to be red. However, it appeared grey instead. I tried setting the border color to red for all classes but the issue persisted. Even after making changes, the border color remained unch ...

What is the best approach to ensure mobile responsiveness and properly space the TV show div?

How can I center the searched images of shows and add spacing below each image? The 12-column grid is not behaving properly and the images are aligned correctly on desktop but not on mobile. Any suggestions on how to fix this using CSS and Bootstrap? The g ...

The eccentricities of Angular Translate in Firefox and Safari

While everything functions correctly in Chrome, there seems to be an issue with changing the language in Safari and Firefox. angular.module('angularApp') .config(['$translateProvider', function ($translateProvider) { $translateProv ...

The innerHTML of null cannot be set in Vue JS

I am attempting to showcase my array and its modifications after applying various methods <template> <div> <div id="example"></div> <div id="example1"></div> </div> </template> <s ...

The client side isn't providing the JSON data

I need assistance with sending JSON data from the client side to the server side. On the client side: function sendData() { var formData = { first: $("#name").val(), last: $("#lastname").val() } console.log("Sending data: " + ...

"Using JavaScript to find and manipulate objects within an array by either removing them or adding

I'm struggling to manipulate an array by either removing or adding an object based on its existence. I've attempted using both a for if loop and forEach loop but haven't been successful. Here's my current approach: // Object in ...

Organize a JSON dataset

I am facing a challenge with a JSON structure that looks like this: "hotel": [ { "id": 90091, "hotelGroup": "A1", "hotelRoom": [ { "name":"Room1", "minimumQuantity": 1, "maximumQuantity": 6, }, { "na ...

Error: The property 'success' is not defined and cannot be read

I am currently working on a service that retrieves coordinates for a specific location. However, I am encountering an issue when trying to return a value. angular.module('google.maps', []) .factory('geocode', ['$http', ' ...

Loading 3D files in three.js is taking longer than expected

I am currently utilizing Three.js for the visualization of 3D point gene data. In addition to this project, I also have a need to showcase a "model" that has been created in 3ds format. To achieve this, I converted the 3ds file to JSON using Blender. The s ...

Ways to handle a JSON object within Highcharts

Recently, I encountered a challenge while working with an array JSON object in JavaScript. My goal was to process this data to display it as a series section using the example of a highchart called column-rotated-labels. The JSON object consisted of two co ...

Disable the 'bouncy scrolling' feature for mobile devices

Is there a way to prevent the bouncy scrolling behavior on mobile devices? For example, when there is no content below to scroll, but you can still scroll up and then it bounces back when released. Here is my HTML structure: <html> <body> ...

loop through an array and use splice to select items and modify the array

My current issue involves working with a pixabay array. Although I successfully retrieved the data from my array, it contains 20 random pictures when I only need 3 to be displayed on my website. I attempted to use a slice array for this purpose, but unfor ...

Using jQuery to send a post request to a PHP script using either JavaScript or PHP

Just a quick question for those with experience. I am working on a page where I have implemented a jQuery AJAX post to another PHP page that contains JavaScript. My concern is, will the JavaScript code also be executed? Another scenario to consider is if ...