An issue has been encountered in the OBJLoader module within the THREE.JS library

I've been delving into the teachings of the Three.js library through the book "Learning Three.js: The JavaScript 3D Library for WebGL" and I've also downloaded the example sets from the corresponding GitHub repository https://github.com/josdirksen/learning-threejs. While most of the examples work smoothly, I've encountered some errors, particularly with the one that involves loading Wavefront objects using the OBJLoader.js file. During runtime, it throws the following error:

Uncaught TypeError: undefined is not a function VM12649 OBJLoader.js:66

The problematic section of the OBJLoader.js file is as follows:

function meshN( meshName, materialName ) {

        if ( geometry.vertices.length > 0 ) {

            geometry.mergeVertices();
            geometry.computeCentroids();   //EXCEPTION RASED HERE !!!!!
            geometry.computeFaceNormals();
            geometry.computeBoundingSphere();

            object.add( mesh );

            geometry = new THREE.Geometry();
            mesh = new THREE.Mesh( geometry, material );

            verticesCount = 0;

        }

Answer №1

After updating to the latest version of the three.js library (most likely r68), I noticed that the examples are still based on version r63, causing some changes in functionality.

For instance, in the release notes found at https://github.com/mrdoob/three.js/releases, it states that in version r67, the computeCentroids method was removed from the Geometry.

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

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...

What's causing my React app's slideshow to malfunction?

Struggling with styling my React app after importing w3.css and attempting to create a slideshow with 3 images in the same directory as the component being rendered. As someone new to React and web development, I'm facing challenges in getting the des ...

Three.js: placing objects at the top of the screen with consistent dimensions

As a newcomer to three.js, I am unsure if my question falls into the category of beginner or advanced. I am looking to place objects in the top left corner of the screen, with each subsequent object positioned to the right. It is important that each object ...

Using AngularJS ui-router to implement Bootstrap UI tabs

Having trouble with Bootstrap UI Tabs in AngularJS ui-router. Trying to add an active class when refreshing the page. Passing the tab's URL to the asActive(url) function in my controller to compare with the current URL of the page. Using the "active" ...

NodeJS experiencing a hitch in the image upload process

I am currently working on a Node code snippet that is used for uploading images. The images I am dealing with have sizes ranging from 10 to 200K, so they are relatively small in size. However, the issue I am facing is that Node seems to get stuck process ...

How come my reducer isn't changing the state of my store with ImmutableJS?

I have the following code within my reducer: const copy_states = fromJS(state); const i_copy_jobs = copy_states.get('calendar_jobs').get(s_from_day_key).get(s_dept_id).get(s_job_id); let i_calend ...

What are the best ways to resolve the warning from webpack in Express?

I have set up webpack to bundle both the server and client side code... Below is my webpack configuration: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin&a ...

Tips for organizing bower dependencies efficiently

I'm currently working on an HTML-based project and utilizing a bower.json file to manage all the dependencies: { "name": "MyProject", "version": "0.1", "main": "index.html", "dependencies": { "modernizr": "2.8.3", "classie": "1.0.1", ...

The context of the selector causes an error to be thrown

Why does jQuery throw an exception when I attempt to select an element with context? The code is as follows: jQuery('b', "DAS<br/><br/><b>ID</b> = 02<br/><b>NAMA DAS</b> = CITARUM<br/><b>LUAS ...

Ways to identify when the user has stored a file on their local disk using Angular/NodeJS

In my NodeJS backend, I am generating a JSON file temporarily to store the information provided by the user in a form. Upon clicking the download button at the end of the form, I execute a Python script within NodeJS to verify the data and create a tempora ...

Guide to developing a custom plugin for Nuxt.js

This is the content of my rpc.js plugin file: const { createBitcoinRpc } = require('@carnesen/bitcoin-rpc') const protocol = 'http' const rpcuser = 'root' const rpcpassword = 'toor' const host = '127.0.0.1&apo ...

Is there a way to retrieve the final elements from a deeply nested array?

I've been struggling to extract the last item from a nested array of objects. I've tried using methods like flatMap, flat, filter, and splice, but so far haven't had any luck getting the desired array. const array = [ [ { total_c ...

How to retrieve data from a JSON object using JavaScript

Forgive my ignorance, but I'm attempting to showcase the value of content by executing console.log(teams);. Upon inspecting Firebug on Mozilla, this is what I discovered: [Object { id= "50", content= "Team 1 test" , date="Tue Mar 26 2013 12:00:00" ...

The image filter plugin is functioning properly in one project, however, it is not working in

After successfully using a plugin from w3schools to filter elements in one project, I encountered an issue when attempting to implement it in another project. Here is the link to the problematic code pen: https://codepen.io/zakero/pen/mZYBPz If anyone ca ...

Determining appropriate camera field of view (FOV) in THREE.JS based on camera position, and the reverse

I am currently working with a squared plane and a camera positioned perpendicularly to it. https://i.sstatic.net/GsSyd.png The renderer view is also square in shape. The camera is set to move along the Z axis starting from the plane (0 to infinity). I a ...

PHP-powered Countdown Timer for triggering a button's action

Hey everyone, I could use some assistance. Here's my situation - I have a database table with a column called "created_time" that stores the current system time in HH:MM AM/PM format. I want to have a button on one of my PHP pages named "Start Exam" t ...

Creating rotation effect on a plane using THREE.OrbitControls around the Z-axis (and X-axis)

I currently have a PlaneGeometry and mesh with an extent of X and Y, normalizing along the Z-axis. There is also a camera positioned directly above the plane, looking down from the positive Z-axis perspective. Essentially, it is viewing a topo/terrain map. ...

Encase all jQuery functionalities within a custom class

I am looking to create a JavaScript class that encapsulates jQuery's DOM functions, but I want these functions to only interact with a single property of that class. class Foo { constructor() { this.$wrapper = $('<div>wrapper</div ...

Send form information using AJAX response

I have successfully implemented a feature where I load an iframe into a div with the id of #output using AJAX. This allows me to play videos on my website. jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', fun ...

A warning message has been triggered: 'Script Alert Error - Object

I've been putting in hours on a SUP project that requires some tweaking and I keep running into the issue Script Alert Error: Object expected The code I've added is: $('#bottomOfStart_ScreenForm').before('<div style="display: ...