The loading of the json model in THREE.js was unsuccessful

After installing the Blender THREE.js export plugin, I successfully exported my model as table.json and made sure to check the "Face Materials" option.

However, when attempting to load my model in THREE.js using both ObjectLoader and JSONLoader, I encountered errors. The ObjectLoader displayed:

Uncaught TypeError: Cannot read property 'type' of undefined

While the JSONLoader showed:

Uncaught TypeError: Cannot read property 'length' of undefined

The exported json appeared to be structured correctly, as seen below:

{
    "metadata":{
        "type":"BufferGeometry",
        "normal":312,
        "version":3,
        "uv":312,
        "position":312,
        "generator":"io_three"
    },
    "data":{
        "attributes":{
            "normal":{
                "type":"Float32Array",
                "array":[..., ..., ...],
                "itemSize":3
            },
            "uv": { ... },
            "position":{ ... }
    },
    ...
}

Although the export seems fine, I am puzzled as to why it is failing to load properly in three.js. Could there be something crucial that I overlooked?

For your reference, I am using Blender 2.78 and THREE.js 0.84.0. Any guidance on this matter would be greatly appreciated.

Answer №1

Whenever I encounter those errors, it's usually due to an error during the exporting process. Check out this helpful tutorial video here: https://www.youtube.com/watch?v=AbCdEfGhijK. Make sure you switch the type to geometry instead of buffergeometry. It's difficult to pinpoint the exact issue without reviewing the relevant code and a screenshot of your export.

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

Unlocking the Power of Localization: An Easy Guide to Accessing JavaScript Values

After utilizing the localization helper created by Matt Hawley, I found it to be incredibly effective. However, I am encountering an issue when attempting to retrieve the values in javascript/jQuery. For example, I am unable to fetch the resource text usi ...

Access the hidden variable data of the parent page within a child iframe

I have a webpage with an embedded iframe that loads a PDF file after performing calculations. These calculations are done on the server side based on parameters stored in a hidden variable on the parent page. Here is the HTML markup of the parent page: ...

Extract a section of the table

I'm looking to copy an HTML table to the clipboard, but I only want to include the rows and not the header row. Here is the structure of the table: <table style="width:100%" #table> <tr> <th class="border"></th> ...

When a DOM object is passed in JavaScript, its value becomes indeterminate

I am currently working on creating a table that can change its background color based on an RGB value. Each row in this table contains clickable <td> cells that contribute to the RGB value. For example, the first row might be +/- 123, the second row ...

Capture an image of a webpage and print it out

I am currently in the process of designing a web page and one of the key features I need is a button that allows users to print a selected area. After conducting several searches, I came across html2canvas as a potential solution. I proceeded to install it ...

Only object types can be used to create rest types. Error: ts(2700)

As I work on developing a custom input component for my project, I am encountering an issue unlike the smooth creation of the custom button component: Button Component (smooth operation) export type ButtonProps = { color: 'default' | 'pr ...

How can I call a function from one Vue component in another component?

I have developed a component with the function "logout" as seen in the code snippet below: // @/component/Painel.vue <template></template> <script> export default { name: 'panel', methods: { logout: function () { ...

Organizing a set of div elements based on their ID attributes

I am faced with the challenge of sorting a list of divs based on their ID values, which are in the format "indexNumber123". Instead of arranging them alphabetically, I want to sort them numerically as "indexNumber1", "indexNumber2", "indexNumber3" before d ...

Managing jQuery Dependency in Node Package

I am facing an issue while trying to implement the 'jvectormap' package in Node, as it has a dependency on jQuery. My query is fairly straightforward. Whenever I attempt to import jVectorMap, I encounter the following error: Uncaught ReferenceE ...

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

Sorting through an array of JavaScript objects and aggregating the step values for matching user names

Currently, I am delving into JavaScript and facing a certain challenge that may be considered easier for seasoned developers. My goal is to iterate through an array of objects, filter out objects with the same userName, and then aggregate their steps. The ...

Importing an image from the public folder in a nested directory with Next.js

My images are stored in the public directory and all of my code is located in the src folder. Usually, when I try to import an image from src/page/page.js like: /image/logo/logo-dark.png, it works. But when I am importing images from the src/component/cor ...

The `introJs()` API encounters issues when connected to an element within a jQuery modal dialog box

I am attempting to showcase an Intro.js tour on a specific element located within a <table>. This particular <table> is nested inside a dialog box created using jQuery UI. The rows of the table are dynamically inserted using JavaScript: while ...

Limit the use of Javascript specifically within a section of HTML that includes a rich-text editor

Currently, I am working on a web application that has a historic background. This application uses the summernote editor, a rich-text editor that allows users to save formatted notes to the server. Along with this, there are numerous instances of inline Ja ...

What is the process for sending a post request with a JSON payload to an external API using Node.js?

I am currently facing an issue while attempting to send a POST request with a JSON payload to an external API using node.js. Below is the code I am using: var express = require('express'); var bodyParser = require('body-parser'); var ...

What is the best way to create a text input that is both secure and non-editable?

While I am aware of the <input type="text" readonly /> possibility, it is not entirely secure. For example, if there is an input field that must remain uneditable by users, making it "readonly" can still be bypassed by inspecting the code and remov ...

Create HTML elements based on the information in a JSON object

My goal is to create span elements for each word in my subtitle text, which is stored in a JSON object. Here is the JSON data I am working with: var sub_info = [ {'start': 3.92, 'end': 6.84, 'words ...

Update destination upon click

I'm new to JavaScript and attempting to modify a redirect link using checkboxes that will modify the URL, followed by a button that will use the updated URL. However, I'm facing some challenges with my code and could use some guidance. Here is t ...

The process of registering with JWT tokens and the challenge that arises when a token expires

I had the idea to implement a registration process that requires users to provide their username, email (which must not already exist in the database), password, and confirm password. The project is built using NextJS with pages router and Typescript. impo ...

Load Bootstrap and Popper using Require.js and CDN

My goal is to utilize require.js to load bootstrap and jquery from a CDN. Although similar questions have been asked previously (such as Steve Eynon's response in Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended Popper ...