这节我们浅谈一下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. (记录)Jedis存放对象和读取对象--Java序列化与反序列化

    一.理论分析 在学习Redis中的Jedis这一部分的时候,要使用到Protostuff(Protobuf的Java客户端)这一序列化工具.一开始看到序列化这些字眼的时候,感觉到一头雾水.于是,参考了 ...

  2. spring整合mybatisplus2.x详解

    一丶Mp的配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...

  3. 构建企业级数据湖?Azure Data Lake Storage Gen2实战体验(下)

    相较传统的重量级OLAP数据仓库,“数据湖”以其数据体量大.综合成本低.支持非结构化数据.查询灵活多变等特点,受到越来越多企业的青睐,逐渐成为了现代数据平台的核心和架构范式. 作为微软Azure上最新 ...

  4. PHP通过JSON给JS赋值;JS通过JSON给PHP传值

    $fileNames = array(); // 是数组,不是字符串 $filesJSON = json_encode($fileNames);// 转成json格式 var oldFiles = n ...

  5. C语言存储类别和链接

    目录 C语言存储类别和链接 存储类别 存储期 五种存储类别 C语言存储类别和链接 ​ 最近详细的复习C语言,看到存储类别的时候总感觉一些概念模糊不清,现在认真的梳理一下.C语言的优势之一能够让程序员恰 ...

  6. Java连接MySQL简单步骤及常见问题解析

    这篇文章跟读者们介绍Java语言如何连接到MySQL数据库相关操作,及FAQ(Frequently Asked Questions)介绍. 选择工具和准备数据集 IDE:Eclipse 数据库:使用的 ...

  7. MIT线性代数:20.克拉默法则,逆矩阵和体积

  8. 手写SpringMVC 框架

    手写SpringMVC框架 细嗅蔷薇 心有猛虎 背景:Spring 想必大家都听说过,可能现在更多流行的是Spring Boot 和Spring Cloud 框架:但是SpringMVC 作为一款实现 ...

  9. CSPS模拟 50

    收获很多,良心出题人 T1 施工 研究半天,最后30分暴力走人 考后看了题解,稍神仙这题弃对了...... 要拿30+,必须发现要填的话一定是填一个坑使它底部变平,最终底部高度小于等于两边 为什么是坑 ...

  10. 从BIO到Netty的演变

    从BIO到Netty的演变 前言 计算机网络可以说是每个学计算机的都绕不过去的一道坎.计算机网络到底有多么重要,你走到大学图书馆的计算机部分,翻开那些什么<从零开始:黑客XXX>,< ...