I've been working on adjusting the transparency of polyhedra that are imported using MTLLoader.js and OBJLoader.js. Below is the code snippet I am using to load a polyhedron:
// Model
var obj_file_name = file_name + ".obj";
var mtl_file_name = file_name + ".obj.mtl";
var dual_file_name = file_name + "-dual.obj";
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) { };
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/' );
mtlLoader.load( mtl_file_name, function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/' );
objLoader.load( obj_file_name, function ( object )
{
object.traverse(function (child)
{
if (child instanceof THREE.Mesh)
{
// Polyhedra
child.name = "pdp-faces";
context0.scene.add(child);
// var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
// alert('From loaded OBJ: ' + geometry.vertices.length);
// Edges
var edges = new THREE.LineSegments(new THREE.EdgesGeometry(child.geometry), new THREE.LineBasicMaterial( {color: 0x000000}) );
edges.name = "pdp-edges";
context0.scene.add(edges);
// Vertices
var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
// alert('After EdgesGeometry(): ' + geometry.vertices.length);
var vertices = [];
var isNew;
var tolerance = 0.0000001;
if (geometry.vertices.length > 0)
{
vertices.push(new THREE.Vector3(geometry.vertices[0].x, geometry.vertices[0].y, geometry.vertices[0].z));
}
for (i = 1; i < geometry.vertices.length; i++)
{
l = vertices.length;
isNew = true;
for (j = 0; j < l; j++)
{
var d = geometry.vertices[i].distanceTo(vertices[j]);
if (d < tolerance)
{
isNew = false;
}
}
if (isNew == true)
{
vertices.push(new THREE.Vector3(geometry.vertices[i].x, geometry.vertices[i].y, geometry.vertices[i].z));
}
}
// Fit screen
child.geometry.computeBoundingSphere();
var fov = context0.camera.fov * ( Math.PI / 180 );
var objectSize = child.geometry.boundingSphere.radius;
var distance = 0.7*Math.abs( objectSize / Math.sin( fov / 2 ) );
context0.camera.position.z = distance;
context0.camera.position.x = distance;
context0.camera.position.y = distance;
}
});
}, onProgress, onError );
});
Following the loading process, I attempt to adjust the transparency using the following code:
context0.scene.getObjectByName("pdp-faces").material.transparent = true;
context0.scene.getObjectByName("pdp-faces").material.opacity = (1 - val/100.0);
The issue arises when dealing with polyhedron OBJ files containing multiple color faces, as this method does not effectively change their transparency.
Check out this video to see the problem in action.
Visit the program site for more information.
I would greatly appreciate any assistance or insights you could provide. Thank you in advance, Humberto.