欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Three.js之MeshBasicMaterial材质与MeshPhongMaterial材质

程序员文章站 2022-06-11 11:38:11
...

一、MeshBasicMaterial介绍

MeshBasicMaterial是一种非常简单的材质,这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形,而且也可以显示几何体的线框,对场景中的雾化会有反应。

1、属性

property 属性名 功能
color 颜色 设置材质的颜色
wireframe 线框 设置这个属性的可以将材质渲染成线框,非常适合调试
wireframeLinewidth 线框宽度 如果已经打开了wirefreme,这个属性定义线框中线的宽度
wireframeLinecap 线框线段端点 这个属性定义了线框模式下顶点键线段的端点如何显示。可选的值包括butt(平)、round(圆)和square(方)默认值为round。在实际使用中,这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性。
wireframeLinejoin 线框线段连接点 这个属性定义了线段的连接点如何显示。可选的值有round(圆)、bevel
shading 着色 该属性定义如何着色。可选的值有THREE.SmoothShading、THREE.NoShading和THREE.FlatShading。默认值为THREE.SmoothShading,这将产生一个平滑的对象,看不到单个面
vertexColors 顶点颜色 可以通过这个属性给每个顶点定义不同的颜色。默认值为THREE.NoColors。如果将这个值设置为THREE.VertexColors,渲染器会采用THREE.Geometry对象的colors属性的值。该属性对象CanvasRenderer不起作用,但对WebGLRenderer起作用
fog 雾化 该属性指定当前材质是否受全局雾化效果设置的影响。默认true,如果设置为false,将不会受雾化的影响

2、使用

const meshMaterial = new THREE.MeshBasicMaterial({color:0xeeefff});
const sphereGeometry = new THREE.SphereGeometry(10, 30, 30);
const sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
scene.add(sphere);

参考3dDemo
参考3dDemo2-向量颜色

二、MeshPhongMaterial介绍

该材料使用非基于物理的Blinn-Phong模型来计算反射系数。通过THREE.MeshPhongMaterial,可以创建一种光亮的材质,与在MeshLambertMaterial中使用的Lambertian模型不同,它可以模拟带有高光的闪亮表面(如漆木)。

1、MeshPhongMaterial属性

属性名称 描述 备注
color 材料的颜色,默认为白色 常用
shininess 光滑度,指定高光部分的亮度,默认值为30 常用
specular 材料高光部分的颜色,默认值为0x111111深灰色,如果把它的颜色设置为跟color颜色一样的话,会得到类似金属一样的材质,设置成灰色,则看起来更像塑料
ambient 这是材质的环境色。它与上一章讲过的环境光源一起使用。这个颜色会与环境光源提供的颜色相乘。默认值为白色
emissive 这是该材质发射的颜色。它其实并不想一个光源,只是一种纯粹的、不受其他光照影响的颜色。默认值为黑色。
metal 如果此属性设置为true,Three.js会使用稍微不同的方式计算像素的颜色,以使物体看起来更像金属。要注意的是,这个效果非常小
wrapAround 如果这个属性设置为true,则启动半lambert光照技术。有了它,光下降得更微妙。如果网格有粗糙、黑暗的地区,启用此属性阴影将变得柔和并且分布更加均匀
wrapRGB 当wrapAround属性设置为true时,可以使用THREE.Vector3来控制光下降得速度

2、MeshPhongMaterial使用

const sphereGeometry = new THREE.SphereGeometry(50, 50, 50);
const sphereMaterial = new THREE.MeshPhongMaterial({color: 0x836DED});
sphereMaterial.shininess = 100;
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;
scene.add(sphere);

参考3dDemo