Using ThreeJS to Enhance Objectloader-Based Scenes with Subdivision Modifier

While experimenting with the Subdivision Modifier on an object loaded using ObjectLoader, I encountered a javascript error that says:

"BufferSubdivisionModifier.js:514 Uncaught TypeError: Cannot read property 'array' of undefined"

This is the code snippet I used to load the object along with the subdivision modifier:

            var loader = new THREE.ObjectLoader();
            loader.load("../js/brain2.json", function(object) {
                    var material = new THREE.MeshPhongMaterial( { color: 0x888888, specular: 0x222222, shininess: 20} );

                    object.traverse( function ( child ) {
                        if ( child instanceof THREE.Mesh ) {
                            var modifier = new THREE.BufferSubdivisionModifier( 1 );
                            child.material = material;
                            child.geometry.computeFaceNormals();
                            modifier.modify( child.geometry );
                            child.material.overdraw = 1
                        };  
                    });
                    object.scale.set(15, 15, 15);
                    object.position.x = 1;
                    object.position.y = 1;
                    object.position.z = 1;
                    object.rotation.set( 1, 1, 1 );
                    scene.add( object );
            });

I suspect that the issue might be related to how the subdivision modifier interacts with the 'child.geometry' object?

Answer №1

The solution involves loading geometries for the children elements.

            var loader = new THREE.ObjectLoader();
            loader.load("../js/brain2.json", function(object) {
                    var material = new THREE.MeshPhongMaterial( { color: 0x888888, specular: 0x222222, shininess: 20} );

                    object.traverse( function ( child ) {
                        if ( child instanceof THREE.Mesh ) {
                            child.material = material;
                             var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
                             geometry.computeFaceNormals();
                             geometry.mergeVertices();
                             geometry.computeVertexNormals();
                             child.geometry = new THREE.BufferGeometry().fromGeometry( geometry );
                            var modifier = new THREE.BufferSubdivisionModifier(1);
                            modifier.modify(geometry);
                            child.material.overdraw = 1
                        };  
                    });
                    object.scale.set(15, 15, 15);
                    object.position.x = 1;
                    object.position.y = 1;
                    object.position.z = 1;
                    object.rotation.set( 5, 1, 1 );
                    scene.add( object );
            });

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

Does the XMLHttpRequests have a NavigationTiming interface that can be utilized?

While the window.performance object offers insights into the performance of the browser's last page load, such as DNS lookup times, I have not come across a similar feature for Ajax calls. The overarching issue I am aiming to address is the ability t ...

Utilize HTML search input to invoke a JavaScript function

I am currently facing an issue with a navbar form that I have created. The goal is to allow users to input either a 3 digit number or a 5 digit number, which should then trigger a function to open a specific link based on the input. However, I am strugglin ...

Ways to modify the end result using callback information

In my scenario, I am working with an object that has keys id and name as shown below. The goal is to retrieve the customer name based on the id and then update the object accordingly. Const arr=[{id:1,name:''},{id:2,name:''}]; ...

Applying a combination of shaders to a single 3D object in Three.js and WebGL: A step-by-step guide

I'm tinkering with WebGL and experimenting with a 3D object using Three.js. I'm wondering if it's possible to apply multiple shaders to a single 3D object for enhanced visual effects. Any insights or knowledge sharing on this would be greatl ...

Transmitting an Array Using an Ajax Call

Is there anyone knowledgeable in Ajax here? I'm struggling with sending a javascript array in an ajax request. Can someone provide me with an example of how the ajax request should be formatted? My goal is to gather all the javascript data, package it ...

Transmit communication from Controller to AJAX script on View page

I am currently utilizing jQuery and AJAX within the View to send data to the Controller for database writing. After a successful submission, a div tag with a green background displaying "OK" text is shown. However, I am interested in implementing a check w ...

Error with React's thumbnail component

After integrating the thumbnail component into my project, I encountered an error which is displayed in the image below: https://i.sstatic.net/DGlXZ.png I am seeking assistance with understanding the issue by providing the code from my webpack.config.js ...

The execution of res.sendFile has been terminated, redirecting me to localhost:XXXX/?

In my application, I have set up a route that is being accessed, confirmed by the console.logs. However, the issue lies with the res.sendFile function at the end, as it is not directing me to the intended location. Instead, it redirects me to localhost:XXX ...

Issue with Bootstrap Navbar dropdown functionality not functioning correctly in browsers, but working fine on Codepen

I'm encountering an issue with a dropdown menu in the navbar of my document. The dropdown menu works fine in my codepen but not in my text editor (Sublime). I've tried various solutions and couldn't find a fix, so I'm reaching out here ...

What methods can you use to locate the CSS selector within HTML that meets certain criteria?

Is it possible to parse a given link and find CSS selectors with attributes that partially or completely match a specific keyword? For example, if the keyword is "print," I want to identify all CSS selectors in the link containing "print" in their name, id ...

Issue encountered while upgrading @adonisjs/ally from version 2.1.3 to 4.1.3

Upon updating @adonisjs/ally from version 2.1.3 to 4.1.3, I encountered an error stating Cannot find module 'Model. To address this, I decided to comment out the AllyProvider line and try running it again. Although the error disappeared, I now face is ...

How to handle an unexpected keyword 'true' error when using the `useState` hook in React?

Trying to set the open prop of the MUIDrawer component to true on user click is causing an error stating "Unexpected keyword 'true'" import React, { useState } from "react"; import { withRouter } from "react-router-dom"; impo ...

Pattern for Regular Expression to extract working hours string

I am currently developing a python library designed to parse various types of working hours string inputs and output them in a standardized format. I have encountered a challenge with the following scenario: Specifically, my regular expression should be c ...

Transferring a JSON-encoded string in "windows-1251" format from Python to JavaScript

What I need help with can be best exemplified with a code snippet. Before, I had the code below: content = u'<?xml version="1.0" encoding="windows-1251"?>\n' + ... # with open(file_name, 'w') as f: f.write(content.enco ...

What are the various ways to trigger JavaScript functions in different events?

Seeking help with calling a specific JavaScript function in an ASP.NET page. The code for the function is as follows: <script type="text/JavaScript"> function CalculateDistance (plat1, plon1, plat2, plon2) { try { : : v ...

Creating a seamless integration of elements from two Vue.js components

As I work on developing the checkout page for an e-commerce app, I encounter the need to display a list of OrderItems from the database, each with its price and quantity. These items can be selected and grouped together. Additionally, I must also include a ...

The Closure compiler changes the names of classes

I have a question that might seem simple, but I'm having trouble finding the solution. How can I prevent the Closure Compiler from renaming the SomeClassName class that is dependent on jQuery? (function($) { /** * SomeClassName * @constructo ...

Sending an array to another file upon button click event in a React application

Hey everyone, I'm currently getting started with React. I have this interesting situation where I need to handle an array of IDs that are obtained from selected checkboxes. My goal is to pass this array to another file called Employee.js when a button ...

Guide on removing focus from input field by tapping return key on mobile keyboard (iOS)

I have yet to test this on Android, but on iOS, I can confirm that it is not functioning properly. Within my application, there is an input field where users can input text. I am aiming to remove the focus from the input field when a user presses "enter" ...

Encountering an 'uncaught promise rejections' error in express due to a problem with the catch() statement

I encountered a problem where I keep getting an error message 'Unhandled promise rejections' every time I try to execute the following code: app.get('/standings/:tableId', async (req, res) => { const tableId = req.params.table ...