I have read a lot of questions and articles about this issue, but anyway png images for models are not transparent. Instead it has white background. Like:
three.js: how to apply alpha-map when using OBJMTL loader?
Assigning Alpha channels to OBJ/MTL model meshes
Three.js png texture - alpha renders as white instead as transparent
Maybe someone has ideas how to fix it and what code to add?
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
var loader = new THREE.OBJMTLLoader();
loader.crossOrigin = 'anonymous';
loader.load( 'model.obj', 'model.mtl', function ( object ) {
object.position.set(0, 0, 0);
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
if ( child.material instanceof THREE.MeshPhongMaterial ) {
child.material.opacity = 1;
// child.material.alphaTest = 0.5;
// child.material.depthWrite = false;
// child.material.depthTest = false;
// child.material.side = THREE.BackSide;
child.material.transparent = true;
}
});
scene.add(object);
});
model.mtl:
newmtl Cap
Ns 37.6553
Ni 1.5000
d 0.9990
Tr 0.0010
Tf 0.9990 0.9990 0.9990
illum 2
Ka 0.7333 0.7333 0.7333
Kd 1.0000 1.0000 1.0000
Ks 0.0980 0.0980 0.0980
Ke 0.0000 0.0000 0.0000
map_Kd Cap_01.png
map_bump Cap_01_Normal.png
bump Cap_01_Normal.png
newmtl Bark
Ns 37.6553
Ni 1.5000
d 1.0000
Tr 0.0000
Tf 1.0000 1.0000 1.0000
illum 2
Ka 0.7333 0.7333 0.7333
Kd 1.0000 1.0000 1.0000
Ks 0.0980 0.0980 0.0980
Ke 0.0000 0.0000 0.0000
map_Kd BroadleafBark.png
map_bump BroadleafBark_Normal.png
bump BroadleafBark_Normal.png
newmtl Leaves
Ns 37.6553
Ni 1.5000
d 1.0000
Tr 0.0000
Tf 1.0000 1.0000 1.0000
illum 2
Ka 0.7647 0.7647 0.7647
Kd 1.0000 1.0000 1.0000
Ks 0.4118 0.4118 0.4118
Ke 0.0000 0.0000 0.0000
map_Kd BroadleafLeaves.png
map_Ks BroadleafLeaves_Spec.png
map_d BroadleafLeaves_Alpha.png
map_bump BroadleafLeaves_Normal.png
bump BroadleafLeaves_Normal.png
Finally! I found solution. I have converted .obj to .js loader with authors of threejs python script (How to convert object to json file for three.js model loader) and then use JSONLoader():
var loader = new THREE.JSONLoader();
loader.load('model.js', function(geometry, materials) {
var material = new THREE.MeshFaceMaterial(materials);
var object = new THREE.Mesh(geometry, material);
...
Related
Trying to grok the transformation matrices in Processing Python Mode.
Dirt simple program that never transforms anything
def setup():
print("original matrix ".format())
printMatrix()
size(200, 200, P3D)
print("after-size matrix ".format())
printMatrix()
line(10,30,90,50)
resetMatrix()
print("after resetMatrix()".format())
printMatrix()
I was expecting the same output throughout the script:
1.0000 0.0000 0.0000 0.0000
0.0000 1.0000 0.0000 0.0000
0.0000 0.0000 1.0000 0.0000
0.0000 0.0000 0.0000 1.0000
But instead, the initial transformation matrix isn't an identity matrix -- it has some extra small values in the fourth column. Until I resetMatrix() I don't get the identity matrix that I expected.
original matrix
001.0000 000.0000 000.0000 -100.0000
000.0000 001.0000 000.0000 -100.0000
000.0000 000.0000 001.0000 -173.2051
000.0000 000.0000 000.0000 001.0000
after-size matrix
001.0000 000.0000 000.0000 -100.0000
000.0000 001.0000 000.0000 -100.0000
000.0000 000.0000 001.0000 -173.2051
000.0000 000.0000 000.0000 001.0000
after resetMatrix()
1.0000 0.0000 0.0000 0.0000
0.0000 1.0000 0.0000 0.0000
0.0000 0.0000 1.0000 0.0000
0.0000 0.0000 0.0000 1.0000
I have exported a simple box mesh from blender as wrl. I have "smart uv unwrap"ed the mesh also. I am using this mesh only for it's geometry and am applying material through threejs. I am then binding a texture with the imported mesh, and i am also setting the needsUpdate property of material (MeshPhongMaterial) to true.
The result is as follows :
The applied texture :
The code excerpts are as follows :
function generateCustomTHREEMeshFromWRL(name) {
return vrmlLoader.parse(getResource(name).content).children[0]
//the getResource(name).content returns the entire wrl file content
}
mesh = generateCustomTHREEMeshFromWRL('unwrapped.wrl')
mesh.material.map = textureLoader.load('lavatile.jpg')
mesh.material.needsUpdate = true;
scene.add(mesh)
The WRL file is as follows :
#VRML V2.0 utf8
#modeled using blender3d http://blender.org
# 'Cube'
Shape {
appearance Appearance {
material Material {
}
}
geometry IndexedFaceSet {
coord Coordinate {
point [ -1.000000 -1.000000 1.000000 -1.000000 -1.000000 -1.000000 1.000000 -1.000000 -1.000000 1.000000 -1.000000 1.000000 -1.000000 1.000000 0.999999 -0.999999 1.000000 -1.000001 1.000000 1.000000 -1.000000 1.000000 1.000000 1.000000 ]
}
colorPerVertex FALSE
color Color {
color [ 0.80 0.80 0.80 ]
}
colorIndex [ 0 0 0 0 0 0 0 0 0 0 0 0 ]
coordIndex [ 1 3 0 -1 7 5 4 -1 4 1 0 -1 5 2 1 -1 2 7 3 -1 0 7 4 -1 1 2 3 -1 7 6 5 -1 4 5 1 -1 5 6 2 -1 2 6 7 -1 0 3 7 -1 ]
}
}
This is a glimpse of the actions I am performing in blender
This is my code:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( '3dAssets/structure1/' );
mtlLoader.load( 'Structure_Combined.mtl', function( materials ) {
materials.preload();
mtl = materials;
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( '3dAssets/structure1/' );
objLoader.load( 'Structure_Combined.obj', function ( object ) {
object.position.y = - 13;
scene.add( object );
});
});
The following is my .mtl file:
newmtl aiStandard2SG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
Ni 1.00
map_Kd Suela_Master_A.jpg
newmtl aiStandard3SG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
Ni 1.00
map_Kd Suela_A2.jpg
Every answer regarding this topic uses .dds texture maps, however at the time of loading, it doesn't seem to even attempt to load jpg files, .dds files add a handler with the following code to allow the loading:
THREE.Loader.Handlers.add( /.dds$/i, new THREE.DDSLoader() );
Maybe there's a similar thing for jpg?
I've successfully loaded a 3d model that I triangulated using Blender. Trouble is its all black and I can't figure out how to get it to show color or textures.
I have an ambient light initialized like this:
function init() {
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(
75, (window.innerWidth) / (window.innerHeight),
1, 10000);
camera.position.x = 500;
camera.position.z = 100;
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.rotateZ(90 * Math.PI / 180);
scene.add(new THREE.AmbientLight(0xffffff));
populate();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
document.addEventListener('keydown', function(event) { keydown(event);
});
}
Here's the .mtl that goes with the .obj
Blender MTL File: 'mq9.blend'
Material Count: 4
newmtl Material__69
Ns 9.803922
Ka 0.000000 0.000000 0.000000
Kd 0.225882 0.225882 0.225882
Ks 0.900000 0.900000 0.900000
Ni 1.000000
d 1.000000
illum 2
newmtl _6___Default
Ns 19.607843
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.900000 0.900000 0.900000
Ni 1.000000
d 1.000000
illum 2
map_Kd missile.jpg
newmtl mq_9
Ns 31.372549
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.990000 0.990000 0.990000
Ni 1.000000
d 1.000000
illum 2
map_Kd predator.jpg
map_Bump predator_Normal.jpg
newmtl mq_90
Ns 31.372549
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.990000 0.990000 0.990000
Ni 1.000000
d 1.000000
illum 2
map_Kd predator.jpg
map_Bump predator_Normal.jpg
The various .jpgs are all found but for some reason they don't seem to be rendering by three.js. I'm wondering if the jpgs need to be modified somehow to reflect the triangulation?
Screenshot:
Actually I am trying to upload these .obj and .mtl file by OBJMTLloader. all is working fine but the image in mtl file is loaded by map_d is not uploaded.
newmtl Eyelashes
Ns 10.0000
Ni 1.5000
d 0.5000
Tr 0.0000
Tf 1.0000 1.0000 1.0000
illum 2
Ka 0.5880 0.5880 0.5880
Kd 0.5880 0.5880 0.5880
Ks 0.0000 0.0000 0.0000
Ke 0.0000 0.0000 0.0000
map_Ka EyelashesDiffuseTexture.jpg
map_Kd EyelashesDiffuseTexture.jpg
map_d EyeLashes_Opacity_Texture.jpg
My code is
var loader = new THREE.OBJMTLLoader();
loader.load( 'upload/model.obj', 'upload/model.mtl', function ( object ) {
object.position.y = -35;
scene.add( object );
} );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
What i need to change in my code.
I try so may example and checked so many answers but not get helpful answer.
Now three.js supports alpha maps. But you need change MTLLoaded.js. Add to createMaterial_
case 'map_d':
// Alpha texture map
params[ 'alphaMap' ] = this.loadTexture( this.baseUrl + value );
params[ 'transparent' ] = true;
break;
three.js r.74
three.js does not support alpha-maps in any of its materials.
The work-around is to bake the alpha-map into the alpha-channel of the diffuse map.
three.js r.66