CSS3D不面向摄像机，场景缩放时，缩小放大跟随着，不被模型遮挡，通过DOM事件点击
CSS3DRenderer用于通过CSS3的transform属性， 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么这一渲染器十分有...
yekong
1年前 (2023-07-21)
喜欢
CSS3DSprite精灵模型面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。
CSS3DRenderer用于通过CSS3的transform属性， 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么...
yekong
1年前 (2023-07-21)
喜欢
CSS2D面向摄像机，场景缩放时，缩小放大都一样大，不被模型遮挡，通过DOM事件点击
在模型中添加CSS2DRenderer标注，在之前的项目中也遇到了一个这样的需求，自己研究了好长时间也没搞出来，最后购买了教程跟着教程走了一遍才理解了实现方法。
使用的threejs版本号0.1...
yekong
1年前 (2023-07-21)
喜欢
web3D项目中，需要对模型进行操作，比如点击模型后，模型高亮，这里用到了射线投射器Raycaster
效果展示
通过鼠标交互—射线拾取实现点击模型，模型高亮实现实例。
threejs 鼠标交互—射线拾取 选中模型高亮
动态效果
threejs版本
0.123.0
射线拾...
yekong
1年前 (2023-07-21)
喜欢
webGL使用threejs实现白雾效果
通过Fog实现雾
// 设置雾化效果，雾的颜色和背景颜色相近，这样远处网格线和背景颜色融为一体
scene.fog = new THREE.Fog(0xffffff, -100, 1000);
背景
通过和雾类似的背景来和雾搭配使用。
...
yekong
1年前 (2023-07-21)
喜欢
vue3 中使用Threejs绘制地图的时候，会有下钻的需要，在实际开发中使用下钻需要重绘，如果不销毁旧场景就直接绘制会导致内存占用进而越来越卡顿，所以这里我们要先实现场景的销毁。
在 Three.js 中，当你想要销毁一个场景（scene）或者释放内存时，可以通过以下方法来实现...
yekong
2年前 (2023-07-01)
喜欢
在学习threejs粒子的时候，发现自己实现的效果和视频中达到的效果差别非常大，经过查询原因如下
在使用Three.js查看粒子时，如果未能实现远小近大的效果，可能有以下几个原因：
相机设置不正确：请确保在创建透视投影相机（PerspectiveCamera）时，设置了适当的...
yekong
2年前 (2023-06-25)
喜欢
threejs实现发光描边后，我们可以继续深入学习，进行更多的设置。
OutlinePass有很多控制高亮外边框样式的属性，下面介绍几个比较常用的属性。
OutlinePass描边颜色
OutlinePass描边颜色，通过visibleEdgeColor来实现，默认是白色
out...
yekong
2年前 (2023-03-24)
喜欢
学习Threejs中的射线Ray概念，你可以类比数学几何中提到的射线，在三维空间中，一条线把一个点作为起点，然后沿着某个方向无限延伸。
创建射线对象
// 创建射线对象
const ray = new THREE.Ray()
射线起点 .origin
射线Ray的起点.orig...
yekong
2年前 (2023-03-09)
喜欢
问题
在threejs项目中，可能会出现一种情况，明明修改的只是模型1的材质颜色，其他模型的材质颜色也跟着变了。
原因：
两个模型共享的同一个材质，对材质的任何修改都会同时反应在两个模型上。
两个mesh共享一个材质，改变一个mesh的颜色，另一个mesh2的颜色也会跟着改变
n...
yekong
2年前 (2023-02-28)
喜欢
