Error encountered when utilizing sceneLoader to import a scene produced by the THREE.js Editor

An issue arises with the error message 

Uncaught TypeError: Cannot read property 'opacity' of undefined
identified on three.js:12917

The current scene file in use is as follows:

{
"metadata": {
    "version": 4.3,
    "type": "Object",
    "generator": "ObjectExporter"
},
"geometries": [
    {
        "uuid": "7F5BC6A2-4B74-4049-8AF8-40A5EF310430",
        "type": "CubeGeometry",
        "width": 100,
        "height": 100,
        "depth": 100,
        "widthSegments": 1,
        "heightSegments": 1,
        "depthSegments": 1
    }],
"materials": [
    {
        "uuid": "95D0C78A-2066-4A8D-9F46-73B3038E55DE",
        "type": "MeshBasicMaterial",
        "color": 16777215,
        "opacity": 1,
        "transparent": false,
        "wireframe": false
    }],
"object": {
    "uuid": "E0E0DAAE-012A-49DB-BC1B-2878BCA7F0DA",
    "type": "Scene",
    "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
    "children": [
        {
            "uuid": "E60D8291-4E35-4365-A98E-7AEA1D1D433F",
            "name": "Cube 1",
            "type": "Mesh",
            "geometry": "7F5BC6A2-4B74-4049-8AF8-40A5EF310430",
            "material": "95D0C78A-2066-4A8D-9F46-73B3038E55DE",
            "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
        }]
}

}

After verifying the successful loading and validation of the JSON data, I conducted tests utilizing JSONLoader to load JSON Models without issue. It appears that the latest version of the platform is being used by referring to the latest version. The scene creation process was executed within the THREE.js Editor environment, as opposed to creating a scene externally.

javascriptthree.js

Answer №1

According to a discussion on https://github.com/mrdoob/three.js/issues/4259, it is recommended to use ObjectLoader:

 function loaded(scene) {
    ...
    renderer.render(scene, camera)
 }

 new THREE.ObjectLoader().load("scene.js", loaded)

Answer №2

It seems like the issue lies within the scene file generated by the editor. I attempted to input the scene file into the three.js scene example, only to encounter the identical error message.

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

Getting unique results from a knex.js INNER JOIN operation

Two tables, metadata and view_events, each have columns for config_id and config_type. The goal is to retrieve all unique view_events based on a user's email address, distinct by config_id and config_type, ordered by timestamp in descending order, lim ...

javascriptsqlpostgresqlknex.js

How to add Bootstrap and Font Awesome to your Angular project

After attempting to add Bootstrap and Font Awesome to my Angular application, I am encountering issues. I utilized the command npm install --save bootstrap font-awesome and included both libraries in the angular.json file as follows: "styles": ...

javascriptangularangularjstypescripttwitter-bootstrap

Observer function simulated by SinonStub

