这节我们浅谈一下THREE的材质。材质就是物体的皮肤,决定物体的表面。THREE的材质有很多种,他们有的和到相机的距离有关,有的和面的法向量角度有关,有的不受光照的影响,有的受到光照的影响会产生反射效果或者漫反射效果,也可以将多个材质合成一个。
1. THREE.MeshBasicMaterial(基础材料)。
2. THREE.MeshDepthMaterial(深度材料)。
3. THREE.MeshNormalMaterial(法向材料)。
4. THREE.MeshFaceMaterial(面材质)。
5. THREE.MeshLambertMaterial(Lambert材质)。
6. THREE.MeshPhongMaterial(Phong材质)。
7. THREE.LineBasicMaterial(线性基础材质)。
8. THREE.LineDashMaterial(虚线材质)。
接下来我们详细的讲一下这些材质。

1.THREE.MeshBasicMaterial(基础材料)

基础材质非常简单,它不受光照影响。它常用的一些属性如下:
- color 材质的颜色
- wireframe 设置该属性可以将材质设置成线框
- wireframeLinewidth 线框中线的宽度
- wireframeLineLinecap 线框线段端点如何显示

var mesh = new THREE.MeshBasicMaterial({color: 0xffaa00})

2.THREE.MeshDepthMaterial(深度材料)

这种材质不受光照影响,同时也不能设置材质颜色,它只与物体到摄像机的距离有关,越远越暗。它常用的一些属性如下:
- wireframe 是否显示线框
- wireframeLineWidth 线框线的宽度

var material = new THREE.MeshDepthMaterial();

3.THREE.MeshNormalMaterial(法向材料)

这种材料表面颜色只与面的法向量方向决定。它常用的一些属性如下:
- wireframe 设置该属性可以将材质设置成线框
- wireframeLinewidth 线框中线的宽度
- shading 设置着色方法FlatShading表示平面着色SmoothShading表示平滑着色

var material = new THREE.MeshNormalMaterial();

4.THREE.MeshFaceMaterial(面材质)

这是一个材料容器,他可以为每个面设置不同的材料。直接看代码:

var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
materialArray.push(new THREE.MeshPhongMaterial({color: 0x0051ba}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xffd500}));
materialArray.push(new THREE.MeshLambertMaterial({color: 0xff5800}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xC41E3A}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xffffff}));
var faceMaterial = new THREE.MeshFaceMaterial(materialArray);
var cubeGeom = new THREE.BoxGeometry(3, 3, 3);
var cube = new THREE.Mesh(cubeGeom, faceMaterial);

我们给一个正方体的六个面设置了六个不同的材质。

5.THREE.MeshLambertMaterial(Lambert材质)

它是一种高级材质,可以对光源产生反应创建不光亮的表面。除了上面材料的属性外,还有一些独特的属性,
- ambient 这是材料的环境色,这个颜色会与环境光源叠加的颜色相乘,默认为白色。
- emissive 这是材料的发射颜色,就是不受光照时发出的颜色,默认为黑色。
- wrapAround 开启此属性会让阴影变得柔和,分布均匀。
- wrapRGB 开启此属性,可以使用THREE.Vector3来控制光下降的速度。

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

6.THREE.MeshPhongMaterial(Phong材质)

这个材料除了MeshLambertMaterial属性外还有一些额外的出行
- specular 指定光照高亮部分的颜色,如果这个颜色与color属性的颜色相同,得到一个类似金属的材质。
- shininess 高亮部分的亮度。
- metal 开启后使材质更像金属。

var material = new THREE.MeshPhongMaterial({color: 0x7777ff});

这个效果非常好

7.THREE.LineBasicMaterial(线性基础材质)

这个材质可以为线设置材质,属性为
- color 定一线的颜色 如果指定vertexColors,这个属性会被忽略
- linewidth 该属性定义显得宽度
- linecap 该属性定义线端点如何显示
- linejoin 该属性定义线连接点如何显示
- vertexColors 将该属性设置成THREE.VertexColors值,可以给每一个定点设置颜色
- fog 设置是否雾化(需开启全局雾化)。

