The Threejs Blender exporter is exporting in an incorrect format

I'm attempting to convert a blender model into a threejs JSON format using the provided blender exporter. However, when I try to parse the JSON file, I encounter an error:

Uncaught TypeError: Cannot read property 'length' of undefined

The structure of the JSON file (excluding vertices and faces) is as follows:

{
    "textures": [],
    "metadata": {
        "version": 4.3,
        "sourceFile": "UV-World.blend",
        "type": "Object",
        "generator": "io_three"
    },
    "images": [],
    "materials": [],
    "object": {
        "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
        "children": [{
            "type": "Mesh",
            "name": "Kugel",
            "uuid": "5051D840-9982-4F9A-8CFF-36303B38E091",
            "position": [0.0,0.0,0.0],
            "rotation": [-1.5707964897155762,0.0,0.0],
            "scale": [1.0,0.9999999403953552,0.9999999403953552],
            "visible": true,
            "castShadow": true,
            "receiveShadow": true,
            "geometry": "DEAE2CE2-9824-4F91-BE4C-1C80BEDC566A"
        }],
        "type": "Scene",
        "uuid": "8C543616-2AB0-4D1D-B76D-549E32A0E468"
    },
    "geometries": [{
        "type": "Geometry",
        "data": {
            "name": "KugelGeometry",
            "metadata": {
                "version": 3,
                "faces": 512,
                "vertices": 482,
                "generator": "io_three"
            },
            "vertices": [...],
            "faces": [...]
        },
        "uuid": "DEAE2CE2-9824-4F91-BE4C-1C80BEDC566A"
    }]
}

It appears that this JSON structure does not match the expected format by threejs. Manually adjusting the JSON to the following format allows threejs to correctly parse and display the model.

{
    "scale": 1,
    "vertices": [...],
    "faces": [...]
}

Exporting and importing to/from OBJ formats is functioning properly.

Since I couldn't find anyone else facing this issue, I suspect it may be due to a mistake in my usage. I am new to using Blender, so it's possible I made an error there. I am currently using Blender 2.73a and the latest version of threejs from the repository.

Answer №1

It appears that you may be utilizing the JSONLoader. I recommend trying out the ObjectLoader as an alternative.

Answer №2

To utilize JSONLoader, make sure to deselect the scene option. This will result in a single mesh JSON file being generated.

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

Displaying items from an array is made easy thanks to the combination of mapGetters, VUEJS, vuex, and vuetify

My website has two main routes: one for the home page and another for a configuration panel. In the home page, there is a container displaying information such as date, time, current temperature, etc. Below that, there is another container where users can ...

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

Creating a unique navigation route in React

My application has a consistent layout for all routes except one, which will be completely different from the rest. The entire application will include a menu, body, footer, etc. However, the one-off route should be standalone without these elements. How ...

What is the best way to efficiently input identical data into multiple controllers ($scope) using just one call in AngularJS?

I have a situation where I am using a factory to make a call in two controllers on the same page. However, I want to avoid making an AJAX call twice. I tried using $q.defer(), but it doesn't seem to be working! Here is the code snippet: (function ...

Determine the necessary adjustment to center the div on the screen and resize it accordingly

Currently, I am in a situation where I must develop a piece of code that will smoothly enlarge a div from nothing to its final dimensions while simultaneously moving it down from the top of the screen. Each time this action is triggered, the final size of ...

Encountering an error when attempting to access an object property dynamically by using a passed down prop as a variable in Vue 2 & Vuex

I have been struggling for hours to find a solution to this problem, but so far I've had no luck. I've looked at these two questions, but they didn't provide the answers I needed: Dynamically access object property using variable Dynamical ...

Updating votes on the client side in WebForms can be achieved by following these steps

I am currently working on implementing a voting system similar to Stack Overflow's. Each item has a vote button next to it, and I have it functioning server side causing a delay in reloading the data. Here is the current flow: Clicking the vote butt ...

Utilizing Laravel and Jquery UI for asynchronous communication with the server, passing data from a post request to

I recently constructed a basic Jquery UI slider: $("#sliderNumCh").slider({ range: "min", min: 0, max: 20, step: 1, value: 20, change : function(e, slider){ $('#sliderAppendNumCh'). ...

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

What is the best way to locate relative blocks and convert them to absolute position while keeping them in the same place? Is this something that can be achieved using JavaScript or jQuery, or is it simply not possible? Thank you very much. ...

Async reaction in MobX is a powerful tool for handling

Hey there, I am currently utilizing MobX in a store and faced with the need for an asynchronous reaction to occur when a computed value changes: class Store { @observable user; @observable something; @computed get firstParam () { ret ...

undefined reference to $

I'm currently working on a JavaScript project that involves using key events to display alphabets on the screen. However, I've encountered an error and need some assistance. <!DOCTYPE html> <html lang="en"> <head> <met ...

Galleriffic 2.0: Enhancing Animation Queues

I'm currently exploring how to utilize the stop() function in order to halt the animation buildup within Galleriffic. This issue arises when swiftly and repeatedly mousing over the thumbnail images. While I understand that in a basic jQuery script, yo ...

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

Is there a way to customize the animation for a button in material UI?

Trying to implement material UI in React and looking for a button that does not have the standard wave animation effect upon clicking, which you can see demonstrated here. Instead, I am searching for an animation that instantly fills the entire button wit ...

Directive containing tracking code script

I'm working on creating a directive to dynamically include tracking code scripts in my main page: <trackingcode trackingcodevalue="{{padCtrl.trackingnumber}}"></trackingcode> This is the directive I have set up: (function () { 'use ...

NG6002 error: This error is showing up in the imports of AppModule, even though it has its own set of issues

Running Angular 12 locally is smooth with no errors in the project build. Local Configuration: Angular CLI: 12.0.5 Node: 12.16.3 Package Manager: npm 6.14.4 OS: win32 x64 Angular: 12.0.5 However, when attempting to build the project on a Linux se ...

Is it possible to obscure geometry by adjusting the far plane of the camera view?

I'm struggling to adjust the camera's far plane in order to conceal a portion of a THREE.Line object. Unfortunately, I seem to be missing something crucial. My attempted near- and far plane setup looks like this: camera = new THREE.PerspectiveC ...

AngularJS enables the loading of directives dynamically, but sometimes encounters errors such as "Restricted URI access denied."

Presently, I am in the process of developing a small educational project using HTML5, CSS, JS and AngularJS. Hiccup: Loading an AngularJS Directive in my index.html file Error code [1] - Local browser Error: Access to restricted URI denied Various resp ...

Creating an Image Slideshow on Your Website

I'm looking to create an image slideshow on my website that functions similarly to the one found at . However, I want the images to occupy the entire screen rather than having smaller images like the reference site. Can anyone offer guidance on how t ...

Leveraging the power of Express.js, transmit local data alongside a

Why can't I display the active user in my view using plain HTML when console log shows it? Here is the code snippet: app.post('/', function (req, res) { var user = { user : req.body.username }; res.render('doctor_hagfish/pets&ap ...