three.js浅谈@材质

2018-09-20 本文已影响0人琙灵

材质种类

上一节介绍了光源，但是表现一个物体的表面仅仅需要光源是不够的，光源与材质进行影响，会表现出不同的表面
材质大致分为以下几种

MeshBasicMaterial
MeshDepthMaterial
MeshLambertMaterial
MeshNormalMaterial
MeshPhongMaterial
MeshStandardMaterial
MeshPhysicalMaterial
MeshToonMaterial

材质总类实在太多了，我们介绍几种常用的来管中窥豹

MeshBasicMaterial

这是一种基础材质，光照在上面处处都会表现出一样的颜色，此种材质是其他几种材质的基础

const mat = new THREE.MeshBasicMaterial({
  ...
});

以下是材质构造函数的部分参数

color — 一个十六进制的颜色值。默认为 0xffffff （白色）。
map — 设置纹理图。默认情况下是空的 (null)。
aoMap — 设置 AO 贴图。默认情况下为空(null)。
aoMapIntensity — 设置AO贴图的强度。默认情况下为 1.
specularMap — 设置镜面贴图。默认情况下为空(null)。
alphaMap — 设置 alpha 贴图(alpha 贴图是一种灰度纹理，可以控制表面的不透明性（黑色：完全透明；白色：完全不透明）)。默认情况下为空(null)。
envMap — 设置环境映射。默认情况下为空(null)。
combine — 如何将表面颜色的结果与环境地图相结合。默认情况下使用的是 THREE.MultiplyOperation；而它还有其他两种结合形式：THREE.MixOperation 和 THREE.AddOperation。如果使用混合( mix )的方法进行结合，使用反射率混合两种颜色。
reflectivity — 设置反射率。默认为 1.
refractionRatio — 环境贴图的折射率默认使用 THREE.CubeRefractionMapping 。默认为 0.98。
fog — 确定材料的颜色是否受雾化的影响，这是一个布尔值。默认为 true。值得注意的是它被 *CanvasRender 所忽略，想要这个参数有效需要使用 WebGLRender 。
shading — 定义阴影类型。默认为 THREE.SmoothShading.
wireframe — 是否将几何体呈现为线框的形式，这是一个布尔值。默认为 false。
wireframeLinewidth — 设置的是线条的宽度。默认为 1。不过很遗憾的是，在 Windows 上这个值无论设置多少都只能显示为 1 。
wireframeLinecap — 设置的是线条端点的样式。默认为 round 。这个值只在 CanvasRender 上有效，在 * WebGLRender 上并不会有任何改变。
wireframeLinejoin — 设置的是线条交点的样式。默认为 round。这个值只在 CanvasRender 上有效，在 * WebGLRender 上并不会有任何改变。
vertexColors — 定义定点的颜色，其中有三个选项 THREE.NoColors, THREE.FaceColors 和 THREE.VertexColors。默认是 THREE.NoColors。
skinning — 确定材料是否使用 skinning，这是一个布尔值。默认为 false。
morphTargets — 确定材料是否使用了变形目标。默认为 false。

MeshLambertMaterial

这种材质是一种漫反射材质，表现类型和基础材质基本类似，但是相比基础材质处处的颜色相同，漫反射材质会和光源产生影响，不同光照强度会产生不同的反射强度
并且此种材料多了个重要参数

emissive：设置自发光颜色，值得注意的是材质其实并不会发光，而是在反光中会带有这种颜色

不带自发光
带红色自发光，强度为0.3

MeshPhongMaterial

这种材料是一种镜面反射的材料可以用于表现金属等具有镜面反射的性质
这种材质在MeshLambertMaterial多了种特有的参数

specular 镜面反色光颜色

image.png

参考代码

const THREE= window.THREE=require('three')
const scene = new THREE.Scene();//创建一个场景
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z=150//因为刚刚创建的对象都会位于原点，我们需要把相机拉远一点
//创建一个渲染器,并设置大小，然后把这个渲染器加入到dom中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const light = new THREE.DirectionalLight('#fff',1)
light.position.set(-100,-69,20)//光方向

const mat = new THREE.MeshPhongMaterial({
    color: new THREE.Color("rgb(220,76,65)"),
    shininess:10,
    specular:new THREE.Color("rgb(220,76,65)"),
    emissive:new THREE.Color("rgb(6,53,53)"),
    shading: THREE.FlatShading 
});
// const mat = new THREE.MeshLambertMaterial({
//     color: new THREE.Color("rgb(106,153,153)"),
//     emissive: new THREE.Color("rgb(220,76,65)"),
//     emissiveIntensity: 0.3
// });
// const mat = new THREE.MeshBasicMaterial({
//     color: new THREE.Color("rgb(106,153,153)"),
// });
//创建一个多面体模型，并将模型和材质结合
const ballGeometry = new THREE.IcosahedronGeometry(50,2);
const ball = new THREE.Mesh( ballGeometry, mat );

scene.add(light)//场景中加入光源
scene.add( camera )//场景中加入相机
scene.add( ball )//场景中加入多面体

renderer.render(scene, camera);