Issue: Why does the error "this.geometry.morphTargets is not defined" occur exclusively when using the UTF8Loader?

I encountered

Error: this.geometry.morphTargets is undefined

at line 14558

while using this UTF8Loader code:

   var loader = new THREE.UTF8Loader();
   loader.load("MD/ben-utf8.js", function (geometry) {
   callbackModel(geometry, 400, 0xffffff, 0, 0, 0);
   }, {scale: 0,offsetX: 0,offsetY: 0,offsetZ: 0});

   container.appendChild(renderer.domElement);
   window.addEventListener('resize', onWindowResize, false);
   }
function callbackModel(geometry, s, color, x, y, z) {
   var material = new THREE.MeshLambertMaterial({
       color: color,
       map: THREE.ImageUtils.loadTexture("MD/text.jpg"),
   }); 
   var mesh = new THREE.Mesh(geometry, material);
   mesh.position.set(x, y, z);
   mesh.scale.set(s, s, s);
   scene.add(mesh);
}

However, when I switched the loader to BinaryLoader like this:

var loader = new THREE.BinaryLoader();
   loader.load("MD/ben-binary.js", function (geometry) {
   callbackModel(geometry, 400, 0xffffff, 0, 0, 0);
   }, {scale: 0,offsetX: 0,offsetY: 0,offsetZ: 0});

   container.appendChild(renderer.domElement);
   window.addEventListener('resize', onWindowResize, false);
   }
function callbackModel(geometry, s, color, x, y, z) {
   var material = new THREE.MeshLambertMaterial({
       color: color,
       map: THREE.ImageUtils.loadTexture("MD/text.jpg"),
   }); 
   var mesh = new THREE.Mesh(geometry, material);
   mesh.position.set(x, y, z);
   mesh.scale.set(s, s, s);
   scene.add(mesh);
}

It worked.

I have tried multiple solutions and noticed this issue always occurs when adding material.

What is the fix for this? Is it a bug?

The material in the webgl_loader_utf8.html file is defined as:

object.traverse( function( node ) {

                    node.castShadow = true;
                    node.receiveShadow = true;

                    if ( node.material && ( node.material.name === "head" || node.material.name === "skinbody" ) ) {
                        node.material.wrapAround = true;
                        node.material.wrapRGB.set( 0.6, 0.2, 0.1 );
                       }

                } );

I haven't come across this material type before, can someone provide more information about it?

Using Three.js R65.

Answer №1

When using UTF8Loader, the question arises: what is the purpose of creating a new mesh when the geometry, material, and mesh are all created inside the UTF8Loader and returned as an object?

