How to add texture to a three.js element

I'm struggling to properly apply a texture to an object I exported. Here is the code I have:

var loader = new THREE.ObjectLoader();
var texture = THREE.ImageUtils.loadTexture('models/mountain/mountain.png');

loader.load("models/mountain/mountain.json", function (obj) {

  var material = new THREE.MeshPhongMaterial({
    map: texture
  });
  mesh = new THREE.Mesh( obj, material );

  scene.add( mesh );
});

Just placing the obj in the scene works fine, but when attempting to set a mesh and texture, an error arises. What should be the correct syntax for this scenario?

javascript3dthree.js

Answer №1

It appears that the "obj" returned by the ObjectLoader is actually an Object3D, with the actual geometry and materials as its children.

To change the material, you will need to iterate through each child of the "obj" like so:

for(var i = 0; i < obj.children.length; i++)
{
    obj.children[i].material = new THREE.PhongMaterial...
}

Additionally, consider using the MTL loader for textured OBJ files. The OBJ/MTL loader is commonly used for this purpose, as shown in the example here:

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

Unraveling the Enigma of Event Handlers: Mastering the Organization of a Sprawling jQuery File within an AJAX

I've created a web application that heavily relies on AJAX and jQuery for DOM manipulation and making AJAX requests. However, I'm facing a problem with my JavaScript file: The issue is that my JavaScript file consists of a huge collection of eve ...

javascriptjqueryajaxnamespacesorganization

Trouble with axios post request, data not reaching Django view

I am attempting my initial post request utilizing axios to a Django view that accepts both POST and GET methods. However, I am receiving an empty dictionary from the request.POST: <QueryDict: {}> [13/Aug/2022 16:44:00] "POST /users/1142606705924 ...

javascriptpythonreactjsdjango

JavaScript error: "null or not an object" bug

I have implemented the JavaScript code below to display horizontal scrolling text on the banner of my website. Surprisingly, it works perfectly fine on one server but throws an error on another server with the message: Error: 'this.mqo' is nul ...

javascriptdom

"Ionic application encountering issue with retrieving data from email inbox, resulting in undefined

I encountered an issue with creating a user account using Ionic Framework and Firebase. Oddly, the email box returns 'undefined' while the password box functions correctly despite being coded in a similar manner. Below is my HTML snippet: <io ...

javascriptangularjsionic-framework

Can one monitor a Vuex module in real time?

I have a single module imported into the Vuex store: import date from './modules/date-select'; export default new Vuex.Store({ modules: {date}, }); Is it possible to "watch" for changes in the entire module within a component? For example: ...

javascriptvue.jsvuejs2vuex

Using Ajax to dynamically generate column headers in Datatables

Is there a way to create a header title from an ajax file? I've been trying my best with the following code: $('#btntrack').on('click', function() { var KPNo = $('#KPNo').val(); var dataString = & ...

javascriptphpjqueryajaxdatatables

Starting a new React project

prtScn I'm encountering an issue while trying to initiate a new react app in Visual Studio Code. I have been following the given instructions as follows: in the visual code terminal : create-react-app sali (sali is the name) npm install node node_m ...

javascriptjsonreactjsvisual-studioproject

Dynamically parsing JSON data with jQuery

I have some JSON data that looks like this: { "default": [ [ 1325876000000, 0 ], [ 1325876000000, 0 ], [ 1325876000000, 0 ], [ 1325876000000, 0 ] ], "direct": [ [ ...

javascriptjqueryjson

Steps for assigning a 404 status code upon promise rejection

My approach to testing the login functionality involves using promises and chaining them. If the user enters an invalid password, the data is rejected; otherwise, it is resolved. I then verify if the user is logged in successfully by chaining these methods ...

javascriptnode.jsexpresspromiseroutes

The callback information is not being properly identified

I need help with deleting an entire row when the Delete button is clicked using jQuery. Here is my current approach: UPDATE: I have made final adjustments to the click function: $(document).on('click', '.delete-assignment',function () ...

javascriptjquerypythonjson

Unable to show the input's value

Need help in taking user input to display calculated values //html <div class="empty"> <h5> Enter Empty Seats </h5> <ion-item> <ion-input placeholder="Enter Number of Empties.." type="number" name="emptySeats" [( ...

javascripthtmltypescriptionic-framework

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

My JQuery append function is calling an ajax function within the onChange method. Here is my code snippet: var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showU(str) { ...

javascriptjqueryajax

Notification continuously appears when clicking outside of Chrome

I have implemented the use of onblur on a text box to display an alert. However, I encountered an issue where if I click outside my Chrome browser after entering text in the text box and then click on the Chrome browser button in the task bar, the alert ap ...

javascriptjqueryhtmlgoogle-chromeonblur

Integrating Facebook login with Cordova using the cordovaOauth plugin

Encountering issues while setting up FB login for my cordova mobile app. A tutorial followed: http://www.codeproject.com/Tips/1031475/How-to-Integrate-Facebook-Login-into-a-Cordova-App#_comments <script src="js/angular.js"></script> <scrip ...

javascriptiosangularjsfacebookcordova

The checkbox click function is not functioning properly when placed within a clickable column

In my coding project, I decided to create a table with checkboxes in each column. <table class="bordered"> <thead> <tr style="cursor:pointer" id="tableheading" > <th>Name ...

javascriptjqueryhtmljsp

Unable to dynamically change the value of the submit button using angular.js

I'm facing an issue with setting the submit button value dynamically using Angular.js. The code I've written below explains my problem. <body ng-controller="MainCtrl"> <input type="submit" value="{{ !model ? 'reset' : mod ...

javascriptangularjs

Guide on making API calls in AngularJS using query strings

I am new to learning about AngularJS and recently came across a helpful article on connecting to an API and using its data in our app. The article specifically focuses on displaying weather information with AngularJS. The only downside is that the weather ...

javascriptangularjs

Prevent JSON-Pretty from being cached for JavaScript files that rely on it

I recently created a Squarespace website using a template that features a unique masonry type gallery layout, which can be viewed at the following link: . Although I was drawn to this template specifically for its gallery design, I've encountered seve ...

javascriptjsonajaxdomsquarespace

Nested loops with synchronous calls running in parallel

Is there a way to make synchronous calls in two nested 'for' loops in Node.JS? I have an Asynchronous call, but I am unsure how to modify it to work synchronously and go to the next iteration when create_db is done! var new_items = []; f ...

javascriptnode.js

Manipulating deeply nested state data in Vuex actions can be a challenge

When working in the store, I have an action that updates certain data. The action is structured like this: setRoomImage({ state }, { room, index, subIndex, image }) { state.fullReport.rooms[room].items[index].items[subIndex].image = image; co ...

javascriptvue.jsvuex