当前位置：首页 > 前端开发 > 正文内容

ThreeJs-04详解原料与纹路

邻居的猫1个月前 (12-09)前端开发1705

一.matcap原料

这个原料不会遭到光照影响，可是假如图片本身有光就能够一向烘托这个图片原本的姿态，用来将一个图片纹路烘托到物体上的原料

image-20241121203036600

image-2024112120314790

image-20241121203130183

代码完成

加载模型后，敞开纹路烘托，并把它的原料变为这个原料，并且贴上纹路图

image-20241121203303922

二.Lambert原料

Lambert网格原料是Three.js中最根本和常用的原料之一。本文将具体介绍Lambert网格原料的界说、特色、运用以及运用方法。

image-20241121203350029

简略来说便是这个原料当你设置好各种贴图之后 完成高低不平地上等是比较好的

设置好Lambert原料后，打一个光进来，会发现是漫反射哑光的反射类似于

image-20241121204636638

三.phong原料

PHONG原料是Three.js中常用的一种原料，它是一种根据Phong光照模型的原料，能够用于完成高光和暗影作用。Phong光照模型是一种根据漫反射、镜面反射和环境反射的光照模型，能够用于模仿实在物体的光照作用。

比方涂了漆面的木材，润滑的原料

image-20241121205608593

设置为phone原料，在设置高光色彩就能够形成对点光源的反射

image-20241121205751928

设置好环境贴图后

image-2024112120583105

代码操作

创立光源，把一个平面设置成phone原料

image-20241121210053452

增加环境贴图

image-20241121210317472

润滑的反射就出来了

GIF

1.完成玻璃水晶作用

image-20241121210637829

加载模型，设置环境光，把这个模型改为phone原料，并且设置两个折射率

image-20241121211041274

envmap是环境贴图

image-20241121211105343

image-20241121211116253

假如想要折射作用还需求把环境贴图改为折射球形，上下不一样留意

image-20241121211244469

当把上面的反射变为折射后，这儿的反射率也变为了折射率

image-20241121211339694

GIF

四.根底原料详解

1.规范网格原料

在 Three.js 中，MeshBasicMaterial 是一个用于创立根本原料的类。它能够让您快速创立不需求光照作用的几何体，并且装备十分简略，能够运用色彩、透明度和纹路等特点来自界说原料。MeshBasicMaterial 在 Three.js 中十分重要，由于它是创立简略3D图形的常用原料之一，并且烘托速度很快，能够让您的运用程序坚持流通的交互体会。假如您想要创立更杂乱的3D图形，了解 MeshBasicMaterial 是十分有用的，由于它是其他更杂乱原料的根底。

留意：规范网格原料需求设定环境贴图

这儿做一个记载，系统性的介绍一下各种贴图的作用，在之前的原料也有各种贴图，可是规范是最彻底的能够抵达漫反射也能镜反射

加载一个剑的模型

image-20241121212931300

image-20241121212959222

先上环境贴图

image-20241121213022720

粗糙度为1，漫反射

image-20241121213104366

粗糙度为0，镜反射

image-20241121213122418

金属度为0

image-20241121213134760

金属度为1

image-20241121213145115

复原默许，先贴上贴图

image-20241121213227685

金属度贴图和金属度是一个相乘的联系，越大就越金属

image-2024112121332269法线贴图完成高低不平的作用

image-20241121213350159

凹凸贴图同理，两个只能设置一个

置换贴图能够让极点有一个崎岖的作用，上面是看起来，这个是真起来

image-20241121213508952

粗糙度贴图能够让其润滑

image-20241121213603671

留意：实在环境只需求导入进来便是这个姿态，不需求一个一个贴图，仅仅有时分改能够了解

image-20241121213659463

代码完成

image-20241121214628508

创立环境贴图，布景必定要增加

image-20241121220437668

2.物理网格原料

image-202411212116590

物理原料便是能够在方才规范原料的根底上新增更多的功用

透光率

image-20241122204625828

image-20241122204733564

当粗糙度为0，很润滑的时分就彻底透明晰

image-20241122204804798

image-2024112220481002厚度

image-20241122204820807

image-20241122204844113

image-20241122204905093

折射率，反射率

image-20241122204934596

衰减色彩，间隔

image-20241122205004480

衰减间隔越小，就越快抵达衰减色彩

image-20241122205157040

偏赤色

留意：衰减色彩最好都设置1以下不要整的

image-20241122205222422

厚度贴图

出现一个不均匀的厚度

image-20241122205424614

image-20241122205451174

GIF

清漆作用与清漆透明度

image-20241122205759196

单纯设置一个清漆强度为1后

GIF

清漆润滑度，1漫反射，0镜反射

image-20241122205955389

map便是经过纹路决议哪些地方要清漆哪些地方不要

image-20241122211724856

中心润滑，周围不清漆

image-20241122211758974

留意此刻应该粗糙度为1，到时分纹路会乘以粗糙度，假如为0一直 都是润滑

image-20241122211904061

image-2024112221191452

法线贴图

image-20241122211946090

image-20241122212038525

image-20241122212051464

image-20241122212020950

3. 布料织物资料光泽作用

image-20241122212504250

创立一个物理原料球体

image-2024112221310557

设置光泽及色彩后

image-20241122213125629

