Is there a way to apply numerous textures/materials to a model in Three.js?

Recently, I incorporated my model using the JSONLoader in some sample code. Loading objects with a single texture works perfectly fine, but when I imported a more complex object like a house with multiple textures/materials (such as grass, roof, windows), my model just appeared in plain gray.

You can see my example in action here:

This is how the model (.3ds) looked in Blender before exporting it as .js: Image of model in Blender with textures

Below is the main code snippet I'm currently utilizing:

<script>
// Main code block
// Include essential global variables and functions

init();
animate();

function init() {
    // Set up scene, camera, renderer, controls, etc.
    
    // Load the floor and skybox
    
    // Add something to the scene
}

function addSomething(posx,posy,posz) {
    // Load the 3D model using JSONLoader
}

function addObject(geometry,posx,posy,posz) {
    // Assign materials/textures to different parts of the object and add it to the scene
}

function animate() {
    requestAnimationFrame( animate );
    render();       
    update();
}

function update() {
    // Handle user input and update controls
}

function render() {
    renderer.render( scene, camera );
}

</script>

If you have any insights on properly loading materials/textures for an object like mine, I would greatly appreciate it.

Thank you for your assistance.

Answer №1

Instead of just importing the geometry from the JSON model file, have you considered importing both the geometry and materials?

            loader = new THREE.JSONLoader();
            loader.load( "models/residential_001.js", function( geometry, materials ) {
                house = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
                house.position.set( -120, 100, 1 );
                house.scale.set( 1, 1, 1 );
                scene.add( house );
            } );

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

Utilizing AngularJS and Canvas to Create Dynamic Flowcharts

I'm currently working on incorporating a flowchart using AngularJS and Canvas. Rather than offering users a UI interface for dragging and dropping components, I aim to create a command-line tool where users can input commands to draw shapes like cir ...

Resizable and adaptable side panel

Seeking a template for a responsive sidebar that can be dragged horizontally to resize. Bootstrap compatibility is optional (using bootstrap 4.6, but other versions are acceptable) and jQuery can be utilized. An example that meets some of my requirements: ...

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

challenge with altering data in transmission when using the GET method

$('.textedit').editable('/webpage/skeleton/edit_text/text/process', { loadurl: '/webpage/skeleton/edit_text/loadraw', loaddata: {id: $(this).attr('id'), client: $(this).data('client')}, submitda ...

what is the method to extract the value of a JSON object nested within another JSON object

Can someone please assist me? "_attachments": { "kiran.jpg": { "content_type": "image/jpeg", "revpos": 6, "digest": "md5-mEsoX4ljN1iJlF2bX1Lw2g==", "length": 4601, "stub": true } } I ...

Retrieving data from a popup window with php and javascript

I've been working on creating a pop-up page that will return a value to the parent page and then close. Here is what I have done so far: Main.php: <tr> <th>Project Name</th> <td><input type="text" name="project_name" id="p ...

Determine the distance traveled by the mouse along a vector using Three.js

I am currently working on a project that involves determining the distance traveled by a mouse along a normal vector. The goal is to adjust a group of vertices within an object by moving them along the normal vector of an intersecting face. My current se ...

Update data in PHP dynamically without reloading the page

It would be great if they are doing well! I have encountered a minor issue - everything seems to work perfectly, but it doesn't quite meet my requirements. I am referring to this particular function: <script> var previous = null; var current = ...

How to conditionally set the active class in a React component

I am new to using React and I am encountering some issues. My goal is to add an active class when any of these components are opened. I have attempted a solution but it isn't working as expected. I need assistance in adding a background color to the d ...

What is the best way to create an array using information from the cookies?

Browser cookies information: console.log(document.cookie); //=> name_instagram=true; name_googleplus=true; This is the code I am using: console.log(document.cookie.split(';').filter( (c) => c.startsWith(parts[1])).map( (d) => d.replac ...

Instructions for generating a Fusion chart by utilizing an external json file through the implementation of jquery

As a beginner in Fusion charts, I have successfully built a chart using jsonurl to the chart. The code snippet looks like this: var myChart = new FusionCharts( "FusionCharts/MSColumn3D.swf", "myChartId1", "400", "300", "0", "0" ); ...

"Troubleshooting: Angular ng-show not triggering correctly upon first loading of the

Utilizing Angular's ng-show directive to adjust the display of questions in a quiz and show a result upon completion, everything is functioning as intended except for the initial question. Upon loading the quiz, $scope.image is initialized as false. S ...

Facing the Challenge: Overcoming Concurrency Issues with Promises

In the function "myMethod" within my "gulpfile.js", I aim to generate multiple Promises based on the size of an array passed as a parameter. It is crucial for all promises to be fulfilled before proceeding with any further actions upon calling this functio ...

Discovering the screen dimensions or viewport using Javascript in Bootstrap 4

Is there a method to identify the view port/screen size being utilized by Bootstrap 4 using Javascript? I've been struggling to find a dependable way to determine the current view port after a user resizes the browser. I attempted to use the Bootstra ...

This JavaScript function assigns a value to an input field in a form, only to have the value vanish soon after

I'm attempting to create a dynamic database search using ajax with a form input field. Currently, I am able to choose a text from the suggested list and trigger the "livesearchSelect" event, which sets the value of the input field. However, the set va ...

Tables with customizable forms for multiple entries

I have integrated the editable plugin found on this website to enable in-place editing functionality. The code snippet I am utilizing is sourced from their documentation page, which is intended for adding new records. However, my requirement is to use it ...

A guide to converting variables into a JSON Object in Javascript

I am looking for a way to insert external variables into a JSON object. An example of what I want: var username = "zvincze"; And then, using that variable to inject it into a JSON object: var json = '{"username":"VARIABLE_GOES_HERE"}' var obj ...

Angular: The application has encountered an error due to an undefined property reading issue, resulting in a type error

Here is the code for the company.ts file: company.ts file - List item export class Company{ gstNo:number; contactNumber:number; contactName:string; phoneNo:number; address:string; companyName:string; } import { Injectable } ...

Getting WordPress post author information using React.js: a step-by-step guide

Whenever I attempt to retrieve the users of my WordPress site using this method: https://sitename/wp-json/wp/v2/users Unfortunately, it results in an error message that reads: <title> 403 Forbidden </title> Is there a different way to acc ...

Expanding upon passing arguments in JavaScript

function NewModel(client, collection) { this.client = client; this.collection = collection; }; NewModel.prototype = { constructor: NewModel, connectClient: function(callback) { this.client.open(callback); }, getSpecificCollection: ...