Error encountered while importing Blender model into Three.js: Uncaught TypeError - Unable to access property 'x' as it is undefined

I've been attempting to transfer a 3D model from Blender into a Three.js project, but I keep encountering this error: Uncaught TypeError: Cannot read property 'x' of undefined. The issue seems to be stemming from the following piece of code:

var loader= new THREE.JSONLoader();
loader.load('http://localhost/js/map.json', function(geometry) {
 mesh= new THREE.Mesh(geometry);
 scene.add(mesh);
});

I have also included a link to the json file of the 3D model provided to me:

Any assistance in identifying what is causing the issue would be greatly appreciated.

javascriptthree.jsblender

Answer №1

When attempting to generate a Mesh(), ensure you include a material. The correct way is to provide a material as the second argument in the constructor, as shown below:

var loader= new THREE.JSONLoader();
loader.load('http://localhost/js/map.json', function(geometry) {
    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

To learn more about creating a Mesh object, refer to the documentation. Additionally, consider using the .gltf exporter instead of JSON as JSON is no longer actively supported according to Mugen87.

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

Guide to displaying a function result in Vue 3

I have just started learning vue js and I am facing an issue. I want to display the value returned by the following function in a table row: The function is: getGroup(id){ this.users.forEach(element =>{ if(element.id===id) ...

javascripthtmlvue.jsvuejs3

Incorrect media type linked to Gmail API attachment error

I need help sending a message via the Gmail API in JavaScript, including a JPEG file attachment. My code so far looks like this: $.ajax({ type: "POST", url: "https://www.googleapis.com/upload/gmail/v1/users/me/messages/send?uploadType=multipart", he ...

javascriptajaxemailgmail-api

Ensure a consistent number of draggable elements in HTML/JavaScript

Below is the HTML/JS code snippet: <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.targ ...

javascripthtmlcss

Ways to identify when an HTMLElement's size changes due to a percentage-based width setting

Currently, I am in the process of developing an Angular Component and have implemented the following CSS code: :host { display: block; width: 100%; } The main objective here is to ensure that the component remains as responsive as possible. However, ...

javascriptangularangular-components

Is it possible to utilize md-select from Angular Materials to execute a function?

Encountering a peculiar issue with the md-select element - I may be using it incorrectly. The goal is to redirect to a new page or sign out based on the selected option, but instead, I'm faced with this error: Error: Failed to execute 'removeChi ...

javascriptangularjsangular-material

How should endpoint functions be correctly written for Mongoose in conjunction with Express?

While developing the backend API for my app, I have come across numerous examples of different approaches to handling errors in endpoint functions. The two options presented below illustrate this: Option 1: export const deleteProject = asyncHandler(async ...

javascriptnode.jsexpressmongoose

Extract values from HTML IDs and store them in an array

Currently, I am working on a project where I need to capture a QR code and display it on the screen. After that, I want to iterate through the elements using a for loop and save the values in an array. Specifically, I am using the ID id="scanned-resul ...

javascripthtmlasp.net-mvc

Determining if the device is connected to the internet

Is there a way to create a unique code using HTML, JavaScript, or jQuery that executes a random action when the website detects that the device is offline? ...

javascriptjqueryhtmlajax

Tips for working with elements in WebDriver that are created dynamically by JavaScript

As a novice in automation using Java and WebDriver, I find myself facing a particular issue: Browse for a specific customer Select a new customer type from a dropdown menu Click on the Save button Outcome: Upon trying to change the customer, a message p ...

javascriptseleniumwebdriver

The click event listener declared with v-on inside a Vue Component fails to trigger

I am currently working on a Vue instance for a sidebar within my application that displays a list of menu items. In order to achieve this, I have created a local component with the following template structure: template:'<div><li class="cust ...

javascriptvue.jsvue-component

Using jQuery to locate and delete multiple attributes from div elements

My goal is to locate all div elements with the class name "comment-like" that also have data-id attributes set to 118603,1234,1234,118601,118597. If a div contains any of these data values, then I want to remove that data attribute. I've attempted th ...

javascriptjqueryarraysattributes

Move the footer down to the bottom of the page

I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be d ...

javascriptjqueryhtmlcssfooter

Component is not rendering with React-router

Having some trouble with this code snippet I'm trying to implement. React is not rendering the component and I can't figure out why. I have included react-router from a CDN. Any assistance would be greatly appreciated. import { Router, Route, Li ...

javascriptreactjsreact-routerurl-routing

Extracting a specific range of values from a JSON object

Can anyone help me with filtering a range of values from a json object? Here is the range data I am working with: const contractAmountRange = [ { id: '1', min: 0, max: 100000, description: 'Less than $100,000' }, { id: ...

javascriptfilter

ES6 syntax specification allows for the use of a fat arrow function for declaring React components

When learning React, I have noticed two different ways of declaring components. The first is using the classic fat arrow syntax with a return statement. const Component = () => { return ( <div>Hello</div> ) } Recently, I came ...

javascriptreactjsecmascript-6

What does Renderer.readRenderTargetPixels do?

I noticed that the GPU picking example refers to a method called "readRenderTargetPixels" but I couldn't find it. Has it been removed? Is there a similar alternative available? For reference, here is the example: ...

three.js

Can anyone help with displaying a PNG image in Vue/Node/Express? I am struggling to show the image that I sent from a Node.js server to a Vue app client

In my Node/Express application, I've set up a route like this: app.get('/get-image', function(req, res) { ... res.sendFile(path.join(__dirname, '..', account.profileImg)); }) Now in my client-side Vue app, I'm tryi ...

javascriptnode.jsimagevue.jsdisplay

Cease an if condition in AngularJS JavaScript

I am facing a situation where I have an if statement that needs to halt execution but only after certain processes have been completed. This if statement is enclosed within a forEach loop in an Angular context. angular.forEach($scope.obj, function ( val ...

javascriptangularjsif-statementforeach

Leveraging google transliteration within a Flex environment

Here is an illustration of how the Google transliteration feature can be utilized in specific HTML textboxes. I am looking to incorporate this same functionality for a Flex application. Is there a method through which this can be achieved? <html> ...

javascriptajaxapache-flextransliteration

Using Django, CSS, and Javascript, create a dynamic HTML form that shows or hides a text field based on the selection

How can I hide a text field in my Django form until a user selects a checkbox? I am a beginner in Django and web applications, so I don't know what to search for or where to start. Any guidance would be appreciated. Here is the solution I came up wi ...

javascripthtmlcssdjango