Black background on obj with PNG textures.

Description of the problem

Hello!

I have problem with transparent UV map in threejs. When I set texture in blender and I click “render” everything it’s ok

but when I load model in threejs by JSONloader the black background load under PNG texture instead blender’s material color.

How can I delete this black background in threejs and use blender material color?

Here is my code:

var scene, camera, renderer;
  var guiControls, controls, stats, axis, lightHelper;
  var sceneBackground;
  var spotLight;
  var cube, ground, toursKnot, text;
  var groundMaterial, boxMaterial, torMaterial, textMaterial;
  var groundGeometry, boxGeometry, torGeometry, textGeometry;
  var SCREEN_WIDTH, SCREEN_HEIGHT;


  var loader = new THREE.JSONLoader();
  loader.load('models/CupME9.json', addModel);

  function addModel(geometry, materials){
    var material = new THREE.MeshFaceMaterial(materials);
    model = new THREE.Mesh(geometry, material);
    model.scale.set(1,1,1);
    model.position.set(5,2,0);
    model.castShadow = true;
    scene.add(model);
  }


  function init(){
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
    renderer = new THREE.WebGLRenderer({antialias:true });



    sceneBackground = renderer.setClearColor(0xdddddd);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMapSoft = true;


  //Controls
    controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.addEventListener('change', render);

  //add helpers
    axis = new THREE.AxisHelper(10);
    scene.add(axis);


  //grid

    color = new THREE.Color("rgb(255,0,0)");
    lineColor = new THREE.Color(0x000000);
    grid = new THREE.GridHelper(50,20,color,lineColor);
    scene.add(grid);

  //camera
    camera.position.set(15,12,10);
    camera.lookAt(scene.position);

    guiControls = new function(){
      this.rotationX = 0.0;
      this.rotationY = 0.0;
      this.rotationZ = 0.0;

      this.lightX = 10;
      this.lightY = 10;
      this.lightZ = 15;
      this.intensity = 1;
      this.distance = 0;
      this.angle = 1.570;
      this.exponent = 0;
      this.shadowCameraNear = 1;
      this.shadowCameraFar = 100;
      this.shadowCameraFov = 50;
      this.shadowCameraVisible = true;
      this.shadowMapWidth = 1024;
      this.shadowMapHeigh = 1024;
      this.shadowBias = 0;
      this.shadowDarkness = 0.5;
      this.target = 'cube';
    }

  //lights
    var ambient = new THREE.AmbientLight(0x404040);
    scene.add(ambient);

    spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(10,10,15);
    spotLight.castShadow = true;
    spotLight.shadow.camera.left = -500;
    spotLight.shadow.camera.right = 500;
    spotLight.shadow.camera.top = 500;
    spotLight.shadow.camera.bottom = -500;
    spotLight.intensity = guiControls.intensity;
    spotLight.distance = guiControls.distance;
    spotLight.shadow.bias = guiControls.shadowBias;
    spotLight.shadow.camera.fov = guiControls.shadowCameraFov;
    spotLight.shadow.camera.near = guiControls.shadowCameraNear;
    spotLight.shadow.camera.far = guiControls.shadowCameraFar;
    spotLight.shadow.camera.visible = guiControls.shadowCameraVisible;
    spotLight.shadow.mapSize.width = guiControls.shadowMapWidth; // default is 512
    spotLight.shadow.mapSize.height = guiControls.shadowMapHeigh;
    spotLight.name = 'Spot light';

    lightHelper = new THREE.CameraHelper( spotLight.shadow.camera )
    scene.add(lightHelper);
    scene.add(spotLight);

  //Plane
    groundGeometry = new THREE.BoxGeometry(40,0,40);
    groundMaterial = new THREE.MeshPhongMaterial({
      color: 0xa0adaf,
      shininess: 150,
      specular: 0xffffff,
      flatShading : true
    });
    ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.castShadow = false;
    ground.receiveShadow = true;
    scene.add(ground);



    var datGUI = new dat.GUI();

    datGUI.add(guiControls, 'rotationX', 0, 1);
    datGUI.add(guiControls, 'rotationY', 0, 1);
    datGUI.add(guiControls, 'rotationZ', 0, 1);
    datGUI.add(guiControls, 'lightX',-60,180);
    datGUI.add(guiControls, 'lightY',0,180);
    datGUI.add(guiControls, 'lightZ',-60,180);

    datGUI.add(guiControls, 'target', ['cube', 'torusKnot','text']).onChange(function(){
        if (guiControls.target == 'cube'){
            spotLight.target =  cube;
        }
        else if (guiControls.target == 'torusKnot'){
            spotLight.target =  toursKnot;
        }
        else if (guiControls.target == 'text'){
            spotLight.target =  text;
        }
    });

    datGUI.add(guiControls, 'intensity', 0.01, 5).onChange(function(value){
      spotLight.intensity = value;
    });

    datGUI.add(guiControls, 'distance', 0, 1000).onChange(function(value){
      spotLight.distance = value;
    });

    datGUI.add(guiControls, 'angle', 0.001, 1.570).onChange(function(value){
      spotLight.angle = value;
    });

    datGUI.add(guiControls, 'exponent', 0, 50).onChange(function(value){
      spotLight.exponent = value;
    });

    datGUI.add(guiControls, 'shadowCameraNear', 0 , 100).name("Near").onChange(function(value){
      spotLight.shadow.camera.near = value;
      spotLight.shadow.camera.updateProjectionMatrix();
      lightHelper.update();
    });

    datGUI.add(guiControls, 'shadowCameraFar', 0 , 100).name("Far").onChange(function(value){
      spotLight.shadow.camera.far = value;
      spotLight.shadow.camera.updateProjectionMatrix();
      lightHelper.update();
    });

    datGUI.add(guiControls, 'shadowCameraFov', 0 , 100).name("Fov").onChange(function(value){
      spotLight.shadow.camera.fov = value;
      spotLight.shadow.camera.updateProjectionMatrix();
      lightHelper.update();
    });

    datGUI.add(guiControls, 'shadowCameraVisible').onChange(function(value){
      spotLight.shadow.camera.visible = value;
      spotLight.shadow.camera.updateProjectionMatrix();
      //lightHelper.update();
    });
    //datGUI.close();

    datGUI.add(guiControls, 'shadowBias', 0 , 1).onChange(function(value){
      spotLight.shadow.bias = value;
      spotLight.shadow.camera.updateProjectionMatrix();
      lightHelper.update();
    });

    /*datGUI.add(guiControls, 'shadowDarkness', 0 , 1).onChange(function(value){
      spotLight.shadow.camera.darkness = value;
      spotLight.shadow.camera.updateProjectionMatrix();
    });*/
    $("#webGL-container").append(renderer.domElement);

    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';

    $("#webGL-container").append(stats.domElement);


  }




  function render(){

    spotLight.position.x = guiControls.lightX;
    spotLight.position.y = guiControls.lightY;
    spotLight.position.z = guiControls.lightZ;

  }



  function animate(){
    requestAnimationFrame(animate);
    render();
    stats.update();
    renderer.render(scene,camera);
  }

  init();
  animate();


  $(window).resize(function(){
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    camera.updateProjectionMatrix();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

  });
Three.js version
  • Dev
  • [ x] r87
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

1 thought on “Black background on obj with PNG textures.

  1. this is not fixed yet ritgh?

    There will be no fix since nothing is broken. As you can see here, the transparent part of a PNG is black per default (since no color is defined for transparent texels). You can change this behavior by setting Material.transparent to true so three.js can perform alpha blending with the respective background pixels. Another approach is to set Material.alphaTest to a value like 0.5. In this case the material is not marked as transparent but transparent texels are discared in the fragment shader in order to produce an alpha cutout.

Comments are closed.