Issue with Three.js SubdivisionModifier leading to a null error

Currently, I am working with the Three.js library and trying to implement a Subdivision Modifier on a model. I have been successful in loading a model and applying a subdivision modifier to a CubeGeometry. The code functions properly when the specific line is removed; however, this results in no "subdivisions" being applied. Without these changes, an error occurs in the JavaScript console stating "Uncaught TypeError: Cannot read property 'u' of null". My assumption is that the clone() method was not fully completed before the modify() function was called.

Does anyone have any suggestions on how to resolve this issue?

var loader = new THREE.JSONLoader();
loader.load( "models/parrot.js", function( geometry ) 
{
    var material = new THREE.MeshFaceMaterial();
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(-50,25,0);
    scene.add( mesh );

    var smooth = THREE.GeometryUtils.clone( geometry );
    smooth.mergeVertices();
    var divisions = 2;
    var modifier = new THREE.SubdivisionModifier( divisions );
    modifier.modify( smooth );   // This is the line causing the error
    var mesh2 = new THREE.Mesh( smooth, material );
    mesh2.position.set(50,25,0);
    scene.add( mesh2 ); 
});

Answer №1

If you encounter UV errors, consider utilizing the code modifier.supportUVs = false to suppress them.

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

Refreshing a webpage post initial loading using Next.js

Having trouble with my checkout route ""./checkout"" that displays embedded elements from Xola. The issue arises when using client-side routing as the checkout page requires a manual refresh to load correctly and show the Xola elements on the DOM ...

Adjust the size of the event bar on the FullCalendar resourceTimeline view

In my implementation of FullCalendar v6, I am displaying 6 months worth of data in the calendar, with each slot representing a one-month period. The issue I am facing is that when creating an event spanning 10 days, it currently takes up the entire width o ...

Using the default theme in Material UI5

Could someone please explain how to pass in the default theme in Material UI5? In Material UI6, I used to do it like this: const useStyles = makeStyles((theme) => ({ home: { display: "flex", paddingTop: "8rem", width: ...

What is an alternative method to retrieve form data without relying on bodyParser?

When it comes to accessing posted form data without using bodyParser, what alternatives are available? How exactly does bodyParser grant access to the data in req.body? Additionally, I am curious about the inner workings of this process on a deeper level. ...

Implementing a secure route in Next.js by utilizing a JWT token obtained from a customized backend system

Currently, I am in the process of developing a full-stack application utilizing NestJS for the backend and Next.js for the frontend. Within my NestJS backend, I have implemented stateless authentication using jwt and passport. My next goal is to establis ...

The Ocelot API Gateway is a powerful tool for managing

I encountered an issue while working on my API gateway project. I initially installed the latest version of Ocelot (16.0.1), but it did not function correctly. The problem was resolved by reverting back to Ocelot version 15.0.6, while keeping my .NET Core ...

Expanding upon passing arguments in JavaScript

function NewModel(client, collection) { this.client = client; this.collection = collection; }; NewModel.prototype = { constructor: NewModel, connectClient: function(callback) { this.client.open(callback); }, getSpecificCollection: ...

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

Instructions for correctly integrating the ng2-datepicker module into an Angular 2 application

Ng2-datepicker (1.0.6) Angular2 (2.0.0-rc.5) As I attempted to implement it in my HTML following the documentation, I encountered the following error: zone.js:484 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngMode ...

Top approach for inserting Class instance into a group

I need some guidance on how to approach this issue. I am interested in creating a set of objects similar to the example below: Person P = new Person(); P.Name = 'John'; P.Surname = 'Dough'; var People = []; People.push(P); Can this b ...

Altering child components' properties from the parent component in Vue.js

Presenting the Tabs.vue component featuring four tabs: <template> . . <v-tab href="#tab-1" @click="showFirstTabFunc"> First Tab <v-icon>check_box_outline_blank</v-icon> </v-tab> <v-tab hr ...

Ways to halt a message callback?

Looking at some lines of code from a canvas sprite animation on GitHub, I am curious about how to stop the animations once the sprite has finished. window.requestAnimFrame = (function(callback) { // Function for handling animation frames return window.r ...

Explain the contrast between specifying a function name in the onclick react event versus invoking it using a callback

Can someone explain the distinction between these two React statements? <Button onClick={this.Callme}></Button> <Button onClick={()=>this.Callme()}></Button> Is it merely a syntax difference or is there an impact on functional ...

Switch the background color alternately from red to green every second

Need help with a webpage that changes the background color every second using JavaScript. The issue lies in figuring out how to correctly change the variable within the function. Here's an example of the code: <!DOCTYPE html> <html> ...

The Issue of Double-Clicking on Table Cells in Internet Explorer 8

I implemented a JQuery function to add a double click event listener to a table, which triggers a modal popup when a cell is double-clicked. While this functionality works seamlessly in Firefox, there is an issue in IE8 where double-clicking a cell highli ...

Automating the process of populating preferredCountries from intl-tel-input with database output

I am looking to dynamically populate the preferredCountries:["xx","yy","zz"] array with a function that retrieves the most frequently used country codes from a MySQL database, listing them in descending order of usage and including those with a count of at ...

Searching for a specific field within an array in a nested subdocument in MongoDB: What you need to know

I am having trouble retrieving lookup data for an embedded array within a document. Below is a snippet of the data: { "_id": "58a4fa0e24180825b05e14e9", "fullname": "Test User", "username": "testuser" "teamInfo": { "chal ...

Removing classes from multiple elements on hover and click in Vue 2

Can Vue be used to remove a class from an element? I am looking to remove the class when hovering over the element, and then add it back once the mouse is no longer on the text. Additionally, I want the class to be removed when the element is clicked. He ...

Technique for adding an element's attribute to a span based on the element's class

I am aiming to display a maximum of three selections within my h4 tag, based on the number of options that the user clicks. For instance, the h4 tag should show 'Department1, Department 2,' if no elements are selected or have the class active, i ...

Align a collection of images in a grid format on the center of the page with

I am trying to center a div that contains multiple 145px X 145px thumbnail images without setting a fixed width. The goal is to have as many images in each row as the browser window can fit. However, I want to keep the images left-aligned within the center ...