标签:threejs

threejs

threejs CSS3DRenderer标注模型 学习笔记

threejs CSS3DRenderer标注模型 学习笔记
CSS3D不面向摄像机,场景缩放时,缩小放大跟随着,不被模型遮挡,通过DOM事件点击 CSS3DRenderer用于通过CSS3的transform属性, 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换,那么这一渲染器十分有...

yekong 10个月前 (07-21) 2162℃ 3喜欢

threejs

threejs CSS3DSprite精灵模型标注模型 学习笔记

threejs CSS3DSprite精灵模型标注模型 学习笔记
CSS3DSprite精灵模型面向摄像机,场景缩放时,缩小放大跟随着,会被模型遮挡,可以被射线拾取。 CSS3DRenderer用于通过CSS3的transform属性, 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换,那么...

yekong 10个月前 (07-21) 2689℃ 0喜欢

threejs

threejs CSS2DRenderer标注每个模型 学习笔记

threejs CSS2DRenderer标注每个模型 学习笔记
CSS2D面向摄像机,场景缩放时,缩小放大都一样大,不被模型遮挡,通过DOM事件点击 在模型中添加CSS2DRenderer标注,在之前的项目中也遇到了一个这样的需求,自己研究了好长时间也没搞出来,最后购买了教程跟着教程走了一遍才理解了实现方法。 使用的threejs版本号0.1...

yekong 10个月前 (07-21) 3011℃ 3喜欢

threejs

threejs 鼠标交互—射线拾取 选中模型高亮 学习笔记

threejs 鼠标交互—射线拾取 选中模型高亮 学习笔记
web3D项目中,需要对模型进行操作,比如点击模型后,模型高亮,这里用到了射线投射器Raycaster 效果展示 通过鼠标交互—射线拾取实现点击模型,模型高亮实现实例。 threejs 鼠标交互—射线拾取 选中模型高亮 动态效果 threejs版本 0.123.0 射线拾...

yekong 10个月前 (07-21) 2415℃ 0喜欢

threejs

threejs 实现白色雾背景效果 学习笔记

threejs 实现白色雾背景效果 学习笔记
webGL使用threejs实现白雾效果 通过Fog实现雾 // 设置雾化效果,雾的颜色和背景颜色相近,这样远处网格线和背景颜色融为一体 scene.fog = new THREE.Fog(0xffffff, -100, 1000); 背景 通过和雾类似的背景来和雾搭配使用。 ...

yekong 10个月前 (07-21) 1094℃ 0喜欢

threejs

Threejs 销毁场景的方法

Threejs 销毁场景的方法
vue3 中使用Threejs绘制地图的时候,会有下钻的需要,在实际开发中使用下钻需要重绘,如果不销毁旧场景就直接绘制会导致内存占用进而越来越卡顿,所以这里我们要先实现场景的销毁。 在 Three.js 中,当你想要销毁一个场景(scene)或者释放内存时,可以通过以下方法来实现...

yekong 10个月前 (07-01) 383℃ 0喜欢

threejs

threejs 实现发光描边闪烁效果

threejs 实现发光描边闪烁效果
threejs实现发光描边后,我们可以继续深入学习,进行更多的设置。 OutlinePass有很多控制高亮外边框样式的属性,下面介绍几个比较常用的属性。 OutlinePass描边颜色 OutlinePass描边颜色,通过visibleEdgeColor来实现,默认是白色 out...

yekong 1年前 (2023-03-24) 2073℃ 3喜欢

threejs

threejs 射线Ray api的使用

threejs 射线Ray api的使用
学习Threejs中的射线Ray概念,你可以类比数学几何中提到的射线,在三维空间中,一条线把一个点作为起点,然后沿着某个方向无限延伸。 创建射线对象 // 创建射线对象 const ray = new THREE.Ray() 射线起点 .origin 射线Ray的起点.orig...

yekong 1年前 (2023-03-09) 541℃ 0喜欢