Wavefront OBJ transparency issue

Hi,
I have issue with OBj transparency. Im not sure if material is not setup correctly or its limitation of engine and/or OBJ fileformat.

Example of simple cube: image — ImgBB

Here what it should look like: image — ImgBB

MTL:

newmtl Glass
Ns 900.000000
Ka 1.000000 1.000000 1.000000
Kd 0.062745 0.062745 0.062745
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 1.500000
d 0.500000
illum 1

Do you mind sharing the entire OBJ/MTL asset as a zip file?

Hi,
Thanks for fast reply.

Cube.zip (920 Bytes)

Scene is just simple cube with transparent material. I added another cube with generic material just to test it and explain it a bit more. I am working on many files which will be shown on web but this transparency issue makes them look broken.

I’ve added the asset to the three.js repository and used it in the webgl_loader_obj_mtl example. It renders as expected without glitches. Here the code I have used:

import * as THREE from '../build/three.module.js';

import { MTLLoader } from './jsm/loaders/MTLLoader.js';
import { OBJLoader } from './jsm/loaders/OBJLoader.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';

let camera, scene, renderer;

init();
animate();


function init() {

	const container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.z = 20;

	// scene

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xffffff );

	const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
	scene.add( ambientLight );

	// model

	const onProgress = function ( xhr ) {

		if ( xhr.lengthComputable ) {

			const percentComplete = xhr.loaded / xhr.total * 100;
			console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

		}

	};

	const onError = function () { };

	const manager = new THREE.LoadingManager();

	new MTLLoader( manager )
		.setPath( 'models/obj/' )
		.load( 'Cube.mtl', function ( materials ) {

			materials.preload();

			new OBJLoader( manager )
				.setMaterials( materials )
				.setPath( 'models/obj/' )
				.load( 'Cube.obj', function ( object ) {

					scene.add( object );

				}, onProgress, onError );

		} );

	//

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );

	const controls = new OrbitControls( camera, renderer.domElement );

	//

	window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {

	requestAnimationFrame( animate );
	render();

}

function render() {

	renderer.render( scene, camera );

}

Thanks, I will have to take look at this a bit more. I have someone setup HTML file with using similar setup but with different controls and different lightning. I suspect its this directional light and normalize function but I don’t really know.

import * as THREE from './build/three.module.js';
import { DDSLoader } from './jsm/loaders/DDSLoader.js';
import { MTLLoader } from './jsm/loaders/MTLLoader.js';
import { OBJLoader } from './jsm/loaders/OBJLoader.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';


var container, controls;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;


init();
animate();


function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.y = 10;
    camera.lookAt(new THREE.Vector3(0, 100, 0));


    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xffffff, 1);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    var directionalLight = new THREE.DirectionalLight(0x888888);
    directionalLight.position.set(0, 200, 500).normalize();
    scene.add(directionalLight);
    var directionalLight = new THREE.DirectionalLight(0x888888);
    directionalLight.position.set(0, 200, -500).normalize();
    scene.add(directionalLight);
    var directionalLight = new THREE.DirectionalLight(0x888888);
    directionalLight.position.set(-500, 200, 0).normalize();
    scene.add(directionalLight);
    var directionalLight = new THREE.DirectionalLight(0x888888);
    directionalLight.position.set(500, 200, 0).normalize();
    scene.add(directionalLight);

    // model
    var onProgress = function (xhr) {
        if (xhr.lengthComputable) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
    };
    var onError = function () { };
    var manager = new THREE.LoadingManager();
    manager.addHandler(/\.dds$/i, new DDSLoader());
    new MTLLoader(manager)
        .setPath('models/obj/test/')
        .load('test.mtl', function (materials) {
            materials.preload();

            var object = new OBJLoader(manager)
                .setMaterials(materials)
                .setPath('models/obj/test/')
                .load('test.obj', function (object) {
                    object.position.y = - 0;
                    scene.add(object);
                }, onProgress, onError);

        });


    document.addEventListener('mousemove', onDocumentMouseMove, false);
    window.addEventListener('resize', onWindowResize, false);

    createControls(camera);
}
function createControls(camera) {

    controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', render);
    controls.enableDamping = true;
    controls.dampingFactor = 0.1;
    controls.enableZoom = true;
    controls.rotateSpeed = 0.5;
    controls.autoRotateSpeed = 0.4;
    controls.autoRotate = false;
}
function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
    mouseX = (event.clientX - windowHalfX) / 2;
    mouseY = (event.clientY - windowHalfY) / 2;
}
function animate() {
    requestAnimationFrame(animate);
    controls.update()
    render();
}
function render() {
    renderer.render(scene, camera);
}

OK so I’ve tried your version and I get same result like screenshot before. I’ve tried updating Three but still no luck.

Sorry, but it looks good on my device. I suggest you try to upgrade your graphics driver to the latest version. And also test with another device if possible.