Threejs 透明物体包裹问题，某些角度内部的会消失

最新推荐文章于 2024-03-21 12:16:46 发布
最新推荐文章于 2024-03-21 12:16:46 发布
阅读量1.6k 收藏 4
点赞数 4
原文链接：https://stackoverflow.com/questions/15994944/transparent-objects-in-threejs/15995475#15995475
版权

做了这么个场景，三个物体，最外面一个透明容器，中间是容器里透明的水，最里面是水里一个物体，物体不需要透明，
上方截图来源网址
就是两个透明的球，一个在内一个在外，内部的会出问题，比如这个人就是内部的不透明了，我遇到的是内部的在某些角度会消失，给了好几种解决方案。

emongol
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threeJs二维(平面)图形旋转角度后不显示
qq_39274328的博客
11-04 1974
前言：公司领导最近让我和组长搞一个3D的模型演示，要用到threeJS技术，我嘛本来也就是个刚毕业的前端实习生，三大框架还没搞明白呢让我玩3D技术，领导有任务也只能硬着头皮上了 问题概述： 二维图形也就是平面图导入到场景中，只在特定的角度下显示，旋转后就看不见了。 旋转前： 旋转一定角度后： 问题原因： 在代码中输出此场景的对象后发现，其属性material下面的side属性是关键参数： /...
ThreeJS使用Curve曲线让物体沿轨迹运动DEMO
12-09
ThreeJS使用Curve曲线让物体沿轨迹运动DEMO
threejs:当物体转到一定角度,有些面消失了解决方案
weixin_42755384的博客
05-18 5984
使用:side: THREE.DoubleSide. 例如: var rectShape = new THREE.Shape(); rectShape.moveTo( 0, 0 ); rectShape.lineTo( 0, rectWidth ); rectShape.lineTo( rectLength, rectWidth ); rectShape.lineT...
three.js Material半透明材质遮挡后面的模型
m0_58028532的博客
07-01 3803
问题： 绘制的一个半透明的平面，在某个角度观察时，发现后面的模型被遮挡了 解决办法： 设置material的depthWrite属性为false depthWrite：渲染此材质是否对深度缓冲区有任何影响。默认为true const material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide, transparent: true, // 设置为true，opacity才会
Blender导出gltf设置半透明材质
最新发布
u014291990的博客
03-21 736
本节课继续上街内容讲解，通过Blender设置模型材质透明相关属性，threejs加载gltf，gltf模型默认实现如下材质的半透明效果。上面材质设置好以后，导出glb模型，使用上节课代码测试，你会发现Blender绘制的立方体和下面代码立方体一样具有透明效果。回顾：上节课给大家演示了Blender创建一个模型，设置材质颜色，并导出gltf，最后threejs加载。相当于threejs材质里面设置。提醒：不同版本Blender交互界面可能有差异，但是整体思路都一样。Blender材质设置。
Three.js旋转到某个角度模型消失的问题
eevee_1的博客
11-18 3281
除了渲染方向之外(FrontSide,BackSide,DoubleSide)设置要正确之外，还要注意模型的实际中心点位置。 如果模型实际中心点位置跑到了相机的视锥体外面也会导致模型消失。 某些动画师或者模型师导出不规范的模型时会出现此类问题。 如果要把某个模型或者全部mesh改为即使物体中心点看不到也不消失可以这样： //遍历子物体，如果是mesh就让他不裁剪消失 model.trave...
Threejs中的透明对象、模型的重叠部位显示错误
懮俍的博客
01-07 3694
根据需求，制作了一个平面看板，在外部模型之上，但是某些角度常常出现透明对象的模型重叠后显示错误的问题。 在threejs中，使用深度缓冲（Z-Buffer）来完成场景可见性计算，即确定场景哪部分可见，哪部分不可见。深度缓冲（Z-Buffer）是一个二维数组，其中的每一个元素对应屏幕上的一个像素，如果场景中的两个模型在同一个像素生成渲染结果，那么图形处理卡就会比较二者的深度，并且保留距离观察者较近的物体在该像素点的渲染结果，这样就形成了近的模型遮挡远的模型的结果。 但是就是因为使用了深度缓冲，当场景.
Three.js 透明物体不能正常显示/渲染顺序的控制问题
helloyangkl的博客
02-11 940
Three.js 透明物体不能正常显示/渲染顺序的控制问题
three.js设置gltf模型透明时失效
weixin_52047574的博客
08-08 444
three.js官方文档说alphaTest属性的含义如下：设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。但问题是在未加设置alpahTest时，默认值为0的话，不透明度显然是大于它的，应该正常渲染啊，结果却并未渲染。
three.js中plane透明部分背后的物体变全透明的问题及解决方法
qq_40765480的博客
12-27 1133
这就是我遇到的问题的原因，由于我设置了plane的transparent属性为true，three.js就会按照深度排序的规则，先渲染plane，然后再渲染plane背后的物体，但是由于plane已经写入了深度缓冲区，plane背后的物体就被忽略掉了，导致看起来像是全透明的。但是，当我把这个plane放到场景中，发现了一个奇怪的现象：plane透明的部分背后的其他物体变成了全透明的，就像是被plane遮挡住了一样。这样，plane就不会写入深度缓冲区，也就不会影响背后的物体的渲染，达到了我想要的效果。
ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题
HW140701的博客
09-24 2892
最近使用three.js在场景中显示gltf模型时候，当我使用操作摄像机想近距离观察gltf模型的时候发现一部分模型消失了，比如说假如这个模型是一匹马，当我远距离观察时可以完整的看到整匹马，但是当我想拉近摄像头近距离观察马的时候，这个时候我只能看到马的头，马的身子和脚的部分突然就消失了。我马上意识到是摄像机的视椎体出现了问题，但是我的视椎体设置的很大，如下肯定可以把这个模型完整的包含在视椎体里面，不可能会出现上述的奇怪问题。
Three.js的物体点击选中拾取DEMO
05-23
Three.js的物体点击选中拾取DEMO
three.js利用卷积法如何实现物体描边效果
10-15
主要给大家介绍了关于three.js利用卷积法如何实现物体描边效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Threejs透明管道及流动液体效果
05-10
使用相同的路径创建两条管道，一条用于透明管道，一条作为管道内流动的液体。 需要注意的是，透明管道材质需要设置depthWrite=false;否则内部流动的液体会被遮挡无法显示。  
Threejs透明管道及流动液体效果相同的路径创建两条管道，一条用于透明管道，一条作为管道内流动的液体
12-02
Threejs透明管道及流动液体效果使用相同的路径创建两条管道，一条用于透明管道，一条作为管道内流动的液体。需要注意的是，透明管道材质需要设置depthWrite=false;否则内部流动的液体会被遮挡无法显示。
ThreeJS FBXLoader 加载3D文件，材质消失，已解决
qq_44393166的博客
08-16 4548
ThreeJS FBXLoader 加载3D文件，材质消失，已解决ThreeJS FBXLoader 加载3D文件，材质消失直接贴代码 ThreeJS FBXLoader 加载3D文件，材质消失 直接贴代码 请修改源码 examples/jsm/loaders/FBXLoader.js const texture = textureMap.get( id ); if ( texture !== undefined && texture.image !== undefined ) {
threejs 设置了透明度后，设置了Z值不为0，结果不透明效果消失问题解决
qq_37200686的博客
11-13 235
设置材质的 depthWrite: false。
Three.js 全景图（标注偏移、显示不全的问题记录）
vagabond_的博客
04-28 1535
最近在项目中利用three.js实现了vr全景的功能，过程中遇到了标注偏移、标注图标显示不全的问题，在此做个记录。
threejs透明发光
06-26
### 回答1： Threejs是一款强大的基于WebGL的JavaScript 3D图形库，它支持多种材质类型，包括透明和发光。透明和发光通常被用于创建真实感的光影效果、特效、和 UI 元素。因此，理解如何在Threejs中实现透明和发光是非常有用的。 在Threejs中实现透明材质，需要使用带有透明度属性的材质类型，比如THREE.MeshBasicMaterial和THREE.MeshPhongMaterial。透明度属性可以使用0到1之间的值进行调整，数值越小，材质越透明。开启透明属性后，需要确保场景内的其它物体都正确渲染，因为透明的物体会影响其它物体的呈现。 如果想在Threejs中实现发光效果，需要使用THREE.MeshBasicMaterial和THREE.MeshLambertMaterial，因为它们支持emissive属性。emissive属性可以让材质在渲染时自行发光，颜色和强度可以自定义。发光效果也常被用于给UI元素和特效添加光芒。 如果要同时在Threejs中实现透明和发光，可以使用THREE.MeshStandardMaterial。除了具有透明度和emissive属性，它还支持roughness属性和metalness属性，用于设置光泽度和金属感。结合使用这些属性，可以实现非常逼真的材质效果。 总之，Threejs在透明和发光方面的支持非常强大，我们只需要选择相应的材质类型，优化场景设置，就可以轻松实现透明和发光效果。 ### 回答2： threejs是一个用于创建三维动画的JavaScript库，通过使用其内置的材质和光源，可以轻松实现透明和发光的效果。 透明效果可以通过设置材质的opacity属性来实现，该属性值为0到1之间的浮点数，值越小表示透明度越高。可以使用如下的代码实现透明效果： ```javascript var material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 }); ``` 发光效果可以通过设置材质的emissive属性来实现，该属性表示材质的自发光颜色，可以设定为一个RGB颜色值，例如： ```javascript var material = new THREE.MeshBasicMaterial({ color: 0xffffff, emissive: 0x00ff00, emissiveIntensity: 0.5 }); ``` 其中，emissiveIntensity属性表示发光强度，取值范围为0到1之间的浮点数。 同时，当透明和发光效果结合在一起时，可以创建一个非常炫酷的效果。例如，可以创建一个透明的立方体，并设置其边缘发出绿色的光： ```javascript var material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5, emissive: 0x00ff00, emissiveIntensity: 0.5 }); var geometry = new THREE.BoxGeometry(1, 1, 1); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` 这样创建的立方体将会呈现出半透明，边缘发出绿色光的效果，给人一种非常酷炫的感觉。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值