如何获得自定义网格的自定义材料

Posted 2023-02-27

【中文标题】如何获得自定义网格的自定义材料

【英文标题】：How could I get custom material for custom mesh

【发布时间】：2014-05-26 23:41:42

【问题描述】：

我想画一座房子。 我是three.js的新手 我知道如何画立方体（墙） 但是如何最好地绘制屋顶？尤其是屋顶正下方的那段墙？ 我知道这样一种方法：

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);

我有一个三角形，但我无法获得这个三角形的必要材料。 我只能获取颜色材料，但我想从材料图片中获取自定义材料。 我怎样才能获得必要的材料，或者可能有另一种方法来获得用于这些目的的自定义材料的自定义网格？

非常感谢您！

【参考方案1】：

听起来您想使用loadTexture，您可以使用它来将图像加载到网格上。

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

查看一些示例 here、here、here 和 here。

更新（见 cmets）

要更改纹理，请保留网格的副本，然后更改纹理并将纹理上的 needsUpdate 设置为 true。最后，在材质贴图上设置纹理。请参阅here 和以下代码：

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

【讨论】：

非常感谢！现在没事了。能否请您帮助了解如何通过鼠标单击更改材料？

@user3527449 - 很高兴为您提供帮助。查看更新。如果对您有帮助，请点赞或采纳答案。