Textures in ThreeJS that are of type transparent PNG and have

Question

Textures in ThreeJS that are of type transparent PNG and have

Having trouble understanding an issue I encountered with ThreeJS. There's a basic cube on a page and I've got a PNG image of a white question mark, with the rest of the image transparent. When I apply the texture to the cube;

cubeGeometry = new THREE.BoxGeometry( 5, 5, 5 );
cubeMaterial = new THREE.MeshStandardMaterial( { color: this.cubeColor, flatShading: true, map:new THREE.TextureLoader().load( require("./question-mark.png") ) } );
cubeMesh = new THREE.Mesh( cubeGeometry, cubeMaterial );

The transparent pixels in the PNG turn black no matter what I try. What's even more bizarre is that the white pixels in the PNG are showing up as the color of this.cubeColor - which happens to be orange.

I would expect the cube to be orange with the transparent parts of the PNG taking on that color while the white areas remain white.

Can anyone provide some insight?

What I'm seeing:

The texture:

javascript three.js

Answer 1

Answer №1

To apply multiple materials, follow these steps:

  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);

  // Prepare the geometry to use 2 materials
  geometry.clearGroups();
  geometry.addGroup( 0, Infinity, 0 );
  geometry.addGroup( 0, Infinity, 1 );

  const loader = new THREE.TextureLoader();

  // Create 2 different materials
  const material0 = new THREE.MeshBasicMaterial({
    color: 'orange',
  });
  const material1 = new THREE.MeshBasicMaterial({
    map: loader.load('https://i.imgur.com/iFom4eT.png'),
    transparent: true,
  });

  // Assign the materials to the geometry
  const materials = [material0, material1];
  const cube = new THREE.Mesh(geometry, materials);

For example, make sure to use BoxBufferGeometry instead of BoxGeometry

Note that when combining a color and a texture (map) in a single material, the colors are multiplied with each other. This is important to understand as it will affect the final result.

If you want to change the color of a texture, you can do so by setting the color on the corresponding material itself. Here's an example:

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  // Rest of the code for the scene setup ...

  // Define the materials and apply them to the geometry ...

  function render(time) {
    time *= 0.001;  
    
    if (resizeRendererToDisplaySize(renderer)) {
      // Adjust camera aspect ratio ...
    }
    
    // Change the color of the second material based on time
    material1.color.setHSL(time, 1, 0.5);

    // Update rotation and render the scene
    cube.rotation.x = time;
    cube.rotation.y = time;

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

}

// Function for resizing the renderer based on display size ...

main();

Answer 2

To apply multiple materials, follow these steps:

  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);

  // Prepare the geometry to use 2 materials
  geometry.clearGroups();
  geometry.addGroup( 0, Infinity, 0 );
  geometry.addGroup( 0, Infinity, 1 );

  const loader = new THREE.TextureLoader();

  // Create 2 different materials
  const material0 = new THREE.MeshBasicMaterial({
    color: 'orange',
  });
  const material1 = new THREE.MeshBasicMaterial({
    map: loader.load('https://i.imgur.com/iFom4eT.png'),
    transparent: true,
  });

  // Assign the materials to the geometry
  const materials = [material0, material1];
  const cube = new THREE.Mesh(geometry, materials);

For example, make sure to use BoxBufferGeometry instead of BoxGeometry

Note that when combining a color and a texture (map) in a single material, the colors are multiplied with each other. This is important to understand as it will affect the final result.

If you want to change the color of a texture, you can do so by setting the color on the corresponding material itself. Here's an example:

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  // Rest of the code for the scene setup ...

  // Define the materials and apply them to the geometry ...

  function render(time) {
    time *= 0.001;  
    
    if (resizeRendererToDisplaySize(renderer)) {
      // Adjust camera aspect ratio ...
    }
    
    // Change the color of the second material based on time
    material1.color.setHSL(time, 1, 0.5);

    // Update rotation and render the scene
    cube.rotation.x = time;
    cube.rotation.y = time;

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

}

// Function for resizing the renderer based on display size ...

main();

Textures in ThreeJS that are of type transparent PNG and have

Answer №1

Similar questions

Swap out the default URL in components with the global constant

Enhancing Bootstrap UI Typeahead to Display Multiple Fields in Results List

Before I press enter, what kind of function is evaluated by the Node.JS REPL?

What is the best way to retrieve a file's creation date using the file System module in Node.js

The mechanism for transferring data from the server to the client using JavaScript is malfunctioning

Leverage jQuery to organize and categorize JSON information received through an Ajax call

The issue of asynchronous behavior causing malfunctioning of the PayPal button

Sustain information across two pages using Next.js

Tips for updating the color, background, and height of the particle background using react-tsparticles

The Android webview encountered an error: XMLHttpRequest failed to load because the specified Origin <url> is not permitted by Access-Control-Allow-Origin restrictions

Issue with event listener not functioning properly with dynamically created content using AJAX (only using vanilla JavaScript

Interactive Thumbnail Selection for HTML5 Video

Tips for preventing duplicate properties in Material UI when using React JS

Opting for <button> over <a>

Testing NodeJS Database Functionality using Mocha and Asserting with should.js

jQuery error: an unexpected token was encountered

how to show an error in a modal window when encountering an error

Deciphering JSON data into PHP arrays and variables: A step-by-step guide

Failure to send Websocket connection

Tips for effectively handling unique properties of a React component (such as Redux integration and custom CSS) when sharing through NPM distribution