Threejs点线面材质以及模型

1.材质Material

这种材质一般用于物体在渲染时与光交互，属性包括有颜色、透明度、贴图以及阴影属性等，才能达到需要的渲染效果。材质有点材质、线材质、网格材质以及自定义着色器等。如下图：

1.1 点材质PointsMaterial

javascript 复制代码

// 点材质PointsMaterial   
var geometry = new THREE.SphereGeometry(100, 25, 25); //创建一个球体几何对象         
// 创建一个点材质对象         
var material = new THREE.PointsMaterial({             
        color: 0x0000ff, //颜色            
        size: 6, //点渲染尺寸        
   });         
// 点模型对象 参数：几何体 点材质 
var point = new THREE.Points(geometry, material);    
scene.add(point); //网格模型添加到场景中

首先SphereGeometry就是生成几球体；创建一个点材质对象为PointsMaterial，PointMaterial设置color和size属性。

效果图：

1.2 线材质

线材质有两种分别是普通线材质(LineBasicMaterial)和虚线材质(LineDashedMaterial)，通常使用Line等线才会用到线材质。

1.2.1 基础线材质LineBasicMaterial

javascript 复制代码

线材质基础线材质         
var geometry = new THREE.SphereGeometry(100, 25, 25);//创建一个球体几何对象         
// 创建一个点材质对象         
var material = new THREE.LineBasicMaterial({            
    color: 0x0000ff, //颜色        
});         
// 点模型对象 参数：几何体 点材质       
var line = new THREE.Line(geometry, material);     
scene.add(line); //网格模型添加到场景中

LineBasicMaterial一般设置于颜色以及点模型参数为几何体和点材质。

效果图：

1.2.2 虚线材质LineDashedMaterial

javascript 复制代码

线材质虚线材质         
// 虚线材质对象：产生虚线效果      
var geometry = new THREE.SphereGeometry(100, 25, 25);//创建一个球体几何对象 var material = new THREE.LineDashedMaterial({          
    color: 0x0000ff,            
    dashSize: 10,//显示线段的大小。默认为3。           
    gapSize: 5,//间隙的大小。默认为1     
});         
var line = new THREE.Line(geometry, material); //线模型对象     
//  computeLineDistances方法  计算LineDashedMaterial所需的距离数组 line.computeLineDistances();        
scene.add(line); //网格模型添加到场景中

LineDashedMaterial材质属性有颜色、线段大小，默认为3；间隙的大小，默认为1。还需要设置计算LineDashedMaterial所需的距离数组。

效果图：

1.3 网格材质

其实这个网格材质比较多，种类和材质属性也比较多。

1.3.1 基础网格材质对象MeshBasicMaterrial

这种网格材质对象一般不受带有方向光源影响，没有棱角感。

javascript 复制代码

var material = new THREE.MeshBasicMaterial({ color: 0x0000ff, })

1.3.2 MeshLambertMaterial材质

可以实现王哥mesh表面与光源的漫反射光照计算，有了光照计算，物体表面分解的位置才会产生棱角感。

javascript 复制代码

var material = new THREE.MeshLambertMaterial({ color: 0x00ff00, });

1.3.3 高光网格材质MeshPhongMaterial

除了和MeshLambertMaterial一样可以实现光源和网格表面的漫反射光照计算，还可以产生高光效果(镜面反射)。

javascript 复制代码

var material = new THREE.MeshPhongMaterial({ 
    color: 0xff0000,  // 颜色
    specular:0x444444,//高光部分的颜色 
    shininess:20,//高光部分的亮度，默认30 
});

MeshPhongMaterials属性color颜色、specular高光部分的颜色、shininess亮度，默认为30。

1.4 材质和模型对象对应关系

在开发场景中，当要使用材质的时候，要注意材质与模型的匹配对应关系。 如下图：

1.4 .side属性

.side属性的属性值定义面的渲染方式前面后面或双面. 属性的默认值是THREE.FrontSide，表示前面. 也可以设置为后面THREE.BackSide 或双面THREE.DoubleSide。

javascript 复制代码

var material = new THREE.MeshBasicMaterial({ 
    color: 0xdd00ff, // 前面FrontSide 背面：BackSide 双面：DoubleSide 
    side:THREE.DoubleSide, 
});

1.5 材质透明度.opacity

通过材质的透明度属性.opacity可以设置材质的透明程度，.opacity属性值的范围是0.0~1.0，0.0值表示完全透明, 1.0表示完全不透明，.opacity默认值1.0。

当设置.opacity属性值的时候，需要设置材质属性transparent值为true，如果材质的transparent属性没设置为true, 材质会保持完全不透明状态。

在构造函数参数中设置transparent和.opacity的属性值

javascript 复制代码

var material = new THREE.MeshPhongMaterial({ 
    color: 0x220000, // transparent设置为true，开启透明，否则opacity不起作用
    transparent: true, // 设置材质透明度 
    opacity: 0.4,
});

通过访问材质对象属性形式设置transparent和.opacity的属性值

javascript 复制代码

// transparent设置为true，开启透明，否则opacity不起作用
material.transparent = true; 
// 设置材质透明度
material.opacity = 0.4;

2.模型介绍

主要是由点、线、网格等模型来渲染，如下图：

2.1 点模型Points

点模型Points就是几何体里每一个顶点都为一个方形区域。

javascript 复制代码

// 点模型Points 
var geometry = new BoxGeometry(100, 100, 100);//创建一个立方体几何对象 
// 点渲染模式 
var material = new PointsMaterial({    
    color: 0xff0000, //颜色    
    size: 5, //点渲染尺寸 
 }); 
 // 点模型对象 参数：几何体 点材质 
 const cube = new Points(geometry, material) 
 scene.add(cube);

点模型为PointsMaterial，属性有color颜色、size点的渲染大小。

效果图：

2.2 线模型Line

两点确定一条直线，线模型Line就是使用线条去连接几何体的顶点数据。

javascript 复制代码

线模型Line 
var geometry = new BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry 
// 线路渲染模式
var material = new LineBasicMaterial({   
    color: 0xff0000 //线条颜色 
}); //材质对象 
// 创建线模型对象  构造函数：Line、LineLoop、LineSegments const cube = new Line(geometry, material) 
scene.add(cube);

效果图：

2.3 网格模型Mesh

根据三个顶点确定一个三角形，通过三角形面绘制渲染几何体的所有顶点。

javascript 复制代码

// 网格模型Mesh 
var geometry = new BoxGeometry(100, 100, 100); // 三角形面渲染模式 
var meterial = new MeshLambertMaterial({     
    color: 0xff0000, //三角面颜色     
    // wireframe: true,//网格模型以线条的模式渲染 
    }); //材质对象 
var mesh = new Mesh(geometry, meterial); //网格模型对象Mesh 
scene.add(mesh);

效果图：

采用线条来渲染立方体。

javascript 复制代码

wireframe: true,//网格模型以线条的模式渲染

效果图：