基于ThreeJS修改模型材质
基于ThreeJS修改模型材质
- 示例描述与操作指南
- 示例效果展示
- 实现方式
示例描述与操作指南
当前示例用于展示如何在模型上改变构件的材质。材质和几何体构成网格,决定几何体是否像金属,透明与否,是否展示线框。
常见材质包括:
1、基础材质 MeshBasicMaterial : 对光照无感,给几何体一种简单的颜色或显示线框。
2、兰伯特材质 MeshLambertMaterial :这种材质对光照有反应,用于创建暗淡的不发光物体。
3、锋材质 MeshPhongMaterial :这种材质对光照也有反应,用于创建金属类明亮的物体。
4、标准材质 MeshStandardMaterial :这种材质主要是将锋材质和兰伯特材质的特性结合在一起,它有粗糙度和金属性并 能够改变这些属性。
示例效果展示
实现方式
修改构件材质:在当前示例中,我们展示了四种不同的材质,包括基础材质,标准材质,兰伯特材质和锋材质
// 改变材质种类,此处提供了"MeshBasicMaterial","MeshStandardMaterial",
// "MeshLambertMaterial","MeshPhongMaterial"四种材质的使用,更多材质的学习
// 请前往threejs官网查看const changeMaterial = (matreial) => {// const cpntCorlorArray = [0.83137256,0.27450982,0.27058825]; // 定义构件的颜色数组const cpntCorlorArray = [0.5, 0.5, 0.5]; // 定义构件的颜色数组const cpColor = new THREE.Color(cpntCorlorArray[0], cpntCorlorArray[1], cpntCorlorArray[2]); // 创建三维里的颜色const component = vizbim.components[componentId[0]]; // 拿到场景中的构件,以便于对它进行材质的修改switch (matreial) {// 将此构件的材质改成MeshBasicMaterial,// THREE中材质的一种,这种材质不受光照影响case "基础材质":component.material = new THREE.MeshBasicMaterial({color: cpColor,});break;// 基于物理的标准材料,在实践中,这提供了比MeshLambertMaterial或// MeshPhongMaterial更准确和逼真的结果,代价是计算成本更高。case "标准材质":component.material = new THREE.MeshStandardMaterial({color: cpColor,metalness: 0.6 // 这种材料多少像金属一样。 非金属材料,如木材或石材,使用0.0,金属使用1.0。// 默认值为0.5。 0.0到1.0之间的值可用于生锈的金属外观。});break;// 将此构件的材质改成MeshStandardMaterial,// THREE中材质的一种,将specular属性设置成和材质color一样的颜色有类似金属的效果// 将specular属性设置成灰色会有类似塑料的效果case "锋材质":component.material = new THREE.MeshPhongMaterial({color: cpColor,specular: cpColor,});break;// 将此构件的材质改成MeshLambertMaterial,// THREE中材质的一种,这种材质适用于暗淡、不光亮表面。// 这个材质是本三维引擎默认使用的材质case "兰伯特材质":component.material = new THREE.MeshLambertMaterial({color: cpColor});default:console.log("---");}}
下载完整代码
基于ThreeJS修改模型材质相关推荐
- threejs使用traverse递归修改模型材质和颜色
async function loadFloor() {const { scene: object } = await loadGLTF("平面图.glb");object.tra ...
- Unity实现动态修改模型材质球
一.定义需要替换的材质球(且加载该材质球) private Material _HighLightMat; //实现闪烁高亮效果材质球 _HighLightMat = Resources.Load(& ...
- Unity 中批量修改模型材质球
实现在编辑器中,直接替换父节点下所有模型的材质球 public class CheckMaterials : MonoBehaviour {public Material mat;[ContextMe ...
- threejs置换模型材质
功能:点击页面材质库中的材质,右键拾取模型,选择置换材质 1.必须要学会vue组件之间的通信 <menuBar :getImageId="getImageId"/>// ...
- 这是一个基于Threejs的商品VR展示系统的 VR模型展示Demo
vr-cake-demo 这是一个基于Threejs的商品VR展示系统的 VR模型展示Demo Demo界面示意图 Demo蛋糕实物图片 Demo蛋糕VR效果图 研究意义 2020年,已经进入了5G时 ...
- 基于ThreeJS实现3D模型上的室内灯光效果模拟
基于ThreeJS实现3D模型上的室内灯光效果模拟 示例描述与操作指南 示例效果展示 实现步骤 示例描述与操作指南 当前示例用于展示室内灯光的多角度光影效果. 示例效果展示 实现步骤 第一步 创建聚光 ...
- 基于THREEJS场景中模型局部辉光效果
背景 之前写过一个关于辉光的文章,全场景辉光(传送门),但是有些时候,我们的场景只需要一部分模型辉光,这就是本文的背景.还是基于ThreeJS实现. 原理 简单来说,就是做两个合成器(Composer ...
- 基于ThreeJS为3D模型添加贴图
基于ThreeJS为3D模型添加贴图 示例描述与操作指南 示例效果展示 实现方式 示例描述与操作指南 当前示例用于展示如何在三维立体构件六个面上添加贴图 示例效果展示 实现方式 添加贴图:在模型的多个 ...
- 基于threejs的商品VR展示平台的设计与实现思路
目录 基于threejs的商品VR展示平台的设计与实现思路 前言 总体开发方案设计 总体开发设计思维导图 模型制作模块 前端展示模块 存储模块 后端管理模块 后台管理实现 商品模型制作 商品模型前期准 ...
最新文章
- 对Python课的看法
- 简单来说一下java中的泛型,ssh中dao层使用会简化代码量
- python人脸实时检测_openCV+python实现人脸实时检测
- wait和notify使用例子
- SpringBoot @Async加在实现接口类的非接口方法上获取Bean异常
- 利用bootstraptable展示数据,对数据进行排序分页等操作
- Resharper进阶一:简要介绍
- 基于检索的自然语言处理模型研究梳理
- 中国互联网100个Web2.0网站名单
- pandas读取csv文件数据并对数据求和使用matplotlib画饼图
- String,StringBuff,Stringbuilder三者的理解以及练习题
- hadoop学习使用
- 【行业专题报告】家电、白电、黑电-专题资料
- 二人行必有我师,探秘复旦大学EMBA2019级同侪私董会
- 钠离子电池翻红:“锂焦虑”之下的望梅止渴
- OCCT v11.0.16 x64 电脑硬件检测烤鸡软件中文
- Docker学习笔记——Docker基础
- MyBatis 与 MyBatis-Plus 的区别
- python斗地主出牌算法_python模拟斗地主发牌
- Java实现简单的数字雨