image-20241122213133129

光泽粗糙程度

image-20241122213159760

设置纹路贴图

image-20241122213308545

image-20241122213313943

4.肥皂泡、油滴、蝴蝶翅膀等薄膜的虹彩效应

反射出各种色彩的原料

image-20241122213453225

这种作用实践是有两层组成，外面一层担任反射折射

创立一个根本球体，有粗糙度，透明度，还有一层厚度

image-20241122214131627

image-20241122214150959

设置彩虹色，反射率和彩虹色折射率

image-20241122214426056

GIF

薄膜厚度规模

默许

image-20241122214542012

设置薄膜厚度贴图

image-20241122214626750

image-2024112221461734

5.铲除物体_几何体_原料_纹路确保功能和内存不走漏

比方这儿不断创立一个随机原料，随机几何体的物体，不断回调本身

image-20241122215953044

此刻cpu运用率和内存大小都在不断增加，到必定程度就会网页溃散

GIF

要优化这种状况便是

每一帧烘托结束，render.render便是烘托的句子，就去铲除去物体几何体等

image-20241122220154401

6.巧用物理发光特点打造传神IPHONE产品

在许多建模软件直接导出来给到3D导入会发现有些特点发光等会缺失，这是由于两者有些内容并不兼用，所以这个时分通常是加载到three的修正器里边，进行修正之后，满足之后再导出到three里边进行模型加载

刚加载进来

image-20241122221251880

找到屏幕原料，设置好之后导出

image-20241122222931053

image-20241122222937759

加载进来就行了

image-20241122223013122

7.修正模型光泽作用打造传神室内场景

image-20241122223145966

刚导入进来

image-20241122223537547

设置光泽光泽色彩

image-20241122223739589

毛绒作用，法线贴图

image-20241122224209173

操控视点

假如让用户随意去滚动很简单穿帮

image-20241122224856196

首要设置开始方位

能够增加轨迹操控器来辅佐检查

image-20241122225650253

设置相机初始方位，以及一开始看向的视点，x轴是横向看多宽，y是看多高，要设置lookat一开始看的视点还得合作操控器

image-20241122225756210

image-20241122225836884

image-20241122225823919

image-20241122225912473

image-20241122225928130

image-20241122230031381

GIF

image-20241122230117022

笔直的最小视点是网上旋转，最大视点是往下旋转

image-20241122230255085

GIF

水平左右的视点

image-20241122230404132

扫描二维码推送至手机访问。

版权声明：本文由51Blog发布，如需转载请注明出处。

本文链接：https://www.51blog.vip/?id=415

标签: ThreeJS
分享给朋友：
返回列表

上一篇：JS 预编译代码实例剖析

下一篇：ThreeJs-03原料进阶

“ThreeJs-04详解原料与纹路” 的相关文章

一款免费开源的在线图片压缩工具

一款免费开源的在线图片压缩工具

我们好，我是 Java陈序员。 咱们在日常的日子中，因为一些图片太大，导致上传不了到一些网站，需求进行紧缩！ 今日，给我们介绍一款免费开源的在线图片紧缩工具，支撑独立布置！ 重视微信大众号：【Java陈序员】，获取开源项目共享、AI副业共享、超200本经典计算机电子书籍等。 项目介绍 Pic S...

css命名, CSS 命名规范的重要性

1. 有意义：选择器或类的名称应该描述它们所应用的元素或内容。例如，`.mainheader` 或 `.buttonsubmit`。2. 简洁：避免使用过于冗长的名称，但也要确保它们足够描述性。例如，`.navbar` 而不是 `.navigationbar`。3. 一致：在项目中保持一致的命名约定...

html网页特效代码,html官方下载免费版

html网页特效代码,html官方下载免费版

创建一个HTML网页特效需要结合HTML、CSS和JavaScript。下面是一个简单的示例，创建一个带有旋转特效的按钮：```html旋转特效按钮 .rotatebutton { padding: 10px 20px; backgroundcolor: 4CAF50; colo...

vue导航栏, 导航栏的重要性

vue导航栏, 导航栏的重要性

Vue导航栏：构建高效且响应式的用户界面在Web开发中，导航栏是用户与网站交互的第一步，它不仅提供了访问网站不同部分的入口，还影响了用户体验的整体质量。Vue.js，作为一款流行的前端框架，提供了强大的工具来创建动态和响应式的导航栏。本文将深入探讨如何在Vue项目中实现一个高效且响应式的导航栏。...

css中字体加粗, 什么是字体加粗？

css中字体加粗, 什么是字体加粗？

`normal`：默认值，正常字体 `bold`：加粗字体 `bolder`：比`bold`更粗 `lighter`：比`normal`更细 `100` `900`：数值表示，100最细，900最粗例如，如果你想将一个元素的字体加粗，你可以这样写：```cssp { fontweight: b...

html5模板网

html5模板网

1. 模板王 提供超过一万种免费网页模板，包括HTML模板、个人网站模板、企业网站模板、响应式网站模板等。你可以访问 下载这些模板。2. Toy模板网 提供免费的HTML、HTML5、CSS和后台模板下载，致力于共享高质量的网站设计资源，帮助开发者和设计师创建精美的网站。访问 获取更...

Copyright © 2024-2028 51blog All Rights Reserved

XML地图