THREE.JS中常用的3种材质
总序
材质和几何体构成网格,决定几何体是否像金属,透明与否,已经是否显示成线框。
MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框
MeshLambertMaterial:这种材质对光照有反应,用于创建暗淡的不发光的物体
MeshPhongMaterial:这种材质对光照也有反应,用于创建金属类明亮的物体
材质的共有属性
材质虽然可能有不同的分类,但是都是材质啊,还是有共性的地方,共有属性体现在基础属性,融合属性,高级属性三个方面。这三个方面其实是THREE.Material这个基类的属性。
THREE.Material的基础属性
列出一些常用的
———-
- ID:标识材质
- name: 名称
- opacity:透明度,结合transparent使用,范围为0~1
- transparent:是否透明,如果为true则结合opacity设置透明度。如果为false则物体不透明
- visible:是否可见,false则看不见,默认可以看见
- side:侧面,觉得几何体的哪一面应用这个材质,默认为THREE.FrontSide(前外面),还有THREE.BackSide(后内面)和THREE.DoubleSide(两面)
- needUpdate:如果为true,则在几何体使用新的材质的时候更新材质缓存
———-
THREE.Material的融合属性
总结起来,不常用
———-
- blending :觉得物体的材质如何和背景融合,默认值为NormalBlending,这种情况下只显示材质的上层
- blendsrc:除了标准融合外,还可以通过指定融合源,融合目标,和融合公式,创建自定义的融合模式,默认SrcAlphaFactor,即alpha通道进行融合
- blenddst:默认OneMinusAlphaFactor,定义目标的融合方式,默认也使用alpha通道融合
- blendingequation:融合公式,指定如何使用融合源和融合目标,默认为addEquation,即将颜色想加
———-
THREE.Material的高级属性
不常用,因为没有用过啊
THREE.MeshBasicMaterial 基础网格材质
使用这种材质的网格,通常被渲染成简单的多边形,而且可以选择想要线框。除了一些THREE.Material的属性以外,还有如下属性
- color:设置材质的颜色
- wireframe:如果为true,则将材质渲染成线框,在调试的时候可以起到很好的作用
- wireframeLinewidth:wireframe为true时,设置线框中线的宽度
- wireframeLinecap:决定线框端点如何显示,可选的值 round,bevel(斜角)和miter(尖角)。
- vertexColors:通过这属性,定义顶点的颜色,在canvasRender中不起作用。
- fog:决定单个材质的是否受全局雾化的影响。
值得一提的是:
对于fog属性,在全局中如果设定了雾化属性,那么本应该对所有场景的物体都添加雾化效果。
scene.fog=new THREE.Fog(0xffffff,0.015,100)
而如果在当前材质中设置的如
var cubeGeo= new THREE.CubeGeometry(30,30,30);
var cubeMat= new THREE.MeshBasicMaterial({color:"0x0c0c0c",fog:false})
var cude= new THREE.Mesh(cubeGeo,cubeMat);
scene.add(cube);
则在当前这个cude方块中,并不能体现雾化效果
Code
var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});var cube = new THREE.Mesh(cubeGeometry, meshMaterial);//meshMaterial.wireframe=true;
有无wireframe的区别如下面2图所示
THREE.MeshLambertMaterial暗淡不发光
该材质对光源有反应,除了之前说过的color,transparent,opacity,fog等属性,还有一些特有的属性,总结起来就只有2个
- ambient:设置材质的环境色,和AmbientLight光源一起使用,这个颜色会与环境光的颜色相乘。即是对光源作出反应。
- emissive:设置材质发射的颜色,不是一种光源,而是一种不受光照影响的颜色。默认为黑色
Code
代码和上面的基本类似
var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);var meshMaterial = new THREE.MeshLamebertMaterial({color: 0x7777ff});var cube = new THREE.Mesh(cubeGeometry, meshMaterial);
但是渲染出来的结果却不太一样
THREE.MeshPhongMaterial金属发亮的物体
该材质对光源有反应,除了之前说过的color,transparent,opacity,fog等属性,还有一些特有的属性,总结起来有4个
- ambient:设置材质的环境色,和AmbientLight光源一起使用,这个颜色会与环境光的颜色相乘。即是对光源作出反应。
- emissive:设置材质发射的颜色,不是一种光源,而是一种不受光照影响的颜色。默认为黑色
- specular:指定该材质的光亮程度及其高光部分的颜色,如果设置成和color属性相同的颜色,则会得到另一个更加类似金属的材质,如果设置成grey灰色,则看起来像塑料
- shininess:指定高光部分的亮度,默认值为30.
Code
代码类似 只贴出其中一点点
var meshMaterial = new THREE.MeshPhongMaterial({color: 0x7777ff,specular:0x7777ff,shininess:30});
THREE.JS中常用的3种材质相关推荐
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
- JS中常用的几种设计模式
js常见的几种设计模式 单例模式: 组合模式 观察者模式(发布订阅模式) 策略模式 模块模式 代理模式 外观模式 单例模式: 概念: 单例模式定义了一个对象的创建过程,此对象只有一个单独的实例,并提供 ...
- JS中常用的几种组织架构图的优点
jOrgChart https://github.com/wesnolte/jOrgChart 给定一个嵌套无序列表元素,容易使用. 其中的拖放功能允许重新排序树和底层的<ul>结构. ...
- js学习总结----js中常用的四种输出方式
1.alert('内容') 在浏览器中弹出框显示我们的内容 不输入内容弹出undefined (注意alert弹出的都是字符串) 2.document.write('内容') 在页面中输出显 ...
- 前端开发:JS中常用数据类型的转换以及使用场景集锦
前言 在前端开发中,关于数据转换也是使用频率非常高的知识点,尤其是常见数据类型之间的相互转换的使用频率就更高了,那么本篇博文就来分享一下关于JS中常用数据类型的转换使用,分享一下,方便后期查阅使用. ...
- Vue中常用的8种v指令
Vue中常用的8种v指令 根据官网的介绍,指令 是带有 v- 前缀的特殊属性.通过指令来操作DOM元素 指令 功能 v-text="变量/表达式" 文本的设置 字符串变量+数字可以 ...
- 【原】实时渲染中常用的几种Rendering Path
[原]实时渲染中常用的几种Rendering Path 本文转载请注明出处 -- polobymulberry-博客园 本文为我的图形学大作业的论文部分,介绍了一些Rendering Path,比较简 ...
- 总结JS中常用的数组的方法大全
总结JS中常用的数组方法 JS中常用的数组方法总结 数组(Array)是一种复杂的数据类型,它属于Object(对象)类型,用来将一组数组合在一起,通过一个变量就可以访问一组数据.在使用数组时,经常会 ...
- js中常用的对象—String的属性和方法
今天说一下,js中常用的内置对象--String对象 它有以下几个常用的属性: length prototype 有以下几个常用的方法: parseInt()转换为数字 parseFloat()转换为 ...
- js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
最新文章
- 实例讲解Linux系统中硬链接与软链接的创建
- adb 获取当前activity_ADB 你想找的命令都在这里
- X-UA-Compatible 解决IE浏览器样式不兼容问题
- 百度安全专家盘点:非官方购火车票渠道 几乎都不靠谱
- 多张图片合成一个pdf文件的操作方法
- clion生成qt的qrc文件
- 微信公众号模板消息推送
- 2020 全国的邮政编码 json
- Quartz 定时任务
- 数学建模三十六计——线性模型
- 手机抓包之fiddler工具使用记录
- Logstash mutate 插件
- php时间戳转换为英文日期格式,PHP时间戳和日期格式相互转换
- c语言.jpg图片转成数组_怎么把Word转成PDF?一个PDF转换软件就能搞定!
- 利用matlab来计算双曲函数的值,关于MATLAB第2章数值计算与数据分析的介绍
- 华为OD机试题:身高体重排序
- 在少儿编程中使用easygui来实现交互(1)——msgbox
- Charles工具使用教程,以及注意事项。
- square enix服务器维护,Square Enix解决《最终幻想14》的服务器问题
- 条形码识别软件linux,条形码生成和识别库 Aspose.BarCode
热门文章
- 新浪微博接口在safri下的bug
- java爬虫爬取天眼查_Java爬虫爬取京东商品信息
- 百度天眼android,百度天眼下载|百度天眼安卓版 v1.2.0.20423_手机天堂
- SpringBoot整合WebSocket实现聊天室系统
- Installed Build Tools revision 33.0.0 is corrupted. Remove and install again using the SDK Manager
- radmin注册密码
- java queue GATK_gatk4使用总结
- 象棋马走日步数计算流程图
- Android: Fragment (Trying to instantiate a class that is not a Fragment)
- 堆的进化之旅5-Relaxed Heap松弛堆