实现 three.js 中元素随物体移动的特效
需求:
1、实现元素跟随指定物体位置进行位置变化
实现方案:
1--- Sprite 精灵
2 --- cavans 画图后创建模型贴图
3 --- CSS2DRenderer渲染方式
4 --- 直接创建元素,在动画函数内计算元素位置
目前所了解到的以上的方案都可实现,但还需根据实际的使用场景选择使用
1,2 两种实际是一种方式, Sprite就是针对这套东西封装了一下.当然区别肯定是有的,反正我是木有用过精灵这个鬼东西.感觉要写好大一堆东西
前三种方式已经有过记录,这里不再做记录,
因为上述的需求是要求场景转动的时候是以下图标注的点进行变换,所以之前的几种方案都无法达到预期效果(技术太low,也木有找到相应的源码参考,每次都是卡在最后的中心点问题上面)
皇天不负有心猿. 第四个方案总算是被我无意间找到了,也算是个比较基础的实现方式
这里针对地4总方案进行记录
过程:
特别简单,特别明了.
1. 写好你的元素
<div class="tests" > <div style="display: flex;"> <div class="lines"></div> <div class="lines1"></div> <div style="background: forestgreen;">999</div> </div> </div>
2. 去到场景动画,
然后就是找到你要挂载的模型,获取到模型的2维坐标,
然后就是计算了,再然后就是更改元素的位置了.
update(){ let halfWidth = window.innerWidth / 2; let halfHeight = window.innerHeight / 2; var idNode = this.scene.getObjectByName("box2") // 找模型 var vector1 = idNode.position.clone().project(this.camera) // 获取二维坐标 var htmls = document.getElementsByClassName("tests")[0] // 找元素 // 计算坐标参数 var left = vector1.x * halfWidth + halfWidth var top = -vector1.y * halfHeight + halfHeight
// 设置元素坐标 if(htmls){ htmls.style = `display: flex;width:200px;position: absolute;left:${left}px;top:${top}px` } }, animate() { // 实时更新动画函数 this.renderer.render(this.scene, this.camera); this.labelRenderer.render(this.scene, this.camera); window.requestAnimationFrame(() => this.animate()); this.update() TWEEN.update(); },
搞定,搞定...
不知道有木有什么缺陷,以后再说吧,反正目前是可以用了.
要是哪位大神知道怎么改变 CSS2DObject 对象的中心点的话,也跪求告知. 一直卡了很久
最后木有办法才选择用这种方式.总感觉动画里面去做太多计算好像不是很好的样子.(也可能CSS2DRenderer 也是用这种方式进行封装了也不一定.)以后有时间再看看源码吧
原文地址:https://www.cnblogs.com/yc-c/p/14105317.html
上一篇: 轻松掌握选择排序算法全攻略
下一篇: 《搞定》读后感
推荐阅读
-
实现 three.js 中元素随物体移动的特效
-
RCWL-0516/RCWL-9196模块简介 & 微波感应模块简介-前言 RCWL-0516是一款由无锡日晨物联科技有限公司开发的微波感应模块(资料下载),见图0.0、图0.1,用于检测物体(人体)移动,具有以下特征: 1.穿透感应:可穿透适当厚度的玻璃、木板以及墙壁。 2.抗干扰:不受温度、灰尘等环境因素影响。 3.感应距离:5~8m(可调,见后文) 4.可重复触发、触发时间可调(见后文) 5.工作电压:3.3~18V 6.稳压输出:提供3.3V电压输出(最大100mA) 7.夜晚自动工作:外接光敏电阻和一个电阻实现 当模块检测到物体在感应范围内移动时,OUT引脚输出一段时间的高电平(该时间可通过电容“C-TM”调节,见后文);若在输出高电平期间再次检测到物体移动,高电平持续时间将延长一段时间(又称为重复触发),该时间不可叠加。 模块使用的注意事项如下,示意图见图0.2: 1. 感应面正前方不能有金属遮挡。 2. 感应面前后方预留2cm以上空间。若对灵敏度要求很高,应预留4cm以上距离,且模块后方遮挡空间应尽可能小。 3. 模块与安装载体平面尽可能平行。 4. 有元器件面为正感应面,反面为负感应面,负感应面效果略差。 5. 相同模块,单个个体之间间距应大于2m。 图0.0-模块实物图(正) 图0.1-模块实物图(反) 图0.2-感应区域示意图 原理 关于此模块的原理,有2种主流观点,这些观点所争论的焦点在于哪种解释是最主要的: 1. 以Roger Clark为代表的“反射”解释:模块上的振荡器会发射出微波信号,位于模块感应区域内的物体会反射模块所发出的微波信号,这些反射信号又被模块所接收,接收到的反射信号会改变流经晶体管发射极的电流I。外界环境不变的情况下,模块内部的调节电路会稳定振荡器,此时振荡器处于稳定状态,电流I也处于稳定;当外界环境发生变化(例如,有物体进入感应区域),该物体的反射信号会使振荡器暂时失去稳定,从而导致电流I发生变化。模块通过检测该电流I的变化,以检测物体移动。此过程中,发射频率的变化只是由于振荡器受反射信号影响而进入一个“暂稳态”所导致。 2.以Joe Desbonnet为代表的“多普勒效应”解释:位于模块感应区域内的物体会反射模块所发出的微波信号,这些反射信号的频率由于物体移动而发生改变(多普勒效应)。模块通过对比发射与反射频率的差异,以判断是否有物体进入感应区域。 应用 降低感应距离:模块背面丝印“R-GN”处添加1MΩ的电阻,模块的感应距离可降低到5m;如果不接,感应距离为7m。 调节触发时间:模块背面丝印“C-TM”处添加不同容值的电容,可以调节触发时间(“C-TM”电容容值的选择见后文);若不安装电容,触发时间为2~4s。 夜晚自动工作:模块正面丝印“CDS”处添加光敏电阻、模块背面丝印“R-CDS”处添加适当阻值的电阻,可控制模块在夜晚自动工作。“CDS”与“R-CDS”的选择方法见后文。 以上应用的实际电路请参考图1.0、图1.1。 图1.0-测试电路(正) 图1.1-测试电路(反) 测试 测试由5部分组成: 1.测量模块处于不同状态时的功耗,见表0.0。 2.未接入电阻“R-GN”时,测试模块最大感应距离,见表0.1。 3.接入电阻“R-GN”,测试模块最大感应距离,见表0.2。 4.以下步骤将介绍如何根据确定的光敏电阻“CDS”,选择电阻“R-CDS”的阻值,以实现模块夜间自动工作的功能。 1-白天,接入可调电阻“R-CDS”(推荐2MΩ)、光敏电阻“CDS”。 2-触发模块后(在模块面前走动),调节可调电阻,直到触发消失。再次尝试触发模块,正常情况下,模块应该无法被触发(如果可以触发,重复步骤2)。 3-将光敏电阻感光面遮住,尝试触发模块,正常情况下,模块应该可以被触发(如果无法触发,重复步骤3)。 4-此时可调电阻阻值即为电阻“R-CDS”的正确阻值。 5.电容“C-TM”分别接入不同容值的无极电容,测试模块单次触发所持续的时间,见表0.3。 测试条件 总电流(mA) 总功耗(mW) +5V供电电压,模块未触发 3.63 18.15 +5V供电电压,模块被触发 4.33 21.65 表0.0-模块功耗信息 正面最大感应距离(M) 6 反面最大感应距离(M) 2 表0.1-未接入电阻“R-GN”时,模块最大感应距离[1] 正面最大感应距离(M) 5 反面最大感应距离(M) 1 表0.2-接入电阻“R-GN”=1MΩ时,模块最大感应距离[1] 电容“C-TM”容值 悬空 103(10nF) 104(100nF) 224(220nF) 474(470nF) 105(1uF) 理论单次触发时间(s) 2~4 6 30 66 140 300 实际单次触发时间(s) 3 6 32 67 122 210 表0.3-电容“C-TM”容值 vs. 模块单次触发持续时间 结论 RCWL-0516是一款性价比高的人体感应模块,具有以下优缺点: 优点:
-
如何在Java Swing中实现组件随窗口拖动的同比例移动和缩放