Three.js - Attempting to apply a texture to a plane consistently results in a black rendering

I'm having trouble applying a texture to a plane. The image I'm using is 256x256, but it's rendering black instead of showing the texture. Can anyone point out where I might be making a mistake?

//set up the floor

var floorTexture = new THREE.ImageUtils.loadTexture( 'carpet.jpg' ); //256x256
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);

If more code examples are needed, please let me know.

Thank you!

Answer №1

Could it be that the texture is being scaled down (to repeat 100 times on the surface) and as a result, you are not able to see the details clearly? If the texture itself is dark, this could also be a contributing factor. Have you tried using floorTexture.repeat.set(1, 1); to check if the texture is actually being applied properly?

Furthermore, it might be helpful if you share your texture so that others can test it as well. I tested your code with a custom texture in version r.58 and did not encounter any issues.

Answer №2

After facing the same issue for some time, I finally found a solution. Make sure to review and adjust the filesystem permissions of the image. In my case, changing them from 640 to 664 resolved the rendering problem.

Answer №3

If you're experiencing issues, it could be due to insufficient ambient light in the environment. Consider incorporating a white ambient light source to see if it helps resolve the problem.

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

How to disable typescript eslint notifications in the terminal for .js and .jsx files within a create-react-app project using VS Code

I'm currently in the process of transitioning from JavaScript to TypeScript within my create-react-app project. I am facing an issue where new ESLint TypeScript warnings are being flagged for my old .js and .jsx files, which is something I want to avo ...

The validation of pre-filled input fields in Angular Material dialogs is not working as expected

I am encountering an issue with a mat-dialog that opens through an edit button within a (mat-)table. Upon opening the dialog, data is passed to populate certain input fields. One of these inputs has validation requiring that it cannot be left empty. The ...

What is the proper way to utilize document.getElementById() within a standalone js file?

As I dive into learning web development for the first time, I've decided to keep my scripts organized in separate files. However, I'm facing a challenge when trying to access elements from these external files. Below is a snippet of the JavaScri ...

Unable to retrieve observable modifications

In my code file for handling reports, named report.service.ts, I have a method that retrieves reports data. This method simply returns a constant array of report objects from a mock source. Here is the implementation: @Injectable() export class ReportServ ...

Is there a way to selectively add elements to the Promise.all() array based on certain conditions?

Here is the code snippet that I have written: I am aware that using the 'await' keyword inside a for-loop is not recommended. const booksNotBackedUp: number[] = []; for (let i = 0; i < usersBooks.length; i += 1) { const files = await ...

React error: Unexpected token < in JSON when fetching local file

I've encountered an issue with my React app. I have a JSON file in the public directory that I was successfully fetching data from in my main App.js file without any errors. However, after running `npm run build`, I started getting the error message: ...

What is the best way to input a dynamic post array in PHP?

Explaining this might be challenging, but I will do my best. I have multiple input posts with custom conditions, which means there can be as many custom conditions as needed. Here is the HTML: <input name="type[]" value="type 1"> <input nam ...

Looking to update the key name in a script that produces a list sorted in ascending order

I have been working on code that iterates through a flat json document and organizes the items into a hierarchical structure based on their level and position. Everything is functioning correctly, but I now need to change the name of the child elements to ...

Loading JSON data from a file in an AngularJS service

Looking to retrieve JSON data from a file named driverStandings.json, which can be found in the structure from the provided image. I am utilizing a service API to fetch this information by using the code displayed below (refer to image). https://i.sstatic ...

The JSON object is coming back as null

I need some clarification on why I am getting an "undefined" alert. Any assistance you can offer would be greatly appreciated as this problem is holding up progress on a crucial project. JavaScript $.getJSON("item-data.json", function(results) { ...

Passing input parameters from a jQuery dialogue box to a handler file (.ashx) in ASP.NET: A step-by-step guide

Hey everyone! I've set up a jQuery dialog box with two input fields as shown below: <div id="dialog" title="Login"> <form action="" method="POST" id="loginForm"> Username: <input type="text" name="username" /><b ...

How to pass and display a $_GET variable using PHP load file with JavaScript

After encountering an issue with passing a GET variable from index.php to included.php file (loaded by javascript), I came across a helpful solution using the PHP require function on Stack Overflow. In my situation, I had the following code: // for index ...

Having trouble with a basic API Get request?

I'm trying my hand at making a simple get request to fetch a random quote from an API. When I hardcode the change of the quote on button click, everything works smoothly. $(document).ready(function() { $("#quotebtn").on('click', functio ...

Creating a function to limit the display value of Material UI Autocomplete similar to Material UI Multiple Select's renderValue

Incorporating Material UI Features Utilizing the Material UI Multiple Select, you have the ability to truncate the displayed value after selection instead of wrapping onto another line by setting the renderValue to .join for the selected options, enabling ...

Expand all nodes by default in React Sortable Tree

Currently working on a React project and incorporating react-sortable-tree. One problem I'm facing is the lack of an option to automatically expand all nodes by default. Does anyone have any suggestions on how to achieve this? Edit: The options "e ...

Choosing between cjs and esm for a React components library

I'm working on a components library that will soon be published to npm for use in a razzle app. My main query revolves around the best practices for building these packages - should they be built with CommonJS (cjs) or ECMAScript Modules (esm)? And wh ...

What methods can be used to disable the back button functionality within an iframe?

I am facing an issue with embedding YouTube links on my webpage using iframes. When a user clicks on the link, it plays the video in the iframe. Below is the HTML and jQuery code I am using: HTML: <a href="http://www.youtube.com/embed/Q5im0Ssyyus"> ...

What is the method for automatically verifying elements within nested ng-repeats?

My div contains ng-repeat elements that are interconnected. Each ng-repeat element has checkboxes, and I want to automatically check the related elements in other ng-repeats when a top ng-repeat element is checked. Here is the actual representation of the ...

Tips for integrating jwt token into axios request

I am facing an issue with my backend endpoint. I can successfully retrieve a list of customers using jwt token on Postman, but when I try to fetch the list from a React app using axios get request, it fails. After reading through this question, I implemen ...

What is the method for obtaining the input value of an input type number in HTML?

Within my form, there is a number field where users can input scores: <input type="number" min="0" max="100" class="form-control" name="total_score" id='total_score' value="<?php echo $total_score;?>" >(Please input a score from 0-10 ...