Unable to load object using JSONLoader in ThreeJS due to error: Unable to read property 'visible' of undefined

Attempting to load an object model with the code snippet below:

var loader = new THREE.JSONLoader();
loader.load('js/spacecraft.js', modelLoadedCallback);

function modelLoadedCallback(geometry) {
   spacecraft = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(geometry.materials));
   spacecraft.position.x = 0;
   spacecraft.position.y = 0;
   spacecraft.position.z = 0;
   mesh.add(spacecraft);
   scene.add( mesh );
}

However, each time renderer.render(..) is called, I encounter this error message:

Uncaught TypeError: Cannot read property 'visible' of undefined

Despite both mesh and spacecraft objects appearing to be loaded correctly when checked in the console, I am puzzled by this error. Any suggestions on what might be wrong with the JSONLoader?

Answer №1

It became apparent to me what the issue was: in the spacecraft.js model, the materials array was unexpectedly empty... I must investigate the root of this problem since I relied on the NodeJS three-obj library to convert .obj files to .JSON format.

Answer №2

Can you provide the line number or file where the error occurred? Is it located within the spacecraft code, or somewhere else in your program?

Check js/spacecraft.js to identify where .visible is being used, for example: myObj.visible. One way to address this issue quickly is to add an if statement like if(myObj != undefined){ ... }. However, a more comprehensive solution would involve investigating why myObj.visible is undefined in the initial context.

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

What steps can be taken to execute a function when a button remains unclicked?

$("#RunCode").click(function(){ var $this = $(this); if($this.data('clicked')) { console.log("Is clicked"); $(".documentWrite").text("Is clicked"); } else { $this.data('clicked', true); consol ...

Upon upgrading kombu, an issue has arisen where the task_id is not JSON serializable

After upgrading, I encountered an ERROR EncodeError(TypeError('6JQAKHNMG9 is not JSON serializable',),). The following packages were successfully installed: amqp-2.1.4 billiard-3.5.0.2 celery-4.0.2 kombu-4.0.2 pytz-2017.2 (These were i ...

What could be causing the canvas circle to appear distorted and not truly circular?

My simple code is intended to draw a circle, but it's not appearing as expected. The coordinates seem to be shifted oddly. The canvas size is specified with style="width: 600px; height: 600px;". I've tested it on both Chrome and Safari, yet the r ...

Error occurred when attempting to load JSON data from file

Consider the json file test.json which contains the following data: {'review/appearance': 2.5, 'beer/style': 'Hefeweizen', 'review/palate': 1.5, 'review/taste': 1.5, 'beer/name': 'Sausa Weize ...

Having trouble with AJAX integration when adding two products to the cart? Looking for a solution to resolve this issue?

In the cart view page, I have noticed that when there is only one product in the cart, I am able to increase and decrease the quantity by clicking on the + and - buttons. However, if I add more than one product to the cart, these buttons do not work for an ...

Ways to enable the font size to dynamically adapt to a div's dimensions

Is dealing with the following scenario: I am currently working on a component that will handle text and my requirement is to implement automatic size adjustment based on the text length. For example, if the content has a width of 50px, once the text reac ...

Tips for picking out a particular item from a list of child elements

When I select the first parent's children array, it ends up selecting every other parent's children as well. This is due to index 0 remaining the same for all of them. How can I specify and highlight a specific child? Link: Check out the stackb ...

Identifying if a variable is redirecting

Dealing with React Router Dom V6 I am facing an issue with two loader functions that make server requests. async function fetchUserDetails(userId, userAction) { const token = getAuthToken(); const userData = await axios({ url: API.endpoint + &apos ...

React: Update the hidden input's value to reflect the total number of spans clicked

I have a component called Rating that displays a star rating like this: var Rating = React.createClass({ render: function () { return ( <div className="rate-line"> <div className="rate-title">{this.props ...

Combining MongoDB properties into a Node.js variableWould you like to know how

Currently, I am in the process of creating a mongodb query in a variable within node js based on certain conditions. Unfortunately, I am facing issues with concatenating the mongodb attributes in my code. The desired output that I am aiming for has been ...

Utilizing multi-response data in JMeter requests

My test plan includes numerous POST calls such as: /api/v1/budgets Each call returns a UUID from the database, which I extract using a json path extractor and save to a variable. After making all the POST calls, I need to make the same number of DELETE ...

Closing The Menu In JavaScript On Click Event

As a newcomer to JavaScript, I'm facing some difficulties in achieving the desired outcome. I created an off-canvas menu inspired by w3 school's example. My goal is to allow users to click the hamburger glyphicon to close the menu when it's ...

Using jQuery to follow a div while scrolling that halts at a designated top or bottom boundary

I've been working on this jsfiddle: https://jsfiddle.net/3ncyxnzt/ Currently, the red box stops at a specified margin from the top of the page but I want it to also stop before reaching the bottom, so that it doesn't go under or over the footer. ...

Error encountered: The Bootstrap modal() function is showing as undefined when using npm modules

Every time I attempt to call $("#myDiv").modal(), an error occurs. The error message reads: Uncaught TypeError: undefined is not a function This error has popped up in different scenarios, with various parameters being passed to modal(). Many solutions o ...

List of coordinates extracted from PolylineMeasure plugin in the React Leaflet library

I have 3 different scripts: 1. PolylineMeasure.jsx import { MapControl, withLeaflet } from "react-leaflet"; import * as L from "leaflet"; class PolylineMeasure extends MapControl { createLeafletElement() { return L.control.poly ...

Using the ngrx signalStore within the facade design pattern - a step-by-step guide

How can I utilize ngrx's new signalStore in Angular to fetch locations of arms, save them in the state, and replace a service with LOCATION_STORE after setting the locations on a map with markers? The challenge lies in waiting for the response of loca ...

Personalizing a directive to prevent users from entering special characters in AngularJS

I am currently diving deep into the world of AngularJS directives. My current project involves using a directive to prevent users from inputting special characters. Below is the code snippet: HTML <input type="text" no-special-char ng-model="vm.custo ...

How to effectively manage the default API quota in YouTube Data API v3 while ensuring requests are made every 60 seconds

Recently, I've encountered a challenge concerning the management of the default API quota for YouTube Data API V3, which allows 10,000 daily requests. In my JavaScript application, I need to fetch the number of subscribers and concurrent viewers every ...

Restricting the Vue for-loop results to display only the current item in use

Currently, I am utilizing a for-loop to retrieve all of my posts, followed by employing a partial to obtain a list of all the usersThatUpvoted on that post. <div v-for="p in posts" style="padding: 16px"> <div> &l ...

Using jQuery to vertically center a div

When a vertical menu on my website is clicked, it pops out from the left side of the screen. The content inside is vertically centered using CSS transformations. While expanding to show sub-items, everything remains centered. However, there's an issue ...