We can create multiple meshes with the same geometry and material. But are there duplicates in the properties of each meshes ?
I'm concerned about memory problems. Thanks !
As you can see in THREE.Mesh code :
THREE.Mesh = function ( geometry, material ) {
THREE.Object3D.call( this );
this.type = 'Mesh';
this.geometry = geometry !== undefined ? geometry : new THREE.Geometry();
this.material = material !== undefined ? material : new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } );
this.updateMorphTargets();
};
And in the clone method :
THREE.Mesh.prototype.clone = function () {
return new this.constructor( this.geometry, this.material ).copy( this );
};
That is to say when creating a mesh from a geometry/a material, or cloning a mesh, its geometry and material properties are references to the same objects. If you modify the material's color, or the geometry's vertices, both original and copy will have the new color/geometry.
I think the best idea is cloning
var Box_geometry = Box_geometry.clone();
var Box_material = Box_material.clone();
I've prepared a simple example in JSFIDDLE.
r.73
Related
I am trying to change the color of my 3D model "behind" the png texture I set (which includes transparency).
I have done a lot of researches, and i finally found an example with a cube which actually works, but I can't understand how to make that with my gltf 3D model (not a BoxGeometry).
METHOD :
Define an array of two materials,
first one is my png texture with transparency = true;
second one is a basic material with its plain color (the color i will be able to change later...)
var materialBack = new THREE.MeshBasicMaterial({color: 0xfadce6});
var materialTxt = new THREE.MeshBasicMaterial({map: mytexture,transparent: true});
var materials = [materialBack, materialTxt];
It works perfect with a cube :
var geometry = new THREE.BoxBufferGeometry();
geometry.clearGroups();
geometry.addGroup( 0, Infinity, 0 );
geometry.addGroup( 0, Infinity, 1 );
var cube = new THREE.Mesh( geometry, materials );
Problem : I can't figure out how to do the same when my model is actually an imported GLTF, and not a "BoxBufferGeometry". It looks like we can't assign an array to o.material :
var loader = new THREE.GLTFLoader();
loader.load(mymodel.glb, function(gltf) {
gltf.scene.traverse((o) => {
if (o.isMesh) {
o.material = materials;
}
scene.add(gltf.scene);
});
I also tried to extract geometry from gltf, then create a new mesh, but without success :
var loader = new THREE.GLTFLoader();
loader.load(mymodel.glb, function(gltf) {
var geometry = gltf.scene.getObjectByName("name").geometry;
mymesh = new THREE.Mesh(geometry,materials);
scene.add(mymesh);
});
Can someone please help ?
is it possible to add border around a material, as attached in the image,
i can set the material color by following code
object.traverse( function ( child )
{
if ( child instanceof THREE.Mesh )
child.material.color.setRGB (1, 0, 0);
});
where object is my loaded 3d model, so am assume there should be a way to draw the border, is there any option in three.js.
As per the #shiva's comment i have tried it with the following code to draw the glow effect
if(childObject.material.name=="material4046")
{
mesh = new THREE.Mesh( globalGeomtry, material );
// mesh.visible = false
scene.add( mesh );
console.log(mesh);
// create a glowMesh
var glowMesh = new THREEx.GeometricGlowMesh(mesh);
mesh.add(glowMesh.object3d);
// example of customization of the default glowMesh
var insideUniforms = glowMesh.insideMesh.material.uniforms;
insideUniforms.coeficient.value = 2;
insideUniforms.power.value = 1.4;
insideUniforms.glowColor.value.set('red');
var outsideUniforms = glowMesh.outsideMesh.material.uniforms;
outsideUniforms.coeficient.value = 2;
outsideUniforms.power.value = 1.4;
outsideUniforms.glowColor.value.set('red');
}
now the ouput is looking as like in the second image,
i want this glow effect as the border around that material, is it is possible
I think this is what you were after. It is achieved with:
new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.BackSide } );
You can see a demo here:
https://stemkoski.github.io/Three.js/Outline.html
Source code of the demo: https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Outline.html
I tried my level best to achieve it, but unfortunately I can't get it, so I decided to do it with the wireframe option to highlight the material:
if(childObject.material.name=="material9695")
{
var mesh = new THREE.Mesh( globalGeomtry, material );
scene.add( mesh );
var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000,wireframe : true } );
var outlineMesh1 = new THREE.Mesh( globalGeomtry, outlineMaterial1 );
scene.add( outlineMesh1 );
}
Now the wireframe is added for the material material9695 so I can identify that the material material9695 is currently selected
This is not the exact answer I expected but it is enough right now after some hard hours
I´m new in Three.js and I need advice. After exporting model from Blender (version 2.71) and loading to scene I see one side textured on my three.....but second side is without texture..... I must enable double side texture, however I don´t know how. I try some examples, but nothing works. I using .PNG texture format with alpha-chanel.. I also try in Blender activated double side, but nothing happends.
Here is my loading code:
var three1;
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('3D/three1.js', addthree1ToScene);
function addthree1ToScene( geometry, materials )
{
var materiall = new THREE.MeshFaceMaterial( materials );
three1 = new THREE.Mesh( geometry, materiall );
three1.scale.set( 0.8, 0.8, 0.8 );
three1.position.set(50,15.5,0);
scene.add( three1 );
}
Thanks for any advice! (Sorry for my english :) )
UPDATE:
..Something like this?..
var three1;
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('3D/three1.js', addthree1ToScene);
function addthree1ToScene( geometry, materials )
{
var materiall = new THREE.MeshFaceMaterial( materials );
for ( var i = 0; i < materials.length; i ++ )
{
var material = materials[i];
material.side = THREE.DoubleSide;
}
three1 = new THREE.Mesh( geometry, materiall );
three1.scale.set( 0.8, 0.8, 0.8 );
three1.position.set(50,15.5,0);
scene.add( three1 );
}
It´s working, BTW :)
For each material in your materials array, set
material.side = THREE.DoubleSide;
three.js r.68
am loading my object in threejs using OBJMTLLoader, the wireframe control is working alone for OBJLoader, but for the OBJMTLLoader it doesn't working
var loader = new THREE.OBJMTLLoader();
loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {
object.children[0].geometry.computeFaceNormals();
var geometry = object.children[0].geometry;
console.log(geometry);
THREE.GeometryUtils.center(geometry);
geometry.dynamic = true;
var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
mesh = new THREE.Mesh(geometry, material);
scene.add( mesh );
} );
function wireframe(){
//alert('hhhhhh');
mesh.material.wireframe = true;
mesh.material.color = new THREE.Color( 0x6893DE );
}
but it causing the following error, so my model is not showing on the viewer,
so here i want to know that we can create wireframe on any kind of 3d models??
object.children[0].geometry is undefined
Even though the OBJMTLLoader returns a THREE.Object3D object which does have .children, you should not assume that the .children is of type THREE.Mesh. So you should actually traverse() the THREE.Object3D in order to find the THREE.Mesh.
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
// do something with the geometry
} );
I am new to three.js and what I done so far is: model a geometry in Blender, export it to JSON, and put it into my three.js scene.
It works fine with the basic three.js materials. Now I want to load a color, specular and normal map to my geometry. But everytime I try to add just a single texture, the geometry disappears in the browser.
Here is my code:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/schuh.js", addModelToScene );
var texture = new THREE.ImageUtils.loadTexture("images/test_COL.jpg");
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshBasicMaterial(map:texture});
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50,50,50);
scene.add( mesh );
}
what did I do wrong?
It looks like you are loading the texture after calling the addModelToScene function.
Try to change your code like this:
function someFunction() {
var texture = new THREE.ImageUtils.loadTexture("images/test_COL.jpg");
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/schuh.js', addModelToScene);
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshBasicMaterial({map:texture});
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50,50,50);
scene.add( mesh );
}