Using three.js to add an image onto an already existing object

I attempted to modify the appearance of an object by adding an image, but all my tests resulted in a white object...

The goal is simply to apply an image to the entire object. Here is my test code:

var obj = scene.getObjectByName('wall_20_118')
var texture = new THREE.ImageLoader().load( 'core/img/3d/shutter.jpg' );
material = new THREE.MeshBasicMaterial({map: texture,side:THREE.DoubleSide });
obj.material = material
obj.material.map.needsUpdate = true

The object turns white, but I cannot see my image.

Any suggestions on how to achieve this?

Thank you in advance

javascript3dthree.js

Answer №1

It's recommended to utilize the THREE.TextureLoader for loading images asynchronously. This means that the image will be loaded and a callback function will be triggered once the loading process is complete, allowing you to use the image as a texture on your object.

To implement this in your code, make the following adjustments:

var targetObject = scene.getObjectByName('wall_20_118');
new THREE.TextureLoader().load( 'core/img/3d/shutter.jpg', function loadTexture(texture) {
  var material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide 
  });
  targetObject.material = material
} );

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

Upon employing the setTimeout method, the element with the id "sign-in-block" will have its display style set to "none" after a delay of 1000 milliseconds

I incorporated the setTimeout() function to make the HTML component appear for 1 second upon pageload. However, I would prefer this component not to load at all. Should I set the delay in the setTimeout() function to 0ms? Alternatively, is there another ...

javascript

Guide: "Sending an AJAX request upon selecting an item in a Vue.js 'Select' element using vue-resource"

Is it possible to send an ajax request through vue-resource when a specific item is selected from a "Select" in vuejs? Check out the demo here: https://jsfiddle.net/xoyhdaxy/ <div class="container" id="app"> <select v-model="selected"> ...

javascriptajaxvue.js

Troubleshooting: Issues with locating CSS and JS files (404 error) while utilizing URL parameters within Django platform

I've designed a dashboard page that showcases various graphs. The page automatically updates the graph data every hour. You can access the page at the following URL: http://localhost/dashboard I'd like to give users the option to specify the ...

javascriptpythonhtmldjango

Discord.js Discord bot error: 'gateway' down

Hello, I could really use some assistance. Two days back, my discord bot began crashing unexpectedly. The error that keeps popping up is: events.js:367 throw err; // Unhandled 'error' event ^ Error [ERR_UNHANDLED_ERROR]: An uncau ...

javascriptnode.jsdiscorddiscord.js

unable to update the table due to issues with the knockout observableArray

My goal is to collect values from form fields and store them as an object in an observableArray. I want to display these objects in a table so that every time I hit the 'add' button, the table should be updated. However, I am facing issues with t ...

javascriptknockout.js

Identifying when a browser is closed with multiple tabs open in Internet Explorer

I need to detect when a browser tab is closed in order to trigger a Struts action. I have successfully implemented this for a single tab using the following JavaScript code: <script type="text/javascript> function loadOut() { if ((window.event.c ...

javajavascriptjqueryajaxstruts

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

javascriptcss

The absence of the 'Access-Control-Allow-Origin' header on the requested resource has been detected in AngularJS

Currently, I am working on an application that utilizes a PHP CodeIgniter RESTful API as the server side and the Ionic framework for the client side app. I have been facing an issue while trying to establish a connection between the client app and the serv ...

javascriptphpangularjscodeigniterionic-framework

Encountering a Peer dependency problem while executing node within a docker environment

Currently, I am utilizing `node-pg-migrate`, which has a peer dependency on `pg`. Here is an excerpt from the library's `package.json` file: "peerDependencies": { "pg": "^4.3.0" }, My attempt to execute the application in Docker involves the fo ...

javascriptnode.jsdockernpm

Tips for retrieving the concealed input value from the div directly preceding

Is it possible for me to retrieve the hidden input value by clicking on the text "upload profile photo"? I don't have much experience in this area. <div> <input type="hidden" value='<?php echo $list['profil ...

phpjavascriptjquery

No matter what I try, the Mongoose query consistently comes back with

I've been attempting to perform a query where I find products with an ID greater than a specified minimum, but it always returns an empty array. const productSchema = require("./productsSchema"); const getProductsGreaterThan = async (min ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to group Angular $http.get() requests for efficiency?

My challenge involves a controller that must retrieve two distinct REST resources to populate two dropdowns. I want to ensure that neither dropdown is populated until both $http.get() calls have completed, so that the options are displayed simultaneously r ...

javascriptangularjs

Issue with form validation, code malfunctioning

I am struggling to figure out why this validation isn't working. Here is the HTML code I'm using: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src="scripts. ...

javascripthtmlvalidation

Retrieving a variable from a JSON array with multiple dimensions using jQuery

Currently, I am working on fetching a multidimensional JSON array using JQUERY. I am facing challenges in extracting specific items from the array and inserting them into the HTML. I need assistance in navigating through the array to retrieve these elemen ...

javascriptjqueryjson

Sequelize.Model not being recognized for imported model

I am encountering an issue while trying to implement a sequelize N:M relation through another table. The error message I keep receiving is as follows: throw new Error(${this.name}.belongsToMany called with something that's not a subclass of Sequelize ...

javascriptmysqlnode.jsexpresssequelize.js

Issue: Exceeding rendering limit. React has a restriction on the number of renders to avoid endless loops

I'm in the process of creating a basic to do list using React, and I've encountered an issue with the handleSubmit() function that I can't seem to resolve. import React, { useState } from "react"; function TaskList() { const [ta ...

javascriptreactjsreact-hooksuse-state

Create distinct 4-digit codes using a random and innovative method, without resorting to brute force techniques

I am working on developing an application that requires generating random and unique 4-digit codes. The range of possible codes is from 0000 to 9999, but each day the list is cleared, and I only need a few hundred new codes per day. This means it's fe ...

javascriptnode.jsalgorithmrandom

Exploring each list item within the specified unordered list

Here is a basic code snippet: var ulreq = $("#abc").children("ul.ghi"); var lists = ulreq.find("li"); for( var i = 0; i < lists.length; ++i){ alert(lists[i].text()); // Display the values in these li }<script src="https://ajax.googleapis.com/ajax ...

javascriptjquery

Error: Invariant Violation occurred with code 29 while using React Apollo and GraphQL

I encountered an error that says "Invariant Violation: 29." Could someone explain what this error means and if I missed something in my code that triggered it? The error occurred when I was trying to import the LocationSearch component into my index.js. im ...

javascriptreactjsmaterial-uiapolloapollo-client

How to Determine the Color of the Intersection Point on an Object Using ThreeJS

Currently, I am experimenting with the ThreeJS ray caster in order to retrieve the color of the object at the intersection point. While there are examples available on how to find the face color, I am facing difficulty in obtaining the texture color at th ...

graphicsthree.js