web3d项目开发中，往往会因为3d模型文件过大而出现加载速度过慢的问题，
glb格式的文件要比gltf文件小一些，这里我们可以将gltf格式的3d模型转为glb格式文件，再进行zip压缩处理，前端请求zip再对zip进行解压渲染处理。
可以让建模师帮忙导出为glb格式文件也可以...
yekong
1年前 (2023-07-21)
喜欢
gltf模型加载器 GLTFLoader.js
相机参数根据需要设置
加载gltf的时候，webgl渲染器编码方式设置
引入 GLTFLoader.js
在threejs官方文件的examples/jsm/子文件loaders/目录下，可以找到一个文件
GLTFLoader....
yekong
1年前 (2023-07-21)
喜欢
CSS3D不面向摄像机，场景缩放时，缩小放大跟随着，不被模型遮挡，通过DOM事件点击
CSS3DRenderer用于通过CSS3的transform属性， 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么这一渲染器十分有...
yekong
1年前 (2023-07-21)
喜欢
CSS2DRenderer 和 CSS3DRenderer 都是 Three.js 中用于在 Three.js 场景中渲染 HTML 元素的渲染器，它们都可以将 HTML 元素作为 2D 或 3D 的精灵（Sprite）在 Three.js 场景中进行渲染，实现与场景中的 3D ...
yekong
1年前 (2023-07-21)
喜欢
CSS3DSprite精灵模型面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。
CSS3DRenderer用于通过CSS3的transform属性， 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么...
yekong
1年前 (2023-07-21)
喜欢
CSS3DSprite 是 Three.js 中的一个类，用于在 Three.js 场景中将 HTML 元素作为 3D 精灵（Sprite）进行渲染，实现在场景中显示与场景中的 3D 物体关联的 HTML 元素。CSS3DSprite 是 CSS3DObject 的子类，用于特定...
yekong
1年前 (2023-07-21)
喜欢
CSS2D面向摄像机，场景缩放时，缩小放大都一样大，不被模型遮挡，通过DOM事件点击
在模型中添加CSS2DRenderer标注，在之前的项目中也遇到了一个这样的需求，自己研究了好长时间也没搞出来，最后购买了教程跟着教程走了一遍才理解了实现方法。
使用的threejs版本号0.1...
yekong
1年前 (2023-07-21)
喜欢
CSS2DRenderer 是 Three.js 中的一个渲染器，用于在 Three.js 场景中渲染 HTML 元素，实现 2D 的 CSS 样式渲染。它可以将 HTML 元素作为 2D 的精灵（Sprite）在 Three.js 场景中进行渲染，可以用于在 Three.js ...
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)
喜欢
