How could I get custom material for custom mesh

Question

I would like to draw a house. I'm new to three.js I know how to draw cubes (walls) but how best to draw the roof? And especially the section of the wall directly under the peak of the roof? I know of such a method:

var starPoints = [];

starPoints.push(new THREE.Vector2(-500, 0));
starPoints.push(new THREE.Vector2(0, 500));
starPoints.push(new THREE.Vector2(500, 0));

var starShape = new THREE.Shape(starPoints);

var extrusionSettings = {
    size: 0, height: 0, curveSegments: 0,
    bevelThickness: 0, bevelSize: 0, bevelEnabled: false,
    material: 0
    , extrudeMaterial: 1
    , amount: 100
};

var starGeometry = new THREE.ExtrudeGeometry(starShape, extrusionSettings);

var materialFront = get_material(gparams.kirpich, 1, 1); //materials_list.basic_color; // new THREE.MeshBasicMaterial({ color: 0xffff00 });
var materialSide = get_material(gparams.kirpich, 1, 1);
var materialSide2 = new THREE.MeshBasicMaterial({ color: "#f00" });
var materialArray = [materialFront, materialSide];
var starMaterial = new THREE.MeshFaceMaterial(materialArray);


var star = new THREE.Mesh(starGeometry, materialFront);
star.position.set(0, 250, 0);
//star.rotation.x = -90 * Math.PI / 180;

scene.add(star);

I have got a triange, but I can not get necessary material for this triangle. I can get only color material, but I want to get custom material from a material picture. How could I get necessary material or may be there is another way to get custom mesh with custom material for these purpose?

Thank you very much in advance!

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

It sounds like you want to use loadTexture which you can use to load an image onto your mesh.

texture = THREE.ImageUtils.loadTexture(<your image>);
material = new THREE.MeshBasicMaterial({map: texture});

See some examples here, here, here and here.

Update (see comments)

To change a texture, keep a copy of the mesh, then change the texture and set needsUpdate to true on the texture. Finally, set texture on material map. See here and code below:

 function setTextureImage( imageSrc )
 {         
     texture = THREE.ImageUtils.loadTexture(<your imageSrc>);
     texture.needsUpdate = true;
     m_modelMesh.material.map = texture;         
 }

edited May 23 '17 at 11:57

Community

1
1

answered Apr 13 '14 at 09:48

acarlon

16,764
7
75
94

Thank you very much! Now it's all right. Could you please help to understand how to change material by a mouse click? – user3527449 Apr 15 '14 at 09:26
@user3527449 - glad to help. See the update. Please upvote or accept the answer if it is helpful to you. – acarlon Apr 15 '14 at 10:07

How could I get custom material for custom mesh

1 Answers1