探索three.js中的各种材质之共有属性

最新推荐文章于 2023-11-22 16:12:02 发布
最新推荐文章于 2023-11-22 16:12:02 发布
阅读量734 收藏 2
点赞数
分类专栏： js three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jarisMA/article/details/100106173
版权
本文深入探讨three.js中材质的共通属性，包括基础属性如透明度、可见性、侧面处理，融合属性如混合模式、深度测试，以及高级属性如深度函数和多边形偏移。通过理解这些属性，可以更好地控制和优化3D物体的渲染效果。
摘要由CSDN通过智能技术生成

探索three.js中的各种材质 之共有属性##

发布时间： 2018-08-30 16:00:39
这里写图片描述

共有属性又分基础属性、融合属性、高级属性

1.基础属性：这些属性是最常用到的。

.id:Integer标识符
用来标识材质，在创建时赋值

.uuid：String UUID
材质实例的UUID。这会自动分配，因此不应编辑。

.name:String名称
可以通过这个属性赋予材质名称

.isMaterial是否为材质
用于检查此类或派生类是否为材质。默认为true。
不应该更改它，因为它在内部用于优化。

.type:String类型
值是字符串’Material’。这不应该更改，并且可以用于在场景中查找此类型的所有对象。

.opacity:Float透明度
定义物体有多透明。 与属性.transparent 一起使用。取值范围是0～1。

.transparent:Boolean是否透明
如果设为true,

