What is causing JavaScript to be unable to access the width property of textureImage?

I am currently facing an issue while trying to render image texture dynamically. The console is showing an error message: Uncaught TypeError: Cannot read property 'width' of undefined. Some have suggested setting needsUpdate to false, but doing so results in a black patch that I find unpleasing. I need it to be set to true. How can I achieve this? The actual code is quite lengthy, so I am indicating where the problem arises.

var g = new THREE.PlaneGeometry(100,100);
var tx =THREE.ImageUtils.loadTexture(imgUrl,undefined,callback,callbackError);
var m = new THREE.MeshBasicMaterial({ 
 map:tx
});
m.map.needsUpdate = true;  //1
tx.needsUpdate = true;  //2
////if 1 and 2 is commented then its ok but rendering is not good
var b = THREE.SceneUtils.createMultiMaterialObject(g,[
  m
 ,new THREE.MeshBasicMaterial({wireframeLinewidth:3,color:0x222222,wireframe:true})
]);
javascriptthree.js

Answer №1

There may arise a scenario where the renderer attempts to utilize a texture before it has finished loading. When you use

var tx =THREE.ImageUtils.loadTexture(imgUrl,undefined,callback,callbackError);

the texture is provided but the actual image is still in the process of loading. Consequently, the renderer tries to determine the width and height in order to ascertain if the texture is a power of 2, resulting in an error at that point.

To address this issue, you can wrap the creation of your object and its placement in the scene within the callback function and pass it as the third parameter to the loadTexture method. Here's an example:

var geometry = new THREE.PlaneGeometry(100, 100);
var tx =THREE.ImageUtils.loadTexture(imgUrl, undefined, function(texture){
    var material = new THREE.MeshBasicMaterial({ 
        map: texture
    });
    var b = THREE.SceneUtils.createMultiMaterialObject(
        geometry,
        [
            material,
            new THREE.MeshBasicMaterial({wireframeLinewidth:3,color:0x222222,wireframe:true})
        ]
    );
}, callbackError);

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

The loading on the Express endpoint does not cease, despite configuring the response status (Encountering problems with Multer and Express)

Currently, I am in the process of developing a filter that evaluates a file's signature obtained through a file's buffer provided by Multer. While Multer supplies the MIME type, additional validation methods are required to confirm if the file ma ...

javascriptexpressmulterendpointmulter-s3

Is there a way to send an array of objects as parameters in JavaScript?

I have an array of objects with the same key name. My goal is to pass each address key inside those objects as a parameter to my API. How can I achieve this? The response I receive looks something like this: { '0': { address: 'abcd' }, ...

javascriptnode.js

What is the top choice instead of using the jQuery toggle() method?

After jQuery deprecated the toggle() method, I began searching for alternative ways to toggle classes on Stack Overflow. I came across various other methods to accomplish the same task (Alternative to jQuery's .toggle() method that supports eventData? ...

javascriptjquery

The Puppeteer software does not automatically shut down the browser once the task is complete

Currently, I have set up puppeteer on my Ubuntu server with Express and Node.js like so: var puppeteer = require('puppeteer'); var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/&ap ...

javascriptexpressasync-awaitpuppeteer

Passing data through events from a parent component to a child component in Vue.js using the $emit method

Having trouble making this work! I have included the $emit code in my click event to trigger a custom event. <h2 class="form_section--header">Business Hours - <a href="javascript:void(0)" v-on:click="$emit('addBusinessHours', null)"> ...

javascriptvue.js

What are the best practices for integrating RxJS into Angular 2 projects?

How can I write code like this in Angular 2? var closeButton1 = document.querySelector('.close1'); var close1ClickStream = Rx.Observable.fromEvent(closeButton1, 'click'); I have attempted various methods to incorporate this into an An ...

javascriptangular

Creating a real-time clock in a single line console log format using NodeJS

To create a live clock in a single line display within a browser, we can utilize setInterval and manipulate the content inside an HTML element like so: var span = document.getElementById('span'); function time() { var d = new Date ...

javascriptnode.js

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

javascripthtmlcsssvg

having difficulty applying a border to the popup modal

Currently, I am utilizing a Popup modal component provided by the reactjs-popup library. export default () => ( <Popup trigger={<button className="button"> Guide </button>} modal nested > {(close: any) =&g ...

javascripthtmlcssreactjstypescript

Node.js API requests often result in undefined responses

As a newcomer to Node.JS, I am currently experimenting with calling a REST API using the GET method. I have utilized the 'request' package available at this link. While the call functions correctly, I encounter an issue when attempting to return ...

javascriptnode.jsrest

Is Postman cooperating, yet Ajax is not playing nice?

I am facing an issue while trying to make a GET request from a server that stores some account data. The request needs an Authorization header for it to work properly. I was able to retrieve the data successfully using Postman, but when I tried doing the s ...

javascriptjqueryajax

Determine if a specific checkbox with a particular id has been selected using JQuery

Looking for assistance on how to determine if a checkbox with a specific ID is checked or unchecked. <input name="A" id="test" type="checkbox" value="A" /> <input name="B" id="test" type="checkbox" value="B" /> <input name="C" id="test1" t ...

javascriptjquerycheckbox

Using both ng-if and ng-click in AngularJS for enhanced functionalities

There's a button that should display a toggle only when the value is greater than 0; otherwise, it shouldn't do anything. This snippet of code shows how things were prior to adding ng-if: <span >{{values.valuesNumber}} <i class= ...

javascriptangularjsangularjs-ng-clickangular-ng-if

Updating model values while dragging with Angular Dragular

Currently, I am experimenting with dragula and its newer version, dragular, on some sample projects. One specific dilemma I am facing involves the implementation of drag and drop functionality in an Angular project. My query pertains to utilizing a list o ...

javascriptangularjsdragula

Retrieving data from a server using the GET method with parameters through axios in a React Native application

As someone new to Web requests, I have encountered a challenge that seems simple but has proven difficult for me. Despite searching the web, I am struggling to get a working response. When I input the URL 'http://www.test.com/callservice.php?action=s ...

javascriptjsonreact-nativehttprequestaxios

Tips for incorporating if-else statements into your code

How can I incorporate an if statement into my code to print different statements based on different scenarios? For example, I want a statement for when the sum is less than 1, and another for when the sum is greater than 1. I attempted to use examples from ...

javascript

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

javascripthtmlcssangularjsvideogular

Struggling with eliminating the # from a URL in AngularJS

I am working on a single-page application built with AngularJS. The URL structure I currently have looks something like this: .../Angular/index.html. However, when I click on a link within the page, the URL transforms to .../Angular/index.html#/addStudent. ...

javascripthtmlangularjsangular-ui-router

The controller and node js request associated are invisible to my HTML page

Here is my HTML code. I have just created a unique controller for a specific part of the code. <div class="mdl-grid" ng-controller="ValueController"> <div class="mdl-card mdl-shadow--4dp mdl-cell--12-col"> <div class ...

javascripthtmlangularjsnode.js

Error encountered: A missing semicolon was detected before a statement while executing code within a for

Although this question may have already been asked, I am struggling to understand why it is not working as expected. I simply want to increment the markers array within a for loop and then add each marker to the vector source using vectorSource.addFeature ...

javascriptjqueryhtml