基于ThreeJS修改模型材质

基于ThreeJS修改模型材质

    • 示例描述与操作指南
    • 示例效果展示
    • 实现方式

示例描述与操作指南

当前示例用于展示如何在模型上改变构件的材质。材质和几何体构成网格,决定几何体是否像金属,透明与否,是否展示线框。

常见材质包括:

1、基础材质 MeshBasicMaterial : 对光照无感,给几何体一种简单的颜色或显示线框。

2、兰伯特材质 MeshLambertMaterial :这种材质对光照有反应,用于创建暗淡的不发光物体。

3、锋材质 MeshPhongMaterial :这种材质对光照也有反应,用于创建金属类明亮的物体。

4、标准材质 MeshStandardMaterial :这种材质主要是将锋材质和兰伯特材质的特性结合在一起,它有粗糙度和金属性并 能够改变这些属性。

示例效果展示

基于ThreeJS修改模型材质_第1张图片

实现方式

修改构件材质:在当前示例中,我们展示了四种不同的材质,包括基础材质,标准材质,兰伯特材质和锋材质

// 改变材质种类,此处提供了"MeshBasicMaterial","MeshStandardMaterial",
// "MeshLambertMaterial","MeshPhongMaterial"四种材质的使用,更多材质的学习
// 请前往threejs官网查看
    const changeMaterial = (matreial) => {
      // const cpntCorlorArray = [0.83137256,0.27450982,0.27058825];  // 定义构件的颜色数组
      const cpntCorlorArray = [0.5, 0.5, 0.5];  // 定义构件的颜色数组
      const cpColor = new THREE.Color(cpntCorlorArray[0], cpntCorlorArray[1], cpntCorlorArray[2]); // 创建三维里的颜色
      const component = vizbim.components[componentId[0]]; // 拿到场景中的构件,以便于对它进行材质的修改
      switch (matreial) {
        // 将此构件的材质改成MeshBasicMaterial,
        // THREE中材质的一种,这种材质不受光照影响
        case "基础材质":
          component.material = new THREE.MeshBasicMaterial({
            color: cpColor,
          });
          break;
    
        // 基于物理的标准材料,在实践中,这提供了比MeshLambertMaterial或
        // MeshPhongMaterial更准确和逼真的结果,代价是计算成本更高。
        case "标准材质":
          component.material = new THREE.MeshStandardMaterial({
            color: cpColor,
            metalness: 0.6  //  这种材料多少像金属一样。 非金属材料,如木材或石材,使用0.0,金属使用1.0。
                            // 默认值为0.5。 0.0到1.0之间的值可用于生锈的金属外观。
          });
          break;
    
        // 将此构件的材质改成MeshStandardMaterial,
        // THREE中材质的一种,将specular属性设置成和材质color一样的颜色有类似金属的效果
        // 将specular属性设置成灰色会有类似塑料的效果
        case "锋材质":
          component.material = new THREE.MeshPhongMaterial({
            color: cpColor,
            specular: cpColor,
          });
          break;
    
        // 将此构件的材质改成MeshLambertMaterial,
        // THREE中材质的一种,这种材质适用于暗淡、不光亮表面。
        // 这个材质是本三维引擎默认使用的材质
        case "兰伯特材质":
          component.material = new THREE.MeshLambertMaterial({
            color: cpColor
          });
        default:
          console.log("---");
      }
    }

下载完整代码

你可能感兴趣的:(#,三维示例代码)