I am currently testing express middleware using sinon.js My goal is to verify that it sends a specific JSON response and prevents the request from moving on to the next middleware or request handler. const middleware = (req: Request, res: Response, nex ...

javascripttypescriptexpresschaisinon

How can we prevent the continual overwriting of Object values?

I'm currently working on extracting data from the USDA Food Data Central API. Specifically, I'm interested in retrieving the "name" and "amount" values under the "nutrient" section. The excerpt below shows the information retrieved: Input- repor ...

javascriptarraysreactjsjavascript-objectsusda-fooddata-central-api

Screening new elements to be included in the array

When adding new items to an array in my App, I encountered a problem with filtering the newly added items. If I use .filter by state, it modifies the original array and I am unable to filter from the beginning (original array). I attempted to filter using ...

javascriptreactjsfilterreact-hooksstate

Use JavaScript to switch the h1 title when selecting an option from the dropdown menu

As a beginner in coding, I am struggling to find a solution using an if statement for this particular problem. Although I can achieve the desired result with HTML code and options, this time I need to use arrays and an if function. My goal is to create a ...

javascripthtml

If an Angular reactive form component has a particular value

I am working with a group of radio buttons. When a user chooses the option "yes," I would like to display an additional input box on the form. Link to Code Example HTML.component <div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt- ...

javascriptangulartypescriptangular-reactive-forms

Inserting a file read using Node.js into a MongoDB database

Recently, I came across a text file that contains the following data: title: A, alert: notice, desc: Starting title: B, alert: notice, desc: Process Step 1 and 2 Step 1 - Execute Step 2 - Log title: C, alert: notice, desc: "Ending" My goal is to insert ...

javascriptnode.jsmongodbnpmfilereader

The ngBindHtml feature in AngularJS 1.2 does not handle processing of line breaks (/r & /n)

I have a string with a lot of extra whitespace, as it appears on my server: var care_description = "MATERIAL\r\n \r\n 56% Acrylic, 24% Rayon, 20% Polyester\r\n \r\n CARE\r\n \r\n Machine ...

javascriptangularjsng-bind-html

What is the process behind executing the scripts in the jQuery GitHub repository when running "npm run build"?

Check out the jQuery repository on GitHub. Within the jQuery repo, there is a "build" folder. The readme.md mentions the npm command: npm run build This command triggers the execution of scripts in the build folder to complete the building process from ...

javascriptnode.jsnpm

An exclusive execution of the JavaScript function is ensured

I have a JavaScript function that I want to execute 12 times in a row. Here's my approach: Below, you'll find a list of 12 images: <img id="img1" src=""> </img> <img id="img2" src=""> </img> <img id="img3" src=""> ...

javascriptjqueryhtml

Is it possible for memory leaks to occur due to the use of the JavaScript setInterval

Currently in the works on a JavaScript animation project that is showing promise. I've observed that using setInterval(), setTimeout(), and even requestAnimationFrame results in automatic memory allocation and frequent garbage collection. Too many GC ...

javascriptmemory-leakssetinterval

Exploring the World of Angularjs 2

Currently, I am diving into learning angularjs 2. I found a helpful git repository that I am following closely, which can be found here. The repository contains some interesting codes in the index.html file. <script src="node_modules/core-js/client/shi ...

javascriptangular

Passing PHP Variables Between Pages

I'm currently working on building a game using html5(phaser js) and I need to create a leaderboard. Here's the code snippet I have: restart_game: function() { // Start the 'main' state, which restarts the game //this.game.time.events ...

javascriptphphtmlphaser-framework

Display a Bootstrap 5 Modal in a React component based on specified conditions

I'm currently leveraging Bootstrap 5.13 in my react project. I'm looking to implement a Modal window that will be displayed upon form submission, once the backend confirms successful data saving. To achieve this, I've created a separate com ...

javascriptreactjsbootstrap-5

Database-driven cron scheduling

How can I set up a cron job to send an email notification using node-mailer about 1 or 2 weeks before the expiration date of a product in my database that includes an expired_date field? ...

javascriptnode.jsexpress

Tips for using v-model with multiple arrays in Vue 3

Hey, I've been trying to implement a v-model to connect an input value to an object in an array of objects in Vue 3. The tricky part is that the object undergoes processing by a function before being used, and this processing needs to happen every tim ...

javascripthtmlvue.jsvuejs3

Container for grid template columns and responsive window in a single row

Imagine having around 250 divs with the class slider-item styled in a certain way. You have a responsive grid in CSS called A which arranges these divs as columns/items when the window resizes, with a minimum item width of 240px. Check out how it looks bel ...

javascripthtmlcsscss-grid

SpineJS combined with Express

Are there any recommended tutorials or case studies showcasing the integration of SpineJS and Express in applications? I have experimented with both technologies, but am currently facing some challenges. My backend is set up to run Express by using coffee ...

javascriptnode.jsexpressspine.js

creating interactive elements in augmented reality with ar.js

box.setAttribute('cursor',{ rayOrigin: 'mouse' }); box.addEventListener('click', e => { alert("clicked"); }); Is there a way to make the click event work for the object regardless of its position on the screen? ...

three.jsaframear.js