loader.load("MD/ben-utf8.js", function (object) {
object.scale.set( 4,4,4 );
scene.add(object);

object.traverse( function( node ) {
    node.castShadow = true;
    node.receiveShadow = true;
    //texture wrapping on the material
    if ( node.material && ( node.material.name === "head" || node.material.name === "skinbody" ) ) {
        node.material.wrapAround = true;
        node.material.wrapRGB.set( 0.6, 0.2, 0.1 );
        }
   });
}

Delve into the ../MD/ben-utf8.js file to find the details of the jpg file for texturing and the ben.utf8 file that will be loaded and read by the UTF8Loader...

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

utilize the useRef hook to display the total number of characters within a text area

Introducing the following component: import React from 'react'; export interface TexareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { maxLength?: number; id: string; } export const Textarea = React.forwardRef( ( ...

The medium-zoom feature is currently experiencing issues with functionality within Angular version 13

I've been attempting to incorporate medium-zoom functionality into my project using https://www.npmjs.com/package/medium-zoom Here are the steps I took: ng new medium_zoom_test (Angular 13) with routing & css npm install medium-zoom The image is ...

JavaScript: Retrieving the names of children within a <div> element

Within my structure setup, there is a tower div with inner elements like this: <div class="tower"> <div class="E0">abc</div> <div class="GU">123</di </div> The challenge I am facing is that I need to access the in ...

Convert string IDs from a JSON object to numerical IDs in JavaScript

My goal is to convert the IDs in a JSON object received from PHP into numeric keys using JavaScript. The initial structure of my JSON object looks like this: let foo = {"66":"test","65":"footest"}; What I aim for is to transform it into this format: let f ...

Navigating to a new page once a backend function in Express has finished executing

Recently, I have been experimenting with express web servers to create a website that allows users to sign in using Discord's OAuth2 API. In order to secure sensitive information, I have been utilizing the express-session npm module to store data with ...

An issue encountered with react-router-dom and the useLocation() function

Seeking guidance from experienced developers! I recently started using react-router-dom and encountered an issue with the useLocation() hook in my application. The error message states: "useLocation() may be used only in the context of a <Router> ...

Transferring class titles between div elements

I would like to implement a feature where class names on div elements shift after a brief delay, perhaps 10 seconds. My goal is for the 3 classes listed below to cycle through the div elements and start over once it reaches the last one. For instance: & ...

The Three.js environment experiences lag and a decrease in performance

In the threejs scene, there is a sphere geometry and a plane geometry. The sphere is textured with an image, while the plane geometry is textured with 2D text. The plane geometry is also attached with a click event. When clicking on the plane geometry, ...

Struggling to make the JavaScript addition operator function properly

I have a button that I want to increase the data attribute by 5 every time it is clicked. However, I am struggling to achieve this and have tried multiple approaches without success. var i = 5; $(this).attr('data-count', ++i); Unfortunately, th ...

Combine multiple jQuery click functions into a single function

One issue I am facing on my website is that there are multiple modules, each of which can be disabled by the user. The problem lies in the fact that I have a separate script for each module. Hence, my query: How can I combine these scripts into one (perhap ...

Node.js is executing the CRON process twice

Within my Node.js application, I have set up a CRON job that runs every day at 10 AM to send push notifications to users. However, I am encountering an issue where two notifications are being sent to the user's device each time the CRON job is trigger ...

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

I have implemented the "styled" feature from Material UI to add styles to my components. Right now, I am in the process of cleaning up code to remove console errors. Initially, I encountered this warning message: "Warning: React does not recognize the con ...

Angular and dropdowns: a perfect match

Imagine having a controller like this: myApp.controller('testCtrl', function ($scope) { $scope.cars = [ { carId: '1', carModel: 'BMW', carOwner: 'Nader' }, { carId: '2', carModel: &apos ...

What is the best way to combine two sections in html/css/bootstrap?

I've been trying to create a simple webpage with a navigation bar and a section below it, but I keep running into an issue where there's unwanted white space between the nav bar and the next section in blue. Is there a way to eliminate this gap a ...

jQuery grid view for checking the status as even or odd

I am facing an issue with a gridview where users input integer numbers in a text box, and a jQuery function should display whether the number is even or odd in another text box in the same row. Below is an example with some columns omitted for simplicity: ...

Downloading a folder in Node.js using HTTP

Currently facing an issue with downloading a folder in node js. The problem arises when I make an HTTP request for a whole folder and receive a stream that contains both the folder and files. Existing solutions (like fs.createWriteStream) only seem to work ...

suggesting options comparable to addthis or sharethis

Could you please check out ? There is a sharing box in the bottom right corner that resembles ShareThis. However, as far as I know, ShareThis does not have options for embedding or submitting content. Does anyone happen to know which plugin is being used ...

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

Tips for maintaining authentication in a Next.js application with Firebase even when tokens expire or the page is refreshed

Struggling with firebase authentication flows while building an app using firebase and next.js. Everything was going smoothly until I encountered a bug or error. When my computer remains logged in to the app for some time and I refresh the page, it redirec ...

Exploring the functionality of the load event in JQuery for images

I am encountering an issue with the code provided below: <!DOCTYPE html> <html> <head> <style> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </hea ...