show textures - maya to three.js - javascript

i need converted maya to js for simple model with textures
work fine but show without textures
my code:
var loader = new THREE.JSONLoader();
loader.load( "models/t2.js", function(geometry) {
var part1 = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
mesh =new THREE.Object3D();
mesh.add( part1 );
//var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0);
mesh.rotation.set(0,0,0);
mesh.scale.set(30,30,30);
scene.add( mesh );
});
online demo : http://mika.ir/virtual-exhibition/
download code : http://mika.ir/virtual-exhibition/virtual-exhibition.rar

You have to pass in a texture to one of the material objects. Use either MeshLambertMaterial or MeshPhongMaterial and pass in a THREE.Texture. You first have to load the texture and pass a callback. I would do something like the following if the texture you want to load is 'path/texture.png':
var modelTexture = THREE.ImageUtils.loadTexture('path/texture.png', false, loadModel);
function loadModel() {
loader.load( "models/t2.js", function(geometry) {
var part1 = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ map: modelTexture });
mesh =new THREE.Object3D();
mesh.add( part1 );
//var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0);
mesh.rotation.set(0,0,0);
mesh.scale.set(30,30,30);
scene.add( mesh );
});
}

Related

Three.js multi-material implementation in r85

I'm trying to migrate multi-material to r85 but can't seem to see any result.
Previously I had:
mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ material1, material2 ] );
mesh.children[1].material.transparent = true;
Example Pen.
Now I do:
materials = [ material1, material2 ];
mesh = new THREE.Mesh( geometry, materials );
material2.transparent = true;
Example Pen.
But I can't see both materials. Why?

How to view Intrinsic color of an STL file using three.js?

I have a binary STL colored file. I can see the color using the online mesh viewer http://www.viewstl.com/.
I am using the below standard approach to load and visualize the stl file, and it works well. However, the intrisic colors do not appear correctly and are too sensivite to light changes.
Detector.addGetWebGLMessage();
scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var d = 100;
camera = new THREE.OrthographicCamera( - d * aspect, d, d * aspect,- d, 1, 1000 );
camera.position.set( 0, 0, 200 );
camera.lookAt( scene.position );
scene.add( camera );
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = 0;
directionalLight.position.y = 0;
directionalLight.position.z = 1;
directionalLight.position.normalize();
scene.add( directionalLight );
var loader = new THREE.STLLoader();
var material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 0 } );
// Colored binary STL
var stlfile = "myBinarySTLColoredFile.stl"
loader.load( stlfile, function ( geometry ) {
var meshMaterial = material;
if (geometry.hasColors) {
meshMaterial = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors });
}
mesh = new THREE.Mesh( geometry, meshMaterial );
scene.add(
mesh.position.set(-100, -100, 0);
});
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true } );
renderer.setSize(....);
var container = document.getElementById('`enter code here`flex2');
Question: How to visualize the color enclosed in the STL file ?
Thanks
I finally succeed to render correctly the colored object.
I use PLYLoader instead of STLLoader.
Apparently, three.js STL api do not manage the color.
There is no right answer. The color will depend on the light.
See the clear thread Realistic lighting (sunlight) with Three.js?
To get the original colors and no directional lighting, remove the directional light and crank the ambient light up to full brightness:
...
scene.add( camera );
var light = new THREE.AmbientLight( 0xFFFFFF ); // Full-bright white light
scene.add( light );
var loader = new THREE.STLLoader();
...
If that doesn't give you the desired result, please add screenshots of the actual and desired visual look to your question.
This is an old question, but for anyone else who comes across it, I don't think the accepted answer about using the PLYLoader instead of the STLLloader is correct, the STLLoader appears to support embedded color in binary STLs just fine in the example.
One possible cause of the OP's issue using THREE.VertexColors in THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors }) instead of true as in the docs/example.

THREE.js Geometry map does not appear

