three.js 在动态设置透明度时，未能正常渲染问题

最新推荐文章于 2024-03-28 22:30:19 发布

鱿鱼西3.0

最新推荐文章于 2024-03-28 22:30:19 发布

阅读量1.1k

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44064067/article/details/126725480

版权

博客内容讲述了在Three.js中尝试通过设置`obj.material.transparent=true;`和`obj.material.opacity=0.8;`来使对象透明，但未生效。问题在于缺少了`obj.material.alphaTest=0.1;`这一关键设置，正确添加后成功实现了对象的透明效果。

摘要由CSDN通过智能技术生成

需求是在某个条件下，需要把部分的object改成透明的，这时使用了以下代码设置，发现未起作用

   obj.material.transparent = true;//是否透明
   obj.material.opacity = 0.8;

换了另一种设置方法，成功将object设置为透明的了

  obj.material.transparent = true;//是否透明
  obj.material.opacity = 0.8;
  obj.material.alphaTest = 0.1;

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鱿鱼西3.0

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

three.js设置gltf模型透明时失效

weixin_52047574的博客

08-08

656

three.js官方文档说alphaTest属性的含义如下：设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。但问题是在未加设置alpahTest时，默认值为0的话，不透明度显然是大于它的，应该正常渲染啊，结果却并未渲染。

THREEJS-r145版本解决UnrealBloomPass导致透明度失效的问题

qq_40245044的博客

10-27

1020

threejs使用UnrealBloomPass后处理导致场景透明度丢失问题解决

参与评论您还未登录，请先登录后发表或查看评论

threejs 设置了透明度后，设置了Z值不为0，结果不透明效果消失问题解决

qq_37200686的博客

11-13

285

设置材质的 depthWrite: false。

Three.js自定义shader实现离相机越近越透明效果

宏斌的博客

03-12

455

【代码】Three.js自定义shader实现离相机越近越透明效果。

Three.js材质共有属性、私有属性

u014291990的博客

11-30

587

Three.js材质共有属性、私有属性本文是Three.js电子书的3.2节如果你的javascript语言基础还可以，应该明白类、基类、子类、父类等概念。如果你有这些类的概念，那么在学习Threejs的过程中，如何查找Threejs文档将会比较顺利。点材质PointsMaterial、基础线材质LineBasicMaterial、基础网格材质MeshBasicMaterial、高光网格材质...

three.js学习：给obj模型设置发光并解决渲染变暗问题

qq_43641110的博客

02-28

4620

在three.js中实现几何体边界发光，并解决渲染之后环境变暗的问题

Three.js渲染GeoJSON.zip

07-13

在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...

使用three.js在浏览器中渲染的 3d 场景.zip

07-14

在现代Web开发中，利用JavaScript库来创建交互式的3D场景变得越来越普遍，而`three.js`正是这样一个强大的工具。`three.js`是基于WebGL的JavaScript库，它允许开发者在浏览器中创建复杂的3D图形，无需深入理解底层的...

三维模型-three.js-PCD模型文件，用于three.js显示pcd文件

07-25

在三维可视化领域，Three.js是一个非常流行的JavaScript库，它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在...

three.js渲染钻石demo

06-10

**标题：“three.js渲染钻石demo”** 在计算机图形学领域，渲染是将三维模型转化为屏幕上可见图像的过程。Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建和展示复杂的3D场景。本项目名为...

Three.js与arcgis的交互与渲染

03-23

在IT行业中，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。而ArcGIS则是Esri公司的一款强大的地理信息系统（GIS），用于处理、分析和展示地理数据。当我们谈论“Three.js与ArcGIS的交互与...

Blender Three.js 智慧3D机房开发模型创建与导入中的常见问题与解决方案

qq_59060196的博客

03-17

5321

如果你遇到了在本文中没有出现的问题，欢迎评论或者私信我。

THREE.JS使用JSON文件加载外部模型改变材质的透明度

weixin_42443851的博客

06-25

3534

THREE.JS使用JSON文件加载外部模型改变材质的透明度** 今天在做项目的时候，想要使用代码改变json外部的模型的透明度起初认为非常简单。后来发现怎么修改都没有用，就查看了json文件，通过修改materials数组里的transparency属性可以改变模型的透明度** ...

Threejs 创建玻璃 Refractor WaterRefractionShader

蜗牛速度额的博客

10-18

4823

引入两个文件 import Refractor from 'three/examples/js/objects/Refractor'; import WaterRefractionShader from 'three/examples/js/shaders/WaterRefractionShader'; let refractorGeometry = new THREE.PlaneBuf...

Three.js材质效果

u014291990的博客

11-29

4199

Three.js材质效果本文是Three.js电子书的1.5节前面案例中几何体对应网格模型材质只是设置了一个颜色，实际渲染的时候往往会设置其他的参数，比如实现玻璃效果要设置材质透明度，一些光亮的表面要添加高光效果。半透明效果更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数，添加opacity和transparent属性，opacity的值是0~1...

three.js物理网格材质(玻璃)

最新发布

u014291990的博客

03-28

992

并不是所有的3D建模软件都支持设置物理材质，即便支持物理材质，也不意味着你导出的gltf模型，能包含该软件，设置的物理材质属性，比如金属度、粗糙度、透射度…除了物理材质，也有很多建模软件，自带的材质效果，是无法自动导出到threejs的。建议：能否导出美术建模软件设置的材质效果，一切以实际测试为准。不同软件，同一个软件不同版本，都会有差异。

three.js将模型设置成透明色

weixin_43781939的博客

01-19

3125

three.js加载模型需要设置成透明色，走一步再显示出来

unity 材质设置透明度失效

qq_38836770的博客

05-16

3443

最近在做摄像机被物体遮挡后，半透明化遮挡物时按照这篇文章 SetMaterialsColor(hit[i].collider.gameObject.renderer, 0.4f);//置当前物体材质透明度 设置透明度时总是无效，打断点确实运行到了，但没有效果发现我无论怎么调整透明度，物体都依然没有变化解决方法在不断尝试中，发现我的物品是通过png贴图实现的进行一下修改，将texture type 设置为 Shadowmask 然后设置rendering mode 为fade 通过上面的设

关于遮罩层+自定义弹出框的实现，透明度设置，子元素opacity不生效（不符合预期）问题的一点总结

lingliu0824的博客

08-16

3338

我们可能想要的到这样的效果

three.js重新设置模型的透明度

06-06

你可以使用Three.js中的`material.opacity`属性来重新设置模型的透明度。例如，如果你想将透明度设置为0.5，则可以这样做： ``` //获取模型材质 var material = mesh.material; //设置透明度 material.opacity = 0.5; //需要开启透明度才能生效 material.transparent = true; //更新材质 material.needsUpdate = true; ``` 注意：如果你的模型已经设置了透明度，则你不需要开启`material.transparent`属性。如果你的模型没有设置透明度，并且你想使用透明度，则需要将该属性设置为`true`。`material.needsUpdate`属性用于告诉Three.js更新材质。