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?
Related
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.
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/
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
My model loads fine with this code:
loader.load( "js/charWalk01.js", function( geometry, materials ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
scene.add( mesh );
} );
However, when I try to use the MeshFaceMaterial (so as to use the material in the JSON file), I get two really odd three.min.js error messages (below).
loader.load( "js/charWalk01.js", function( geometry, materials ) {
materials[ 0 ].morphTargets = true;
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
scene.add( mesh );
} );
The errors are:
TypeError: 'undefined' is not an object (evaluating 'a.map') three.min.js:347
TypeError: 'undefined' is not an object (evaluating 'ma.attributes') three.min.js:429
The JSON file is perfectly normal (created with the OBJ converter), here's the material code from it:
"materials": [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Mat.1",
"colorDiffuse" : [1.0, 1.0, 1.0],
"colorSpecular" : [0.4, 0.52, 0.53],
"illumination" : 4,
"mapDiffuse" : "Character_01.jpg"
}],
Any help as to why those errors might appear?
Cheers,
Ian
You need to pass materials as an argument to MeshFaceMaterials, like so:
loader.load( "js/charWalk01.js", function( geometry, materials ) {
materials[ 0 ].morphTargets = true;
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
scene.add( mesh );
} );
three.js r.53
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 );
});
}