CSS3DSprite精灵模型面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。
CSS3DRenderer用于通过CSS3的transform属性， 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么...
yekong
2年前 (2023-07-21)
喜欢
CSS3DSprite 是 Three.js 中的一个类，用于在 Three.js 场景中将 HTML 元素作为 3D 精灵（Sprite）进行渲染，实现在场景中显示与场景中的 3D 物体关联的 HTML 元素。CSS3DSprite 是 CSS3DObject 的子类，用于特定...
yekong
2年前 (2023-07-21)
喜欢
CSS2D面向摄像机，场景缩放时，缩小放大都一样大，不被模型遮挡，通过DOM事件点击
在模型中添加CSS2DRenderer标注，在之前的项目中也遇到了一个这样的需求，自己研究了好长时间也没搞出来，最后购买了教程跟着教程走了一遍才理解了实现方法。
使用的threejs版本号0.1...
yekong
2年前 (2023-07-21)
喜欢
CSS2DRenderer 是 Three.js 中的一个渲染器，用于在 Three.js 场景中渲染 HTML 元素，实现 2D 的 CSS 样式渲染。它可以将 HTML 元素作为 2D 的精灵（Sprite）在 Three.js 场景中进行渲染，可以用于在 Three.js ...
yekong
2年前 (2023-07-21)
喜欢
web3D项目中，需要对模型进行操作，比如点击模型后，模型高亮，这里用到了射线投射器Raycaster
效果展示
通过鼠标交互—射线拾取实现点击模型，模型高亮实现实例。
threejs 鼠标交互—射线拾取 选中模型高亮
动态效果
threejs版本
0.123.0
射线拾...
yekong
2年前 (2023-07-21)
喜欢
webGL使用threejs实现白雾效果
通过Fog实现雾
// 设置雾化效果，雾的颜色和背景颜色相近，这样远处网格线和背景颜色融为一体
scene.fog = new THREE.Fog(0xffffff, -100, 1000);
背景
通过和雾类似的背景来和雾搭配使用。
...
yekong
2年前 (2023-07-21)
喜欢
Three.js的Raycaster（射线投射器）是一个用于检测场景中物体与射线相交的工具。它可以用于实现鼠标拾取、碰撞检测、交互式选择等功能。Raycaster通过从指定的原点（如摄像机位置）发射射线，来检测射线与场景中物体的相交情况。Raycaster射线投射在3d模型中使用...
yekong
2年前 (2023-07-21)
喜欢
THREE.Fog 是 Three.js 中用于实现线性雾化效果的类。它的用法、参数和一个简单的使用实例如下：
用法：
创建 THREE.Fog 对象：
const fog = new THREE.Fog(color, near, far);
参数：
color：表示雾化的颜...
yekong
2年前 (2023-07-21)
喜欢
课程概述
《物联网Web3D可视化WebGL》讲解如何实现物联网Web3D可视化效果，比如你想实现一个粮仓或园区的Web3D可视化效果，主要使用WebGL的3D引擎Threejs开发实现。
学习本课程有前端基础即可，如果了解three.js更好
学习建议：一定要结合每节课提供的...
yekong
2年前 (2023-07-20)
喜欢
vue3 vite 数据大屏项目在进行接口调用的时候，会遇到跨域问题,报如下错误：
Access to XMLHttpRequest at https://www.wanjunshijie.com" from origin "http://localhost:8...
yekong
2年前 (2023-07-20)
喜欢
