Avoiding the loading of textures on the obj model in three.js is essential

Can anyone assist with why the texture is not loading?

I attempted to load the texture onto a separate mesh in obj file but it's not working, giving an error. Can someone explain why the material is applied but the texture is not loading?

var manager = new THREE.LoadingManager();
var loader = new THREE.ImageLoader(manager);

var textureBody = new THREE.Texture();

loader.load('tex/Base4.png', function(image) {
  textureBody.image = image;
  textureBody.needsUpdate = true;
});

var meshes = [];    
var objLoader = new THREE.OBJLoader();

objLoader.load('models/bas.obj', function(object) {
  console.log(object);

  object.traverse(function(child) {
    if (child instanceof THREE.Mesh) {
      meshes.push(child);
    }
  });

  var body = meshes[2];

  body.position.y = 2;

  scene.add(body);

  var bumpMapBody = new THREE.TextureLoader().load('tex/untitled2-NM_u0_v0.tif');

  body.material = new THREE.MeshPhonglMaterial({

    map: textureBody
  });
});

Encountering the error message:

Uncaught TypeError: THREE.MeshPhonglMaterial is not a constructor at mucode.js:77 "body.material = new THREE.MeshPhonglMaterial({"at Object.onLoad (OBJLoader.js:385) at XMLHttpRequest. (three.js:32008)

P.S. Can anyone advise on resizing the window and moving the canvas to a separate div?

Answer №1

There appears to be a mistake in your code. The correct term is not MeshPhonglMaterial, but rather MeshPhongMaterial.

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

Metaballs in Three.js enhanced with a unique dot shader

I've been experimenting with a simple dot shader in ThreeJS created by 2pha: Unfortunately, it doesn't seem to work properly for metaballs when using Marching Cubes: . Could this be an issue with UV coordinates? The ThreeJS version includes an & ...

Numerous criteria for selecting a checkbox

I am working with a student database table called student_db, which looks like this: Name Gender Grade City John Male 2 North Dave Male 4 North Garry Male 3 North Chirsty Female 5 East Monica Female 4 East Andrew Male ...

Display a dynamic list of data fetched from an axios Get request in a React MUI dropdown menu

import { useEffect, useState } from "react"; import Box from "@mui/material/Box"; import FormControl from "@mui/material/FormControl"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@m ...

Changing the border of an iframe element using jQuery or Javascript from within the iframe itself

Is it possible to set the border of an iframe to zero from within the iframe itself using JavaScript or jQuery? Any guidance on how this can be achieved would be greatly appreciated. Thank you! ...

In Angular 5, a variable's value becomes undefined once it is subscribed to outside of its assigned

I keep encountering an undefined value when trying to assign the subscribed value to a variable in my code snippet below. service.ts getIpAddress() : Observable<any> { return this.http .get(this.Geo_Api) .map((response: ...

I am interested in extracting specific data from the JSON response

I am trying to extract the value of the message parameter under the messages array where the parameter name is equal to documentId (highlighted in bold below). However, the code I have tried so far does not achieve this as needed. dynamic obj = JsonConver ...

The messageReactionAdd event has suddenly stopped functioning without any explanation

Currently, I am developing a Discord bot that assigns the role "Voteur" to a user when they react to an embed message created by the bot. Everything was functioning perfectly until recently, but for some reason, it has stopped working. The bot successfull ...

AngularJS modal not functioning properly after sending $http request

I have successfully implemented a pop-up modal in my Angular page using code from a reliable source. However, when I include a button for an HTTP request on the same page, the functionality of the AngularJS modal stops working after the HTTP request is mad ...

Using Express middleware in a TypeScript Express application

I'm currently converting the backend of an ExpressJS application to Typescript. While working on the auth.routes.ts file, I encountered an issue with the middleware (authMiddleware). It seems like there might be a typing error, as the same code in the ...

What is the method for retrieving a JSON type object property that is stored inside a data object in a Vue template?

I am facing an issue with retrieving data from a Vue.js app object. data() { return { group1: { id: 'qd4TTgajyDexFAZ5RKFP', owners: { john: {age: 32, gender: 'man'}, mary: {age: 34, gender: 'wom ...

Utilizing Typescript to Inject Generics and Retrieve the Name of an ES6 Module

I am currently working on developing a versatile repository using: Typescript ES6 Angular 1.x However, I am facing challenges in determining the correct way to inject the Entity and retrieve its module name. The main reason for needing the name: I adh ...

I am having trouble starting a server on localhost with the command npm run dev

Currently, I am in the process of developing a website using react.js and tailwindcss. However, when attempting to test my progress by running the "npm run dev" command, I discovered that it is not starting a server on localhost. I am unfamiliar with this ...

Preserving data in input fields even after a page is refreshed

I've been struggling to keep the user-entered values in the additional input fields intact even after the web page is refreshed. If anyone has any suggestions or solutions, I would greatly appreciate your assistance. Currently, I have managed to retai ...

CKEditor's height automatically increases as the user types

I am using a ckEditor and looking for a way to make its height automatically grow as I type. https://i.stack.imgur.com/m7eyi.png <textarea name="description" id="description"> </textarea> <script> CKEDITOR.replace( 'description ...

What is the best way to extend a class in NestJS from another class?

I've encountered an issue while attempting to extend a class service from another class service in NestJS and utilize DI to load it in a third service. The error message I'm receiving from Nest is: Error: Nest can't resolve dependencies of ...

Incorporating conditional statements within a loop

I'm racking my brains over this issue, can you lend a hand? Currently, I am extracting data from a website. The .MyElement containers on the site store either gif or jpg URLs that I need to retrieve. In my node.js app, I am utilizing a Cheerio-base ...

Using Key Press to Rotate Messages - Jquery

Need help with rotating an array based on alphanumeric key presses? Check out the code snippet I've been working on below. Unfortunately, I'm having trouble getting the loop to function properly. Any suggestions or feedback would be greatly appre ...

Leveraging Ajax for transmitting JSON data and performing decoding operations

Previously, I used an AJAX script to fetch data from viewCommentsJson.php. The data retrieved looked like this: [{"comments":"Greta"},{"comments":"John"}]. Is there a way to decode and display this return value properly? Appreciate any assistance. Gret ...

Unveiling Elements as You Scroll Within a Specified Area

I have implemented a jQuery and CSS code to reveal my contact form as I scroll down the page. However, I am facing an issue with setting a specific range for displaying the element while scrolling. Currently, I have only managed to handle the scrolling dow ...

Why does the final value appear when passing an incrementing counter as a prop to multiple React Components created in a loop?

I am currently unraveling the concept of closures in JavaScript. Within this code snippet, I am cycling through the values of the 'items' array using a foreach loop. I have defined a let variable named "count" outside the scope of the loop. Afte ...