The three.js texture is not displaying properly as it appears black on the screen

I am currently working on a project that involves creating a simple scene with a plane that has a texture applied to it.

For reference, here is the code I am using: https://jsfiddle.net/0w6vfLt4/1/

The issue I am facing is that despite everything else functioning correctly, the texture appears black. If I change the line map: texture to color: white, the plane turns white as expected.

I would greatly appreciate any guidance on what I might be doing wrong and how I can resolve this texture issue.

javascriptthree.js

Answer №1

Check out the solution for utilizing textures in THREE.js Using textures in THREE.js

One approach is to employ the load function with callbacks, demonstrated here: . Additionally, you can set the texture to repeat as shown here: 

// Set up scene, camera, and renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// Load the texture
var loader = new THREE.TextureLoader();
loader.load(
  "https://cdn.glitch.com/62a3a7d1-3c19-4fb7-b1ef-a1c65ba38596%2Fboard.svg?v=1577426114562",
  
  function (texture) {
    var material = new THREE.MeshBasicMaterial({ map: texture });
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 4, 4 );
    
    // Create an 8x8 plane with texture
    var geometry = new THREE.PlaneBufferGeometry(8, 8);
    var plane = new THREE.Mesh(geometry, material);
    scene.add(plane);

    // Render the scene
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);
  },
  
  undefined,

  function (err) {
    console.error('An error happened.');
  }

);
body {
  margin: 0;
  font-family: monospace;
}
canvas {
  width: 100%;
  height: 100%;
}
<script src="https://threejs.org/build/three.js"></script>

Answer №2

In order for the texture image to display properly on mobile devices, it needs to have a resolution of 512 x 512 pixels. I encountered a problem where the texture appeared black on mobile screens. After resizing my texture image from 2000 x 2000 pixels to 512 x 512 pixels, the issue was resolved and the texture displayed correctly.

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

Adding node packages to my webpage

Is there a more efficient method for integrating a node module into my webpage rather than using absolute paths like <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>? Your guidance would be greatly appreciated. ...

javascriptnode.jsnpm

Ways to position divs without causing them to collapse or override existing divs

I am currently developing a demonstration in which users can select jQuery areas to create square blocks. When a user selects an area and adds a comment with color, the entire block is displayed at a specific position. This feature is working perfectly as ...

javascriptjqueryhtmlcssjquery-ui-selectable

Sending files to different URLs based on their type for upload

I've been working with Jquery File Upload and I've implemented some coffeescript that appears like this: $('.fileupload').fileupload dataType: "json" add: (e, data) -> file = data.files[0] types = /(\.|\/)(gif|jpe? ...

javascriptfilecoffeescriptjquery-file-upload

Exploring the use of $ in the outcome of a json for jQuery autocomplete functionality

Trying to implement auto complete functionality. Here is the URL I need to read JSON from: http://openscan.addi.dk/2.0/?action=openScan&field=phrase.title&lower=hest&limit=10&outputType=json After receiving the result, I'm attempting ...

javascriptjqueryjson

What is the best method for submitting form data using AJAX?

I am currently facing an issue with submitting a form that I have created using HTML, JS, PHP, and AJAX. Despite my best efforts, the form does not submit as expected. I suspect that the problem lies within my insert function, but I cannot pinpoint exact ...

javascriptphphtmlajax

Converting a Base64 URL to an image object: A step-by-step guide

I currently have a base64 URL in the following format: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAA My objective is to convert this into an image file with the following properties: [File] 0: File lastModified: 1559126658701 lastModifiedDate: Wed M ...

javascriptreactjsbase64

Tips for optimizing re-rendering in Redux when a single state changes to avoid unnecessary updates in other components

I recently completed a React project that utilizes Redux for state management. In this project, I have implemented two different states stored in the same reducer and accessed by separate components. However, I've encountered an issue where changing t ...

javascriptreactjsreduxrender

When is the scrollHeight determined?

I'm currently working on implementing a CSS transition within an accordion element that I am creating with Angular 7. To ensure proper display of the content inside, I have opted to use overflow-y: visible; as I will not be using this element personal ...

javascriptangulartypescript

What is the best way to assign multiple controllers to a single view in angularJS?

My Attempt: $routeProvider .when('/paintings', { controller: 'imageController' , 'getPaintingImages' templateUrl: 'paintings.html' }) .when('/foods', ...

javascriptangularjsurl-routingangular-routing

Preventing SQL Injection by properly formatting SQL queries

In my Node.js application, I need to construct an SQL query that looks like the one shown below. SELECT * FROM my_table WHERE my_column IN ['name1','name2'] The user inputs an array, such as ['name1', 'name2'], whic ...

javascriptsqlnode.jspostgresqlsql-injection

What is the best approach to return an Observable value only if it is not null, otherwise invoke an HTTP service to fetch and return the

@Injectable() /*** * Profile Management Service */ export class ManageProfileService { private userDetails: any = null; public getUserDetails$: Observable<any> } I am attempting to subscribe to the GetUserDetails Observable from this se ...

javascriptangulartypescript

Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...

javascripthtmlcssreactjsmaterial-ui

Exploring the connection between your NodeJS backend and NextJS, including the process of setting up a proxy

I am currently working on a Social media app using NextJS and Node. I have successfully set up a separate backend using NodeJS for this project. However, I am facing difficulties in connecting the NextJS frontend with the Node backend. Even after setting ...

javascriptnode.jsreactjsnext.jsmern

What is the most efficient way to organize a list within an object using functional programming, taking into account varying criteria for sorting depending on

In this scenario, we have an 'api_fetchData' function that retrieves data from the server. Depending on the route, the data can be in the form of a table or a tree structure. There are two states that need to be updated based on the received data ...

javascriptvue.jsfunctional-programmingramda.js

Typing should be positioned on either side of the declaration

When I define the type MyType, it looks like this: export type MyType = { ID: string, Name?: string }; Now, I have the option to declare a variable named myVar using three slightly different syntaxes: By placing MyType next to the variable ...

javascriptnode.jstypescript

Why is the content overlapping the slider once it ends?

I have been working on a slider that functions perfectly, however, I am facing an issue where the content of the web-page is overlapping with slides 2-3 of the slider. I do not want to set a fixed height for the slider but still want the content after the ...

javascripthtmlcsssliderposition

What is the best way to capture a 403 response when making a GraphQL API call?

My server handles component rendering and generates an HTML response upon request. During the rendering process, the server initiates a GraphQL call for a specific component which sometimes results in a 403 error. Here is the code snippet: const client = ...

javascriptnode.jsreactjsexpressgraphql

Utilizing icons with vuetify's v-select component: a guide

In the code snippet below, I am using a v-select element to display a list of items filled from an array: <v-select v-model="myModel" :items="users" chips :readonly="!item.Active" label="Required users to f ...

javascriptvue.jsvuetify.js

Incorporate various style components to enhance the appearance of an item in ExtJS

I'm attempting to add ellipsis to an item created by ExtJS. My goal is to only modify this item without adding any additional CSS files. After researching, I discovered there is a "style" parameter that accepts CSS styles and attempted the following: ...

javascripthtmlcssextjs

Navigate through an object without changing its original sequence

I understand that the order in which an object's properties are stored or read is not guaranteed. The issue I'm facing is that I am required to work with a large and deeply nested JSON file like the one shown below: { "occasion": 23, "mayorstip ...

javascriptarraysjsonnode.js