- 博客(108)
- 资源 (30)
- 收藏
- 关注
RSS订阅原创 50套Threejs实现的Web3D学习案例，总有一套适合你
个人主页：，更多案例预览请点击==》个人简介：专注Web3D使用ThreeJS实现3D效果技巧和学习案例💕 💕积跬步以至千里，致敬每个爱学习的你。喜欢的话请三连，有问题请私信或者加微信。在18年至23年这期间，做了很多web3D方面的项目，如：数字孪生、元宇宙、VR全景、3D大屏、平台工具等项目软件。大部分都是我负责的项目，从开始不知道如何与模型设计、UI设计配合到总结出一套如何与模型设计、UI设计配合可以实现理想效果的经验。过程中也遇到多端，性能，兼容、配合各种各样的问题，踩了很多坑，也学到了很多
2024-01-03 10:53:34
1621
原创 【数字孪生】数字工厂三维可视化大屏，智慧养殖三维可视化大屏，智慧农田三维可视化大屏，智慧运维三维可视化大屏，三维在线展示
数字工厂三维可视化大屏，智慧养殖三维可视化大屏，智慧农田三维可视化大屏，智慧运维三维可视化大屏，三维在线展示，消防楼三维可视化大屏
2023-12-27 10:24:37
1187
原创 Threejs实现中国3D地图，CSS3DSprite标签，自定义标签，地图飞线
Threejs实现中国3D地图，CSS3DSprite标签，自定义标签，地图飞线，效果如下图Three.js 实现中国 3D 地图能够为用户提供沉浸式的地理信息体验。通过 Three.js，我们能够以令人惊叹的方式呈现地球表面的地图，让用户可以在虚拟世界中探索中国各个地区。CSS3DSprite 标签是一个强大的功能，它能够让我们在 Three.js 场景中轻松创建和管理 2D 元素。
2023-12-18 16:31:11
1063
原创 设备运维管理系统，设备列表管理，设备拓扑图关系图，告警日志运维
设备运维管理系统，设备列表管理，设备拓扑图关系图、告警、日志运维，效果如下图项目名称：设备运维管理系统项目概述：设备运维管理系统项目旨在构建一个集中管理和监控企业设备运维的平台，帮助企业有效管理和维护设备，提高设备的稳定性和可靠性，并降低设备运维成本。该系统将整合设备信息、故障记录、维修计划和资源管理等功能，提供全面的设备运维管理解决方案。项目目标：设备运维管理系统的目标是提高设备的可靠性和稳定性，降低设备运维成本，优化设备维修和维护流程，并提升企业运营的效率和竞争力。
2023-12-18 16:01:36
948
原创 智慧农田三维可视化大屏，土壤检测，电磁阀控制，气象监测
Threejs智慧农田三维可视化大屏，土壤检测，电磁阀控制，气象监测，效果如下图项目名称：智慧农田三维可视化大屏项目概述：智慧农田三维可视化大屏项目旨在通过智能传感器和先进的可视化技术，实现对农田的实时监测、数据分析和可视化展示。通过在大屏上呈现农田中的地形、植物生长状况以及相关数据指标，帮助农场管理人员进行农田管理决策、优化农作物生产并提高农田的可持续发展能力。
2023-12-18 15:54:50
531
原创 Threejs模型切片转3DTiles加载
Threejs大模型加载，obj模型、fbx模型、ifc模型切片加载。Threejs加载3DTiles格式文件
2023-07-12 20:16:09
2898
7
原创 Threejs加载倾斜摄影OSGB数据
Threejs加载倾斜摄影OSGB数据，无人机航拍倾斜摄影osgb模型数据转3DTiles格式。Threejs加载3DTiles格式数据。
2023-07-12 20:07:47
1976
1
原创 端午节使用Threejs实现数字人3D粽子
端午节使用Threejs实现数字人3D粽子，Threejs实现加载粽子模型，使用AI生成数字人并进行介绍。
2023-06-21 17:27:32
2398
6
原创 IT专业新生必读：IT专业的魅力与未来趋势
当代社会，信息技术（IT）行业正蓬勃发展，成为世界经济中不可或缺的一部分。无论是智能手机、社交媒体、电子商务还是人工智能等领域，IT技术都扮演着重要的角色。对于高考毕业生来说，选择IT专业是一个非常明智的选择，因为这个行业有着巨大的发展潜力和广阔的前景。首先，IT行业的发展势头非常迅猛。随着科技的不断进步，人们对信息技术的需求日益增长。无论是企业还是个人，都需要IT专业人才来解决技术问题、开发创新的软件和应用。因此，IT行业一直处于高速发展的轨道上，提供了大量的就业机会和广阔的职业发展空间。
2023-06-14 16:01:34
505
原创 创建自定义着色器：在 Three.js 中定制渲染效果
Three.js 是一个功能强大的 WebGL 库，它提供了丰富的渲染功能和内置的着色器。然而，有时候你可能需要更加个性化和定制化的渲染效果，这就需要使用自定义着色器来实现。本篇博文将介绍如何在 Three.js 中创建自定义着色器，并展示一些常见的渲染效果定制示例。编写顶点着色器和片元着色器代码编写顶点着色器和片元着色器代码时，实际的实现会因特定的需求和场景而有所不同。以下是一个简单的示例，展示了一个基本的顶点着色器和片元着色器代码：// 片元颜色输出// 将片元颜色设置为红色。
2023-06-08 23:00:24
1957
原创 优化 Three.js 渲染性能的实用技巧
Three.js 是一个功能强大的 WebGL 库，用于创建令人惊叹的交互式 3D 场景。然而，在处理复杂的场景和大量对象时，渲染性能可能成为一个挑战。本文将分享一些实用的技巧，帮助你优化 Three.js 渲染性能，提供更流畅的用户体验。减少面数： 通过简化几何体、使用低多边形模型或者使用 LOD（Level of Detail）技术，可以减少场景中的面数，从而提高性能。合并几何体： 将多个几何体合并成一个可以减少渲染调用次数，提高性能。使用 Three.js 提供的类中的方法来实现几何体的合并。
2023-06-08 13:36:42
1417
原创 分享五个前端WebGis地图框架（优缺点以及该如何选择）附地址
如何选择一个合适的前端GIS框架时，需要考虑以下几点：1，功能和特性前端GIS框架的主要目的是在 Web 环境下使用，以可视化地理数据。需要考虑所需功能和特性，例如应用需不需要数据编辑、地图标注、3D 可视化、如何实现用户交互、地图数据源等问题。在需求分析后，可以选取正在满足应用特性并具有扩展性的GIS框架。2，学习曲线和可维护性框架的学习曲线和可维护性也是选择前端GIS框架的重要考虑因素。一些GIS框架可能比其他框架更易上手，如Leaflet与OpenLayers比较；
2023-05-26 21:38:31
6009
原创 Threejs实现数字人绿幕视频背景透明播放，Shader绿幕视频抠像
Threejs实现数字人绿幕视频背景透明播放，在数字人应用中，绿幕技术是一种常见的技术，也是实现数字人绿幕视频背景透明播放的基础。所谓绿幕，就是在录制数字人视频时，用绿色背景替代实景背景，并在后期制作中将这个绿色背景抠掉，留下数字人在实景背景下的视频，实现数字人的半透明化，或者将数字人放到任意背景中，从而实现很多炫酷的视觉效果。
2023-05-13 23:42:11
2814
1
原创 Threejs中使用JoyStick库实现游戏手柄来控制人物的移动和朝向
首先，我们需要为Three.js创建一个基本的场景，一个相机和一个人物模型。然后，我们需要创建一个游戏手柄控制器，这里我们使用了已经封装好的JoyStick类库。拖动手柄控制器人物进行移动并且朝向移动方向。
2023-05-04 23:30:44
1641
1
原创 Threejs实现3D场景浏览器内存消耗过高导致浏览器卡顿崩溃刷新等问题解决办法以及3D场景在手机浏览器中画质不高的原因
不同的移动设备和浏览器对WebGL的支持程度可能不同，这可能会导致3D场景在不同设备上显示效果不同。相比于桌面设备，移动设备的性能普遍较低，可能无法支持高质量的3D场景渲染。如果场景结构不合理，例如过多的对象或层级嵌套太深等，则会导致性能问题。不合理的代码编写也会导致性能问题，例如频繁的创建和销毁对象、过多的计算和事件监听等。如果场景中有过多的光照和阴影效果、反射和折射等效果，则会导致渲染速度变慢。在一些低端设备上，三维场景的渲染可能受到硬件性能的限制，可以尝试使用更低的画质设置或减少场景中的对象数量。
2023-04-14 23:24:53
4854
原创 Web3D小游戏Threejs小游戏｜微信跳一跳｜飞行家｜前端小游戏抽奖游戏｜刮刮乐｜砸金蛋｜幸运大转盘｜翻牌抽奖｜套气球｜抓福袋｜抽奖游戏｜幸运大翻盘｜拼人品｜吃什么｜枪击游戏｜植物大战僵尸｜打砖块
Web3D小游戏Threejs小游戏｜微信跳一跳｜飞行家｜马路跳一跳｜横穿马路｜前端小游戏抽奖游戏｜刮刮乐｜砸金蛋｜幸运大转盘｜翻牌抽奖｜套气球｜抓福袋｜抽奖游戏｜幸运大翻盘｜拼人品｜吃什么｜枪击游戏｜植物大战僵尸｜打砖块。💕 💕积跬步以至千里，致敬每个爱学习的你。喜欢的话请三连，有问题请私信或者加微信。Web3D小游戏Threejs小游戏｜微信跳一跳｜飞行家｜马路跳一跳｜横穿马路。，更多案例预览请点击==》个人简介：专注Web3D使用。实现3D效果技巧和学习案例。
2023-04-12 23:15:44
283
原创 Three.js如何创建VR应用程序
Three.js是一款基于WebGL的JavaScript 3D引擎，提供了大量的3D图形渲染功能和工具，可以用于开发VR应用程序。💕 💕积跬步以至千里，致敬每个爱学习的你。喜欢的话请三连，有问题请私信或者加微信。个人简介：专注Web3D使用ThreeJS实现3D效果技巧和学习案例。2.创建WebGL渲染器和场景。，更多案例预览请点击==》3.创建VR设备管理器。4.创建摄像机和控制器。
2023-04-05 22:09:42
592
原创 Web3D开发经验分享：基于Three.js的Web3D建模案例
在进行Web3D开发时，我们需要掌握基础知识，使用Web3D框架进行开发，并且掌握一些Web3D开发的技巧和经验，以提高开发效率和用户体验。充分利用Web3D框架的特性：在进行Web3D开发时，可以充分利用Web3D框架的特性，例如Three.js框架的粒子系统、音频系统和物理引擎等，以及A-Frame框架的实体组件、物理引擎和VR支持等。控制3D场景的性能和流畅度：在进行Web3D开发时，需要控制场景的性能和流畅度，例如控制3D模型的多边形数和纹理质量等。三、Web3D开发的技巧和经验。
2023-04-05 22:04:37
1590
原创 Threejs实现键盘控制人物行走跳动/Capsule碰撞体(胶囊体)/碰撞检测(Octree八叉树)/游戏第三人称/镜头跟随人物移动
Threejs实现键盘控制人物行走和跳动、使用八叉树Octree和胶囊体Capsule进行碰撞检测、人物头顶显示名称标签、镜头跟随人物移动并且镜头围绕人物旋转，类似游戏中第三人称。如下效果图。
2023-04-05 22:02:15
3471
3
原创 Unity还是Three.js：两者的区别、优缺点以及如何选择
Three.js是一个JavaScript库，它可以在Web浏览器中创建交互式的3D场景和应用程序。它的主要优点是易于使用，提供了强大的渲染引擎和大量的文档和示例。Three.js支持多种3D模型格式，包括OBJ，GLTF和FBX等。它还提供了许多可定制的3D对象和材质，并且可以轻松地添加动画和交互式行为。Three.js是完全开源的，因此可以轻松地与其他Web技术进行集成，如HTML，CSS和JavaScript。Unity是一个跨平台的游戏引擎，它可以创建2D和3D游戏以及其他交互式应用程序。
2023-03-29 22:39:36
7943
原创 在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果，以实现更加自然流畅的动画效果
在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果，以实现更加自然流畅的动画效果。通过上面的介绍，我们了解了如何实现Three.js中的人物行走效果，并探讨了如何优化这个效果。在实际开发中，我们需要根据具体的需求和场景选择合适的技术和优化方式，以实现更加高效、自然流畅的人物行走效果。
2023-03-29 22:10:51
2387
原创 Web3D工厂可视化，工厂三维可视化大屏，工厂模型展示，统计图表，人员定位，人车轨迹运动，电子围栏
随着物联网技术和WebGL技术的不断发展，工厂三维可视化大屏正在成为一个越来越受欢迎的解决方案。利用Three.js这一优秀的WebGL渲染引擎，可以帮助我们在Web端实现高质量的三维可视化效果，为工厂管理和生产优化提供重要的帮助。本文将介绍如何结合物联网技术和Three.js引擎，实现工厂三维可视化大屏，包括工厂模型展示、统计图表、人员定位和人车轨迹运动等功能，为读者带来一些有益的思路和启示。个人主页：我是左本Web3D，更多案例预览请点击==》在线案例。
2023-03-23 21:30:49
2652
3
原创 如何利用Web3D技术打造在线虚拟展览馆
在开始建立虚拟展览馆之前，我们需要确定目标和需求。例如，展览馆的规模和面积、展览的种类和数量、展览的交互方式和参与体验等等。同时，我们需要考虑展览馆的受众群体和目标市场，这将有助于我们制定出更加精准的策略。
2023-03-22 22:10:32
1609
原创 使用Java对文件进行加密前端JavaScript对文件解密
前端解密使用的是CryptoJS库，CryptoJS是一个JavaScript加密库，可以提供诸如AES、DES、SHA1等常见的加密算法。使用CryptoJS解密前端加密文件时，需要了解密钥和加密模式，以确保成功解密文件。Java文件加密技术通常涉及使用密钥对文件进行加密。常见的Java文件加密算法包括AES、DES、RSA等。我们使用FileReader对象将文件读入内存，并在onload回调函数中使用CryptoJS解密文件内容。3.使用加密器将文件读入内存并加密。4.将加密后的文件写入磁盘。
2023-03-14 22:31:05
1494
原创 什么是Web3D？Web3D技术发展历程以及Web3D应用场景
什么是Web3D？Web3D是一种利用Web技术创建和展示3D场景和模型的技术。Web3D技术让用户可以通过Web浏览器直接访问和浏览3D内容，无需安装任何额外的插件或软件。Web3D技术通常使用HTML、CSS、JavaScript等Web标准技术进行开发，并使用各种3D引擎和库来实现3D渲染、交互和动画等功能。Web3D技术的优势在于可以在不同平台和设备上运行，包括桌面、移动设备和虚拟现实设备等，用户可以随时随地访问3D内容。
2023-03-14 21:47:59
2661
原创 分享四个前端Web3D动画库在Threejs中使用的动画库以及优缺点附地址
GSAP是一个功能强大的JavaScript动画库，它可以用于创建各种类型的动画效果，包括缓动、时间轴、滚动效果、SVG动画、CSS动画等等。：Anime.js是一个轻量级的JavaScript动画库，它可以用于创建复杂的动画效果，包括缓动、时间轴、颜色动画、路径动画等等。：Popmotion是一个强大的JavaScript动画库，它可以用于创建各种类型的动画效果，包括缓动、物理动画、路径动画等等。GSAP是一个功能强大的JavaScript动画库，支持多种类型的动画效果，可以创建各种复杂的动画效果。
2023-03-05 00:04:49
1818
原创 分享十个前端Web3D可视化框架附地址
它提供了一套强大的工具和API，可用于创建各种类型的高性能、交互式地理空间数据可视化，包括地图、图表、散点图、热力图、路径图、3D建筑等。它提供了一组简单易用的组件和API，包括物理引擎、碰撞检测、光照、材质、声音、特效等功能，可用于创建高品质的3D游戏和应用程序。它提供了丰富的地图和数据源，包括卫星图像、地形、天气、人口、交通等，可用于创建全球范围的可视化和交互式应用程序。Three.js：Three.js是一个流行的3D库，提供了大量的3D功能，包括基本几何形状、材质、灯光、动画、特效等。
2023-03-04 23:35:43
8010
1
原创 Web3D发展趋势以及Web3D应用场景
实时渲染技术是Web3D技术的核心。随着智能手机、平板电脑、电视等设备的普及，Web3D技术也需要为不同的设备和平台提供更好的支持和适配，使得用户可以随时随地体验到更加流畅和高质量的Web3D应用。随着硬件设备的进一步发展，VR和AR将成为更加主流的应用场景，而Web3D技术也将为其提供更好的支持。总之，Web3D技术具有广泛的应用前景和发展潜力，未来的发展趋势将是多元化和智能化的。Web3D技术的应用场景还在不断扩展和创新比如工业、医疗、军事等行业，可以预见的是Web3D技术在未来将会有更广泛的应用。
2023-03-04 16:40:18
2273
原创 Threejs减少锯齿几种方法
Threejs减少锯齿几种方法。这些方法可以帮助您减少Three.js中的锯齿，并创建更平滑的3D图形。但请注意，使用高质量的抗锯齿和纹理会增加渲染成本，因此请确保您的计算机或设备能够处理这些技术。
2023-03-04 16:24:20
4122
原创 什么是着色器/Threejs如何使用着色器/Threejs使用着色器实现平面网格的动态效果案例
什么是着色器/Threejs如何使用着色器使用着色器实现平面网格的动态效果案例。着色器（Shader）是计算机图形学中的一个重要概念，它是在 GPU 上运行的程序，用于计算三维场景中每个像素的颜色和其他属性。着色器通常分为两种类型：顶点着色器和片元着色器。顶点着色器主要用于对每个顶点进行操作，将其变换到最终渲染的位置，并将一些属性传递到片元着色器中。片元着色器主要用于对每个像素进行操作，计算像素的颜色值，并返回给渲染引擎。着色器可以帮助我们实现许多高级渲染效果，如阴影、光照、纹理、模糊、反射、折射等等。
2023-03-04 16:16:11
2171
原创 Threejs实现VR全景/模拟krpano异步加载/局部纹理刷新/图分层加载/瓦片加载
使用Threejs实现WebVR全景，模拟krpano异步加载、分层加载、瓦片加载、顺序加载，Threejs实现局部纹理刷新，Canvas纹理（CanvasTexture），从Canvas元素中创建纹理贴图。
2023-01-12 22:40:54
1630
3
原创 Threejs实现WebVR全景小行星入场动画/鱼眼效果/球形展开效果
使用Threejs实现WebVR全景，VR全景小行星入场动画、鱼眼效果、由远到近效果、球形展开动画效果。初始化场景和设置相机角度、位置。像机视锥体垂直视野角度fov，和相机的坐标位置。轨道控制器OrbitControls.js。实现动画效果，鼠标拖动查看使用。这种效果其实很简单，通过修改。
2023-01-10 23:24:53
2595
1
原创 Threejs实现鼠标点击人物行走/镜头跟随人物移动/鼠标点击动画/游戏第三人称/行走动作
Threejs获取鼠标点击位置、实现鼠标点击人物行走、人物头顶显示名称标签、镜头跟随人物移动并且镜头围绕人物旋转，类似游戏中第三人称、鼠标点击位置有动画效果，如下效果图。
2023-01-01 15:36:58
6654
13
原创 Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档
通过这个库可以很容易地实现某个属性在两个值之间进行过渡，而且起始值和结束值之间的所有中间值都会自动计算出来，这个过程叫作tweening（补间）。Tween.js是一个轻量级的JavaScript库，可以从https://github.com/sole/tween.js/下载。在Threejs中使用Tweenjs很简单，步骤主要是引入Tweenjs，写动画，动画刷新。TWEEN.add(tween) 和 TWEEN.remove(tween)以上方法通常只是在内部使用，一般情况下你了解即可。
2022-10-19 22:44:16
3789
原创 手机拍摄全景图并且使用Threejs实现VR全景，超简单WebVR
VR全景效果实现有好几种方式，比如720云，四方环视...在这些平台上可以注册账号上传全景素材制作自己的全景作品，还有一些工具软件如krpano、utovr...，krpano工具软件门槛较高需要根据教程学习开发，也可以使用ThreeJs实现全景效果，本文将主要介绍如何使用ThreeJs进行VR全景开发。使用ThreeJs制作VR全景其实很简单，拍摄全景图和网页开发。
2022-09-13 18:37:22
4077
2
原创 Threejs专用天空盒素材，五种天空盒素材免费下载
使用Threejs开发web3D场景，模拟现实环境让场景更有真实感会用到天空盒。实际相当于创建了一个很大的立方体，并且将摄像机和场景中的物体都在这个立方体里面，这样看到的就是模拟的真实环境。我整理了几种天空盒素材，供大家下载使用。网上也有很多站点可以下载素材，不过大都是如下图的全景图片要使用这种图片，最简单的方法是使用转换工具将图片转换成分离的图片。下面两个网站就可以转换： Threejs专用天空盒素材，五种天空盒素材下载-Javascript文档类资源-CSDN文库https://download.csd
2022-06-23 18:40:46
5551
1
原创 Three.js实现汽车3D展示/开关门/变色/运动/视角切换/波动热点/汽车模型
参考案例：three.js examples (threejs.org)https://threejs.org/examples/?q=car#webgl_materials_car 这里需要引入的js库1，汽车3D展示使用GLTFLoader.js加载模型，需要模型可以联系我2，汽车开关门效果实现，先获取汽车车门对应的模型对象，然后使用Tween.js实现车门旋转动画效果。3，汽车变色效果实现，获取车体模型对象，修改车体模型材质。4，汽车运动效果实现，获取汽车车轮模型对象，实时刷新更改汽车车轮旋转达
2022-06-17 15:57:45
5613
7
谷歌相机，全景相机，安卓谷歌相机安装包，通用版
2022-09-13
使用threejs渲染养殖场模型源码，养殖场模型obj+mtl格式，threejs模型，模型升级版
2021-12-03
使用threejs渲染养殖场模型源码，养殖场模型obj+mtl格式，threejs模型
2021-12-03
使用threejs渲染工厂模型源码
2021-08-27
postgresql-9.3.23-1-windows-x64.exe
2021-06-02
SpringBoot + SpringCloud 构建分布式、负载均衡系统，前后分离企业级快速开发脚手架——前端
2018-12-28
SpringBoot + SpringCloud 构建分布式、负载均衡系统，前后分离企业级快速开发脚手架
2018-12-28
TortoiseSVN-1.10.0.28176-x64-svn-1.10.0.msi
2018-08-09
用Axure制作APP原型（附元件库下载）
2018-01-08
Axure RP Pro 7.0中文破解版+Microsoft .NET Framework 4.0
2017-11-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人