THREE.js同时使用outlinePass和TransformControls，选中其他物体时，TransformControls辅助对象也加上了描边

最新推荐文章于 2024-04-19 14:13:28 发布
最新推荐文章于 2024-04-19 14:13:28 发布
阅读量602 收藏 4
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43999459/article/details/127979830
版权

THREE.js同时使用outlinePass和TransformControls，选中其他物体时，TransformControls辅助对象也加上了描边

// 将第二个参数this.scene替换成需要加上outlinePass描边效果的group
this.outlinePass = new OutlinePass(new THREE.Vector2(this.dom.offsetWidth, this.dom.offsetHeight), this.scene, this.camera)
⬇⬇
this.outlinePass = new OutlinePass(new THREE.Vector2(this.dom.offsetWidth, this.dom.offsetHeight), this.group, this.camera)

使用this.scene时，选中其他物体时，transformControls描边显示在这里插入图片描述
使用group时，选中其他物体时，transormControls控件就没有描边了
在这里插入图片描述

BlueCodeRun
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
three-freeform-controls:Threejs对象的旋转和平移控件
05-17
三自由度控件 该库为对象提供旋转和平移控件。 当前支持以下功能： 具有3个自由度的翻译控件 具有3个自由度的旋转控制 围绕任意轴的平移和旋转控制 平面控件，用于限制在任意平面上的平移 眼平面内的旋转控制 自由选择控件以在眼平面内平移 固定模式控件（保持对象旋转的方向） 继承模式控件（使控件跟随对象旋转） 自定义对象作为控件句柄 仅启用部分控制 控件的多个实例锚定到单个对象 锚定到不同对象的控件的不同实例 对齐网格 沿单个轴的平移极限 去做： 测试 关于该项目 执照 three-freeform-controls随一起分发。 贡献 在为此存储库做贡献时，请首先通过上的问题讨论您希望进行的更改。
three.js利用卷积法如何实现物体描边效果
10-15
在本文中，我们将深入探讨如何使用three.js库和卷积法来实现三维物体的描边效果。卷积法是一种常见的图像处理技术，在机器学习和计算机视觉领域广泛应用，它可以通过对图像进行运算来提取特征或增强特定效果。在...
TransformControls 是 Three.js 中的一个类，用于在网页中进行 3D 场景中物体的交互式操作。
qq_37030315的博客
03-26 2022
您可以通过控制器的属性来自定义其外观和行为，例如控制手柄的显示、设置控制器的大小等。
【threejs教程3】threejs物体轮廓发光
最新发布
c_wengy的博客
04-19 1277
在Three.js项目中，为了增强场景中的交互和视觉效果，我们有时需要突出显示特定的3D物体，比如为其添加发光效果或者清晰的轮廓线。本文将通过介绍如何使用OutlinePass类来实现这一目标。
THREE.JS 使用TransformControls对模型拖拽
qq_44426236的博客
12-21 2008
该类可提供一种类似于在数字内容创建工具（例如Blender）中对模型进行交互的方式，来在3D空间中变换物体。和其他控制器不同的是，变换控制器不倾向于对场景摄像机的变换进行改变。TransformControls 是由 THREE.JS 提供的一类控制器。
Three.js TransformControls 和 TrackballControls 介绍
flame_007的博客
04-12 3205
1、TransformControls TransformControls是变换控制器，可以操纵物体进行移动、缩放、旋转操作。 实例生成： var control = new TransformControls( camera, renderer.domElement );//camera是相机对象，renderer是渲染器对象 可以通过setMode来实现相关操作： control.setMo...
threejs多通道组合(GlitchPass和描边)
u014291990的博客
12-18 536
通道组合使用,一个通道就像流水线上的一个工位一样，负责完成一个后处理功能，然后交给下一个通道，完成新的后处理功能。OutlinePass有很多控制高亮外边框样式的属性，下面介绍几个比较常用的属性。threejs可以多个后处理效果组合使用，比如模型先通过。的功能是控制描边的闪烁频率，默认0不闪烁。设置描边，再设置其它的后处理通道。表示高亮发光描边的厚度，默认值1。表示高亮描边的发光强度，默认值3。可以设置模型边缘高亮描边颜色。的讲解，给大家演示如何修改。默认高亮发光描边样式。高亮描边发光强度设置。
three.js利用射线Raycaster进行碰撞检测
10-15
总结起来，Three.js中的Raycaster是进行碰撞检测的重要工具，通过合理地配置和使用，我们可以实现精确的3D空间碰撞检测，从而丰富交互体验和增强虚拟场景的真实性。在实践中，需要注意物体的分段数、射线的起点和...
Unity3D选中物体描边特效
11-19
本资源实现了选中物体描边特效，并且描边颜色随时间变化，描边宽度随时间扩大和缩小，不同时间选中的物体，其颜色渐变规律各异，按住Ctrl键单击可以追加选中描边，重复选中取消描边，点击地面或空白处，所有已描边...
ThreeJS加载glb模型实用案例
01-26
在Web开发领域，Three.js是一个非常流行的JavaScript库，它用于创建和展示3D图形，而无需复杂的编程。Three.js利用WebGL技术，这是一种基于OpenGL标准的JavaScript API，可以在浏览器上实现硬件加速的3D渲染。本篇...
three.js实现物体描边效果-shader
X01动力装甲的专栏
05-27 7500
three.js 实现物体描边效果-shader 在游戏中描边效果非常常见，比如选中物体或者人物的时候会出现。 描边效果的原理是在物体的外包包裹了一层，就需要描边的物体比实际的物体大一点点。所以需要牵涉到顶点，就是需要把物体顶点往法线的方向扩展一点点。需要修改vertexShader。 ...
three.js DragControls +TransformControls 实现沿轴线拖拽功能
qq_40765480的博客
04-07 1715
three.js 实现沿轴线拖拽功能
web3d-three.js场景设计器-TransformControls模型控制器
acheng
01-05 1218
/ 如果TransformControls正在拖动，则禁用MapControls。// console.log('相机的模型', intersects, intersects.length);// 如果点击的不是模型，那么解除模型与TransformControls的附加。// 对TransformControls的使用。方便布局过程中快捷对模型进行摆放操作。translate --移动模式。rotate -- 旋转模式。scale -- 缩放模式。
vue项目中，Threejs 点击模型，高亮发光模型外轮廓
c_qianxia5040的博客
04-13 3886
效果如图，点击哪块，对应显示边框线，带呼吸灯。并根据点击的模块为模块添加光效。4、添加高亮发光模型外轮廓效果。
解决threejs后处理轮廓线outlinePass选中 transformControls的辅助线
m0_56102498的博客
03-24 598
解决threejs后处理轮廓线outlinePass选中 transformControls
three.js 变换大小、角度、位移控件 TransformControls.js
热门推荐
蜗牛速度额的博客
09-05 1万+
TransformControls.js：鼠标操控物体移动、缩放、旋转的控件（物体操作工具） 该控件可以实现可视化操作三维模型，通过选中一个三维模型，然后通过控件对象的方法attach()可以把选中的三维模型与控件TransformControls绑定， 你可以把控件对象TransformControls理解为一个特殊的三维模型，比如平移状态，控件对象TransformControls就是一个三...
threejs 卷积描边处理
Zz10566的博客
08-08 715
threejs 一个好用的自定义描边
three.js学习：给obj模型设置发光并解决渲染变暗问题
qq_43641110的博客
02-28 4326
在three.js中实现几何体边界发光，并解决渲染之后环境变暗的问题
Threejs入门之十四：Threejs中的组(Group)对象
九仞山的专栏
04-05 3595
详细介绍了Threejs中组Group的属性与方法，本地坐标系(局部坐标系)和世界坐标系
three.js 渲染线条 发昂
12-23
以下是使用three.js渲染线条的步骤： 1. 首先，加载模型。你可以使用OBJLoader来加载OBJ模型。根据你提供的引用，你可以参考官方文档中的示例代码来加载模型。具体代码如下： ```javascript // 导入OBJLoader ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值