var material = new THREE.LineBasicMaterial({
opacity: 1.0,
linewidth: 1,
vertexColors: THREE.VertexColors
});

8.THREE.LineDashMaterial(虚线材质)

该属性和线性基础材质几乎相同,额外的属性为
- scale 缩放dashSize和gapSize
- dashSize 虚线段长度
- gapSize 虚线空隙长度

var material = new THREE.LineDashedMaterial({
vertexColors: true,
color: 0xffffff,
dashSize: 1,
gapSize: 1,
scale: 4
});

以上就是THREE的材质,具体如何使用我们日后在实战项目中讲解。
转载请注明原文地址 郭志强的博客

初探three.js材质的更多相关文章

  1. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  2. three.js材质

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. 初探three.js

    相信大多数选择前端的小伙伴都有一个设计师的梦,今天我来说一说three.js.three.js是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.学习了 ...

  4. 初探three.js几何体-Geometry

    three.js几何体我们还没有说完,这一节我们说一说THREE.Geometry(),简单几何体都是继承了这个对象,使用它会相对麻烦一些,但是可操作性非常高,今天我们使用它制作一个自定义几何体-五角 ...

  5. 初探 Ext JS 6 (sencha touch/ext升级版)

    Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...

  6. 初探grunt.js

    package.js { "name": "ttd_v3", "version": "0.1.0", "aut ...

  7. 初探flow.js

    第一部分:前言 我们知道JS是弱类型语言,在声明变量时不论是什么类型的变量我们都用var即可,所以js是非常灵活的,但是同时问题就是弱类型语言有可能会出错,比如在调用函数时,且往往在运行起来时才可以检 ...

  8. 前端初学者——初探Modernizr.js Modernizr.js笔记

    什么是Modernizr? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...

  9. 初探node.js

    一.定义及优势 定义:Node.js是一个基于 Chrome V8 引擎 的 JavaScript 运行时,它以事件驱动为基础实现了非阻塞模型. 优势:由于Web场景下的大多数任务(静态资源读取.数据 ...

随机推荐

  1. [转载]制作QT字库文件

    原文地址:http://www.cnblogs.com/liu_xf/archive/2011/07/05/2098144.htm 摘要: QT4.7.0在移植到开发板上的时候,中文支持是必不可少的, ...

  2. 详细讲解CSS中相对定位relative和绝对定位absolute

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...

  3. 使用float设置经典的网站前端结构(深入探讨)

    .要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...

  4. python学习之【第十四篇】:Python中的装饰器

    1.什么是装饰器? 器即函数 装饰即修饰,意指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 2.遵循的原则 装饰器必须遵循以下两个原则: 不修改被装饰函数的源代码(开放封 ...

  5. day 2 上午 挂饰 背包

    #include<iostream> #include<algorithm> #include<cstring> #include<cstdio> us ...

  6. 大数据之路day01_2--记事本与EditPlus编写Hello World并且运行

    在上一节我们成功的安装JAVA并且将其环境配置成功,接下来我们来编写第一个java程序——Hello World 1.利用记事本编写代码,利用命令行来编译运行 (1)新建记事本,(文件名).java后 ...

  7. C表达式中的汇编指令

    C 表达式中的汇编指令 asm 为 gcc 中的关键字,asm 表达式为在 C代码中嵌套汇编指令,该表达式只是单纯的替换出汇编代码,并不对汇编代码的含义进行解析. asm 表达式有两种形式,第二种 a ...

  8. HTMLTestRunner加入logging输出

    使用HTMLTestRunner生成html的测试报告的时候,报告中只有console输出,logging的输出无法保存, 如果要在报告中加入每一个测试用例执行的logging信息,则需要改HTMLT ...

  9. jquery mobiscroll移动端日期选择控件(无乱码)

    jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...

  10. jquey写进度条问题

    jquey写进度条问题可以直接按照 总时间和进度条宽度之比来做 不管他是不是y=kx 反正时间到0 进度肯定是0了