Following I'm loading a image map on a custom geometry,
it represents the brown colored geometry on the picture above:
var aqua_ground_geo = new THREE.Geometry();
var top0 = new THREE.Vector3(aqua_ground_geo_x_NEG, user_data['aqua_soil_calc_b_y'], aqua_ground_geo_z_NEG);
var top1 = new THREE.Vector3(aqua_ground_geo_x_POS, user_data['aqua_soil_calc_b_y'], aqua_ground_geo_z_NEG);
var top2 = new THREE.Vector3(aqua_ground_geo_x_NEG, user_data['aqua_soil_calc_f_y'], aqua_ground_geo_z_POS);
aqua_ground_geo.vertices.push(top0);
aqua_ground_geo.vertices.push(top1);
aqua_ground_geo.vertices.push(top2);
aqua_ground_geo.faces.push( new THREE.Face3(0,1,2) );
aqua_ground_geo.computeFaceNormals();
aqua_ground_geo.computeVertexNormals();
var textureUrl = "http://www.lifeguider.de/wp-content/uploads/aquag/bodengrund/dennerle_kies_naturweiss_1-2mm.jpg";
var aqua_bodengrund_tex = new THREE.TextureLoader().load( textureUrl );
var aqua_bodengrund_mat = new THREE.MeshLambertMaterial( {
map: aqua_bodengrund_tex,
color: 0xffffff,
} );
aqua_bodengrund_mat.shading = THREE.FlatShading;
aqua_bodengrund_mat.side = THREE.DoubleSide;
var aqua_bodengrund = new THREE.Mesh( aqua_ground_geo,aqua_bodengrund_mat);
On a simple THREE.BoxGeometry all works as expected with the same material (it represents the cube in the picture above):
var lala = new THREE.BoxGeometry( 100, 100, 100 );
var lala2 = new THREE.Mesh( lala,aqua_bodengrund_mat);
I'm not an expert in 3D, what is missing in my code that the image texture will be shown correctly?
You need to apply the texture in the callback of the THREE.TextureLoader. Check also the documentation here; the second argument (onLoad) is the callback.
var textureUrl = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif";
var aqua_bodengrund_mat = new THREE.MeshLambertMaterial( {
color: 0xffffff
});
var onLoad = function( texture ){
aqua_bodengrund_mat.map = texture;
aqua_bodengrund_mat.needsUpdate = true;
}
var loader = new THREE.TextureLoader();
loader.load( textureUrl, onLoad );
See this fiddle for a demo.
UPDATE
In case you have a custom geometry you also need to calculate the UVs for showing the texture correctly. I used this answer here to calculate them in another fiddle here
Note. The UVs in my fiddle are calculated for faces in the XY plane, if your faces are in another plane you will have to update accordingly...

How to merge three.js meshes into one Mesh?

Is it possible in Three.js to merge two or more meshes, with different materials?
The solutions I've found, merges geometry only, or just puts the Meshes into one Object3D or Group.
Yes: Kind-of (see the comments attached to the question and this answer post):
var blueMaterial = new THREE.MeshPhongMaterial( {color: 0x0000FF } );
var redMaterial = new THREE.MeshPhongMaterial({ color:0xFF0000 });
var meshFaceMaterial = new THREE.MeshFaceMaterial( [ blueMaterial, redMaterial ] );
var boxGeometry = new THREE.BoxGeometry( 10, 10, 10 );
for ( var face in boxGeometry.faces ) {
boxGeometry.faces[ face ].materialIndex = 0;
}
var sphereGeometry = new THREE.SphereGeometry( 5, 16, 16 );
sphereGeometry.applyMatrix( new THREE.Matrix4().makeTranslation(0, 5, 0) );
var mergeGeometry = new THREE.Geometry();
mergeGeometry.merge( boxGeometry, boxGeometry.matrix );
mergeGeometry.merge( sphereGeometry, sphereGeometry.matrix, 1 );
var mesh = new THREE.Mesh( mergeGeometry, meshFaceMaterial );
scene.add( mesh );
I went with a cube and a sphere because a box for example wants to know a material id for each of its faces.
http://jsfiddle.net/v49ntxfo/

How to merge Meshes with Textures?

I have several meshes; each mesh has a different texture. Now I want to merge them all:
mergedGeo.merge( mesh.geometry, mesh.matrix);
This works fine.
But when I want to add the merged mesh to the scene, they information about the texture on each mesh is lost:
mergedGeo.computeFaceNormals();
group = new THREE.Mesh( mergedGeo, new THREE.MeshBasicMaterial({ color: parseInt("ffffff", 16) }));
group.matrixAutoUpdate = false;
group.updateMatrix();
scene.add( group );
I am using Revision 68.
Each face has to have a proper material index.
Merge your geometries like so, incrementing materialIndexOffset each time, starting from 0:
mergedGeo.merge( mesh.geometry, mesh.matrix, materialIndexOffset );
...
Then construct a materials array:
var materials = [];
materials.push( material1 );
materials.push( material2 );
....
Then create your mesh:
mesh = new THREE.Mesh( mergedGeo, new THREE.MeshFaceMaterial( materials ) );
three.js r.68

Categories