I am playing with Three.js. I am working on a project that uses an old version of Three.js. I'm trying to replace the old library with the new one (r71). Everything is going well except the texture mapping.
In the old project we use the Face4 which is deprecated and have been removed in the newest version of Three.js. So I have created two Face3 instead of just one Face4. Now the question is: how can I make one texture to cover both Face3 as they were like a single Face4?
Old pseudo-code using Face4
numberOfFaces = 10;
function createMyGeometry(){
var geometry = new THREE.Geometry();
...
for (var i = 0; i < numberOfFaces; i++) {
var face = new THREE.Face4(v1.index, v2.index, v3.index, v4.index, [v1.clone(), v2.clone(), v3.clone(), v4.clone()]);
face.centroid.add(v1).add(v2).add(v3).add(v4).divideScalar(4);
face.normal = face.centroid.clone().normalize();
face.materialIndex = matIdx;
geometry.faces.push(face);
geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone(), uv4.clone()]);
}
...
return geometry;
}
for (var i = 0; i < numberOfFaces; i++) {
var texture = THREE.ImageUtils.loadTexture("MyImage"+ i + '.jpg');
var material = new THREE.MeshBasicMaterial();
material.map = texture;
material.side = THREE.FrontSide;
materials.push(material);
}
materials = new THREE.MeshFaceMaterial(materials);
myGeometry = new THREE.Mesh(createMyGeometry(), materials);
scene.add(myGeometry);
Pseudo-code using Face3
numberOfFaces = 10;
function createMyGeometry(){
var geometry = new THREE.Geometry();
...
for (var i = 0; i < numberOfFaces; i++) {
var face1 = new THREE.Face3(v1.index, v2.index, v3.index, [v1.clone(), v2.clone(), v3.clone()]);
var face2 = new THREE.Face3(v1.index, v3.index, v4.index, [v1.clone(), v3.clone(), v4.clone()]);
face1.materialIndex = matIdx;
face2.materialIndex = matIdx;
geometry.faces.push(face1);
geometry.faces.push(face2);
geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone(), uv4.clone()]);
}
...
return geometry;
}
for (var i = 0; i < numberOfFaces; i++) {
var texture = THREE.ImageUtils.loadTexture("MyImage"+ i + '.jpg');
var material = new THREE.MeshBasicMaterial();
material.map = texture;
material.side = THREE.FrontSide;
materials.push(material);
}
materials = new THREE.MeshFaceMaterial(materials);
myGeometry = new THREE.Mesh(createMyGeometry(), materials);
scene.add(myGeometry);
You should just do the same thing with vertex uvs as with vertices.
For example:
geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone()]);
geometry.faceVertexUvs[0].push([uv1.clone(), uv3.clone(), uv4.clone()]);
Related
i am not able to apply different material on each face of IcosahedronGeometry.
here is my code.below code is working fine for boxgeometry.
var textureLoader = new THREE.TextureLoader();
var texture0 = textureLoader.load( 'google.png' );
...
var texture19 = textureLoader.load( 'google.png' );
var materials = [
new THREE.MeshBasicMaterial( { map: texture0 } ),
...
new THREE.MeshBasicMaterial( { map: texture19 } )
];
var faceMaterial = new THREE.MeshFaceMaterial( materials );
var globe = new THREE.IcosahedronGeometry(75,0);
var Ico = new THREE.Mesh(globe, faceMaterial);
Ico.rotation.z = 0.5;
scene.add(Ico);
also tried to set material index for each face with no luck.See below code.
var globe = new THREE.IcosahedronGeometry(75,0);
globe.materials =materials;
for( var i = 0; i < globe.faces.length; i ++ ) {
globe.faces[i].materialIndex = i;
}
var Ico = new THREE.Mesh(globe, globe.materials);
can anybody point me to related example or any solution?
Thanks
I'm a very green newb attempting to understand textures and geometries. I don't know what's wrong with my code, someone have one idea....
var loader = new THREE.STLLoader();
loader.load('../Programa/imagens/imagem.stl',function (geometry){
var geometria = new THREE.Geometry().fromBufferGeometry(geometry);
geometria.computeBoundingBox();
var max = geometria.boundingBox.max,
min = geometria.boundingBox.min;
var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
var faces = geometria.faces;
geometria.faceVertexUvs[0] = [];
for(var i = 0; i < faces.length; i++){
var v1 = geometria.vertices[faces[i].a],
...``
geometria.faceVertexUvs[0].push([
new THREE.Vector2((v1.x + offset.x)/range.x, (v1.y + offset.y)/range.y),
...
]);
}
geometria.name = "Projeto 1";
var material = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('../Programa/imagens/uvmapping.jpg')
});
var mesh = new THREE.Mesh(geometria, material);
geometria.uvsNeedUpdate = true;
geometria.colorsNeedUpdate = true;
mesh.scale.set(0.029, 0.029, 0.029);
scene.add(geometria);
});
while using Three.js i met a problem connected with vertexes colors.
I created BufferGeometry , which consists of squares made by 2 triangles.
var geometry = new THREE.BufferGeometry();
// filling positions and colors
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
var material = new THREE.MeshPhongMaterial(
{
side: THREE.OneSide, vertexColors: THREE.VertexColors
});
GridFloor = new THREE.Mesh(geometry, material);
GridFloor.rotation.x = Math.PI / 2;
GridFloor.geometry.dynamic = true;
GridFloor.geometry.__dirtyColors = true;
scene.add(GridFloor);
Everything works fine, until i change vertex colors. I am changing them , trying to update , but nothing happens...
var newColor = new THREE.Color(0xff0000);
var colors = GridFloor.geometry.attributes.color.array;
for (var i = 0, j = 0; i < 4; i++, j += 3) {
var index = INTERSECTED.indices[i % 3] * 3;
colors[index] = newColor.r;
colors[index + 1] = newColor.g;
colors[index + 2] = newColor.b;
}
GridFloor.geometry.colorsNeedUpdate = true;
INTERSECTED.colorsNeedUpdate = true;
Thank you for your help.
Here is how you set the needsUpdate flag for BufferGeometry.
bufferGeometry.attributes.attributeName.needsUpdate = true;
three.js r.68
I'm working with three.js and I have a plane shape. This shape should get a texture. Below you can see how I try this. The problem is, that the texture is only shown in two stripes at two edges of the shape. If I take higher values for texture.repeat this stripes get thinner.
I know there is a related topic here Three.JS Is it possible to render a texture on shapeGeometry?, but I can't understand how that could help me.
//Draw Floorshape
var points_floor = [];
points_floor.push(new THREE.Vector2(edges[edges.length-1][edges[3].length-1][0], edges[edges.length-1][edges[3].length-1][1]));
for (var i = 0; i < edges.length; i++) {
for (var j = 0; j < edges[i].length; j++) {
points_floor.push(new THREE.Vector2(edges[i][j][0], edges[i][j][1]));
}
}
var shape_floor = new THREE.Shape(points_floor);
var floorGeometry = new THREE.ShapeGeometry(shape_floor);
var texture = new THREE.ImageUtils.loadTexture("./img/tileable_wood_texture_by_ftIsis_Stock.jpg");
texture.repeat.set(0.1, 0.1);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
var materialFloor = new THREE.MeshBasicMaterial({
map : texture,
side : THREE.DoubleSide
});
var floor = new THREE.Mesh(floorGeometry, materialFloor);
floor.overdraw = true;
I'm trying to make a terrain editor. So I have a plane with multiple materials on it, which I initialize like so:
var materials = [];
var grasstexture = THREE.ImageUtils.loadTexture('Img/grass.png', {}, function() { });
var rocktexture = THREE.ImageUtils.loadTexture('Img/rock.png', {}, function() { });
materials.push(new THREE.MeshPhongMaterial({color: 0xffffff, map: grasstexture}));
materials.push(new THREE.MeshPhongMaterial({color: 0xffffff, map: rocktexture}));
// Plane
this.geometry.materials = materials;
for(var i = 0; i < this.geometry.faces.length; i++)
{
this.geometry.faces[i].materialIndex = 0;
}
this.geometry.dynamic = true;
this.mesh = new THREE.Mesh( this.geometry, new THREE.MeshFaceMaterial( ) );
this.mesh.receiveShadow = true;
The result is a square plane stripped with the two textures.
Now, I can't seem to update the materialIndex for each vertex during the runtime. I have tried:
face.materialIndex = 1;
for(var i = 0; i < geo.materials.length; i++){
geo.materials[i].needsUpdate = true;
}
for(var i = 0; i < this.geometry.faces.length; i++)
{
geo.faces[i].materialIndex = 0;
}
for(var i = 0; i < geo.materials.length; i++){
geo.materials[i].needsUpdate = true;
}
this.mesh.needsUpdate = true;
this.mesh.material.needsUpdate = true;
geo.verticesNeedUpdate = true;
geo.normalsNeedUpdate = true;
geo.colorsNeedUpdate = true;
geo.computeFaceNormals();
geo.computeVertexNormals();
geo.computeCentroids();
geo.computeTangents() ;
And every other 'materialIndex' and 'needsUpdate' variable in Three.js I was able to find, but still nothing happens. How do I force an update on the material indices?
You can't. materialIndex is only used in the first render to partition the geometry into chunks, with each chunk having the same material. Also, you cannot re-partition the chunks.
What you can do, however, is change a material in the materials array.
materials[ 0 ] = new THREE.MeshBasicMaterial();
You do not need to set any needsUpdate flags to true after doing so, either.
An alternate thing you can do is give each face it's own material from the start, and then, for example, just change a material's texture.
mesh.geometry.materials[ 0 ].map = texture;
texture.needsUpdate = true;