最低0.47元/天 解锁文章
jarisMA
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
three.js 源码注释（二十二）Core/Object3D.js
omni360的专栏
11-24 7098
以下代码是THREE.JS 源码文件中Core/Object3D.js文件的注释. Object3D是场景中图形对象的基类.Object3D对象的功能函数采用定义构造的函数原型对象来实现.
threejs-tutorial:Three.js 系列教程，学习和探索 Three.js 世界
04-18
threejs-tutorial 从今天 2020年11月27日 开始学习和探索 Three.js 。 以下内容更新于 2021.04.16 特别提醒： 本教程最开始使用的是 r123 版本，但是后来 Three.js 更新到 r125 版后，r125 中做了一些修改，将 Geometry 从核心类( core ) 中移除，转移到了 examples/jsm/deprecated/。 Geometry 类已被废弃，不建议继续使用 然后使用 BufferGeometry 代替之前的 Geometry。此外还有其他很多地方修改，这就造成本教程一些文章中的示例代码在最新的版本中已经不可用了。 但是文章中讲解的代码思路、原理、用法是不会有太大的差异。 目前最新版本为 r127版本，所以...随着 Three.js 版本不断更新，本教程中的示例代码终会有过时的时候。 对于某个具体的类，Three.
Three.js所有材质的属性及实例应用
Potatoyou的博客
11-17 2113
Three.js所有材质：MeshBasicMaterial（网格基础材质）、MeshDepthMaterial（网格深度材质）、MeshNormalMaterial（网格法向材质）、MeshLambertMaterial（网格Lambert材质）、MeshPhongMaterial（网格Phong材质）、MeshStandardMaterial（网格标准材质）、MeshPhysicalMaterial（网格物理材质）、MeshToonMaterial（网格卡通材质）、ShadowMaterial 阴影材质
three.js一个简单demo学些和讲解
weixin_30686845的博客
10-16 226
叉口裁剪球体案例 二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clipIntersection</title> <style> body { margi...
探索三维世界：从Hello World开始的Three.js入门之旅
共勉
04-07 498
Three.js是一款基于WebGL的JavaScript库，它可以帮助开发者快速构建3D场景和动画效果。它提供了丰富的API，包括几何体、材质、光源、相机等组件，可以实现复杂的3D交互。Three.js还支持多种导入格式，包括OBJ、Collada、FBX等，可以方便地将3D模型导入到场景中。入门Three.js需要掌握WebGL的基础知识，因为Three.js是基于WebGL的，所以对于WebGL的了解可以帮助更好地理解Three.js的原理和使用。
Three.js中网格对象MESH的属性与方法详解
01-19
本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍： 创建一个网格需要一个几何体，以及一个或多个材质。当网格创建好之后，我们就可以将...
Three.js-webgl物联网粮仓3D可视化
最新发布
03-12
Three.js是一个强大的JavaScript库，专门用于在Web浏览器中创建和展示3D图形。它充分利用WebGL API，使开发者无需深入理解底层复杂的图形编程，就能便捷地构建出引人入胜的3D场景。在这个项目中，Three.js用于构建...
three.js 可视化大屏 3D场馆模型Demo
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
Three.js渲染GeoJSON.zip
07-13
在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...
three.js学习笔记(五)——Shadows阴影
hongsir的博客
12-03 3403
阴影一直是实时三维渲染的挑战，开发人员必须在合理的情况下找到显示真实阴影的技巧。 Three.js 有一个内置的解决方案，虽然其并不完美，但用起来很方便。 阴影是怎么工作的？ 当你进行一次渲染时，Three.js将对每个支持阴影的光线进行渲染，那些渲染会像摄像机那样模拟光线所看到的内容，而在这些灯光渲染下，网格材质将被深度网格材质MeshDepthMaterial所替代。 灯光渲染将像纹理一样被存储起来，称为阴影贴图，之后它们会被用于每个支持接收阴影的材质并投射到几何体上。 ...
threeJS 裁剪物体
qq_42683219的博客
07-28 4378
一、效果图 二、案例中用到的重要函数分析 new THREE.MeshLambertMaterial({ color:new THREE.Color().setHSL(Math.random(),0.5,0.5),① side:THREE.DoubleSide,② clippingPlanes:this.planes,③ clipIntersection:true④ }) this.renderer.localClippingEnabl
Threejs学习：裁剪( clip编 )
太古时代的专栏
05-23 4346
参考：webgl_clipping_intersection.html // 裁剪点 var clipPlanes = [ new THREE.Plane( new THREE.Vector3( 1, 0.5, 0 ), 0 ), new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ), new THREE.Plane( new THR...
shader之——最常用的Blend
baicaishisan的博客
01-16 5566
shader的Blend混合一直是个很头痛的东西，组合的种类比较多，所以效果比较难记得，所以今天来总结一下1.Blend SrcAlpha OneMinusSrcAlpha  源颜色 x 源通道  +  目标颜色 x（1 - 源通道）            A * alpha + B*(1-alpha)这就是我们常用的 alpha blending ，效果比较接近源颜色，可以深一些2.Blend 
three.js学习笔记（一）：THREE.Materail五种基础材质的使用
qq_43641110的博客
02-10 3733
THREE.Materail五种基础材质的基本使用：属性介绍，代码示例
Three.js 材质的 blending
qq_21476953的博客
10-26 661
混合公式确定如何将新像素与 中 WebGLFramebuffer 已有的像素组合。: RGB 混合方程和 alpha 混合方程设置为单个方程。: 用于分别设置 RGB 混合方程和 alpha 混合方程。: 分别混合 RGB 和 alpha 分量的混合函数。destination: 已经画在了帧缓冲区中的颜色。: RGB 和 alpha 设置为单个混合函数。, destination 的 RGBA.source: 接下来要画的颜色。, source 的 RGBA.用于混合像素算法的函数。
【Unity Shader入门】6、Blend-混合
LST329的博客
06-24 1854
语法 Blend Off 关闭混合（这是默认值） Blend SrcFactor DstFactor 配置并启用混合。生成的颜色将乘以 SrcFactor。屏幕上的已有颜色乘以 DstFactor，然后将这两个值相加。 Blend SrcFactor DstFactor, SrcFactorA DstFactorA 同上，但使用不同系数来混合 Alpha 通道。 BlendOp Op 不将混合颜色相加，而是对它们执行不同的操作。 BlendOp OpColor, OpAl
three.js mtl材质贴图未显示_Spine的纹理压缩和半透显示
weixin_39856607的博客
11-20 567
纹理压缩如果使用Spine的默认输出格式，是这样的但是输出纹理的格式必须是未压缩的RGBA，如果你将图片格式改为ETC2或者ASTC，就会变成这样：而这是绝对不能容忍的画面瑕疵。ETC2的压缩质量绝不至于这样差，之所以会变成这样，在于Spine的默认输出格式是勾选了“预乘（premultiplied alpha）”参数的，这种做法会将图片原始的RGB通道预先乘以透明度保存成文件，显示时再用特殊的S...
THREEJS中材质的混合模式属性Blending的理解
qq_43045913的博客
11-22 878
不采用混合公式，不会区分重叠区域，如下图所示：中心区域的颜色为rgb(1,0,0),目标颜色大致为rgb(0.7,0.7,0),在AdditiveBlending模式下，直接对每一个片元进行颜色相加：rgb(1,0,0) + rgb（0.7,0.7,0） => rgb(1,0.7,0)细心的同学可能会有一个疑问：既然是展示原生态颜色，如果源颜色的某个区域的不透明度为0（完全透明），比如上图中的剩下区域的不透明度为0，那么这时候根据混合颜色公式，剩下区域展示出来的颜色，是场景中该张图片远处背景的颜色。
透明度测试(AlphaTest)和混合(Blend)的基础知识
木头圈
10-27 5838
本文分享透明度测试(AlphaTest)和混合(Blend)的基础知识 透明度测试和透明度混合都是用来处理半透明效果的手段. 在裁剪测试之后, 如果有一些半透片元需要抛弃(比如png纹理的多余空白), 可以通过透明度测试达到目的. 在深度测试通过之后, 渲染管线进入混合阶段, 在混合阶段处理不透明物体或者半透物体的颜色混合. 为什么透明效果需要处理 我们先说明不透明物体的处理过程. 深度测试通过之后, 相互遮挡的不透明物体开始进行颜色混合, 所谓颜色混合就是如何处理源颜色(待渲染的片元颜色)和目标颜色(
three.js中matcap材质应用代码示例
05-26
以下是一个使用Three.js中Matcap材质的基本示例代码： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值