![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs
文章平均质量分 63
左本Web3D
互联网软件开发工程师,专注Web3D使用ThreeJS实现Web3D效果技巧和学习案例。积跬步以至千里,致敬每个爱学习的你。
展开
-
在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果,以实现更加自然流畅的动画效果
在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果,以实现更加自然流畅的动画效果。通过上面的介绍,我们了解了如何实现Three.js中的人物行走效果,并探讨了如何优化这个效果。在实际开发中,我们需要根据具体的需求和场景选择合适的技术和优化方式,以实现更加高效、自然流畅的人物行走效果。原创 2023-03-29 22:10:51 · 2825 阅读 · 0 评论 -
Web3D工厂可视化,工厂三维可视化大屏,工厂模型展示,统计图表,人员定位,人车轨迹运动,电子围栏
随着物联网技术和WebGL技术的不断发展,工厂三维可视化大屏正在成为一个越来越受欢迎的解决方案。利用Three.js这一优秀的WebGL渲染引擎,可以帮助我们在Web端实现高质量的三维可视化效果,为工厂管理和生产优化提供重要的帮助。本文将介绍如何结合物联网技术和Three.js引擎,实现工厂三维可视化大屏,包括工厂模型展示、统计图表、人员定位和人车轨迹运动等功能,为读者带来一些有益的思路和启示。个人主页:我是左本Web3D,更多案例预览请点击==》在线案例。原创 2023-03-23 21:30:49 · 2912 阅读 · 3 评论 -
如何利用Web3D技术打造在线虚拟展览馆
在开始建立虚拟展览馆之前,我们需要确定目标和需求。例如,展览馆的规模和面积、展览的种类和数量、展览的交互方式和参与体验等等。同时,我们需要考虑展览馆的受众群体和目标市场,这将有助于我们制定出更加精准的策略。原创 2023-03-22 22:10:32 · 1723 阅读 · 0 评论 -
什么是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 · 3055 阅读 · 0 评论 -
分享四个前端Web3D动画库在Threejs中使用的动画库以及优缺点附地址
GSAP是一个功能强大的JavaScript动画库,它可以用于创建各种类型的动画效果,包括缓动、时间轴、滚动效果、SVG动画、CSS动画等等。:Anime.js是一个轻量级的JavaScript动画库,它可以用于创建复杂的动画效果,包括缓动、时间轴、颜色动画、路径动画等等。:Popmotion是一个强大的JavaScript动画库,它可以用于创建各种类型的动画效果,包括缓动、物理动画、路径动画等等。GSAP是一个功能强大的JavaScript动画库,支持多种类型的动画效果,可以创建各种复杂的动画效果。原创 2023-03-05 00:04:49 · 2164 阅读 · 0 评论 -
分享十个前端Web3D可视化框架附地址
它提供了一套强大的工具和API,可用于创建各种类型的高性能、交互式地理空间数据可视化,包括地图、图表、散点图、热力图、路径图、3D建筑等。它提供了一组简单易用的组件和API,包括物理引擎、碰撞检测、光照、材质、声音、特效等功能,可用于创建高品质的3D游戏和应用程序。它提供了丰富的地图和数据源,包括卫星图像、地形、天气、人口、交通等,可用于创建全球范围的可视化和交互式应用程序。Three.js:Three.js是一个流行的3D库,提供了大量的3D功能,包括基本几何形状、材质、灯光、动画、特效等。原创 2023-03-04 23:35:43 · 9458 阅读 · 1 评论 -
Web3D发展趋势以及Web3D应用场景
实时渲染技术是Web3D技术的核心。随着智能手机、平板电脑、电视等设备的普及,Web3D技术也需要为不同的设备和平台提供更好的支持和适配,使得用户可以随时随地体验到更加流畅和高质量的Web3D应用。随着硬件设备的进一步发展,VR和AR将成为更加主流的应用场景,而Web3D技术也将为其提供更好的支持。总之,Web3D技术具有广泛的应用前景和发展潜力,未来的发展趋势将是多元化和智能化的。Web3D技术的应用场景还在不断扩展和创新比如工业、医疗、军事等行业,可以预见的是Web3D技术在未来将会有更广泛的应用。原创 2023-03-04 16:40:18 · 2445 阅读 · 0 评论 -
Threejs减少锯齿几种方法
Threejs减少锯齿几种方法。这些方法可以帮助您减少Three.js中的锯齿,并创建更平滑的3D图形。但请注意,使用高质量的抗锯齿和纹理会增加渲染成本,因此请确保您的计算机或设备能够处理这些技术。原创 2023-03-04 16:24:20 · 4722 阅读 · 0 评论 -
什么是着色器/Threejs如何使用着色器/Threejs使用着色器实现平面网格的动态效果案例
什么是着色器/Threejs如何使用着色器使用着色器实现平面网格的动态效果案例。着色器(Shader)是计算机图形学中的一个重要概念,它是在 GPU 上运行的程序,用于计算三维场景中每个像素的颜色和其他属性。着色器通常分为两种类型:顶点着色器和片元着色器。顶点着色器主要用于对每个顶点进行操作,将其变换到最终渲染的位置,并将一些属性传递到片元着色器中。片元着色器主要用于对每个像素进行操作,计算像素的颜色值,并返回给渲染引擎。着色器可以帮助我们实现许多高级渲染效果,如阴影、光照、纹理、模糊、反射、折射等等。原创 2023-03-04 16:16:11 · 2574 阅读 · 0 评论 -
Threejs实现VR全景/模拟krpano异步加载/局部纹理刷新/图分层加载/瓦片加载
使用Threejs实现WebVR全景,模拟krpano异步加载、分层加载、瓦片加载、顺序加载,Threejs实现局部纹理刷新,Canvas纹理(CanvasTexture),从Canvas元素中创建纹理贴图。原创 2023-01-12 22:40:54 · 1820 阅读 · 3 评论 -
Threejs实现WebVR全景小行星入场动画/鱼眼效果/球形展开效果
使用Threejs实现WebVR全景,VR全景小行星入场动画、鱼眼效果、由远到近效果、球形展开动画效果。初始化场景和设置相机角度、位置。像机视锥体垂直视野角度fov,和相机的坐标位置。轨道控制器OrbitControls.js。实现动画效果,鼠标拖动查看使用。这种效果其实很简单,通过修改。原创 2023-01-10 23:24:53 · 2939 阅读 · 1 评论 -
Threejs实现鼠标点击人物行走/镜头跟随人物移动/鼠标点击动画/游戏第三人称/行走动作
Threejs获取鼠标点击位置、实现鼠标点击人物行走、人物头顶显示名称标签、镜头跟随人物移动并且镜头围绕人物旋转,类似游戏中第三人称、鼠标点击位置有动画效果,如下效果图。原创 2023-01-01 15:36:58 · 7079 阅读 · 13 评论 -
分享8个前端可以制作360度WebVr全景视图框架
介绍8个可以实现360度WebVr全景视图Javascript 库。原创 2022-10-19 23:38:12 · 5926 阅读 · 0 评论 -
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 · 3880 阅读 · 0 评论 -
手机拍摄全景图并且使用Threejs实现VR全景,超简单WebVR
VR全景效果实现有好几种方式,比如720云,四方环视...在这些平台上可以注册账号上传全景素材制作自己的全景作品,还有一些工具软件如krpano、utovr...,krpano工具软件门槛较高需要根据教程学习开发,也可以使用ThreeJs实现全景效果,本文将主要介绍如何使用ThreeJs进行VR全景开发。使用ThreeJs制作VR全景其实很简单,拍摄全景图和网页开发。原创 2022-09-13 18:37:22 · 4502 阅读 · 2 评论 -
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现模拟河流,水面水流,水管水流,海面原创 2022-06-28 17:40:26 · 9334 阅读 · 1 评论 -
Threejs专用天空盒素材,五种天空盒素材免费下载
使用Threejs开发web3D场景,模拟现实环境让场景更有真实感会用到天空盒。实际相当于创建了一个很大的立方体,并且将摄像机和场景中的物体都在这个立方体里面,这样看到的就是模拟的真实环境。我整理了几种天空盒素材,供大家下载使用。网上也有很多站点可以下载素材,不过大都是如下图的全景图片要使用这种图片,最简单的方法是使用转换工具将图片转换成分离的图片。下面两个网站就可以转换: Threejs专用天空盒素材,五种天空盒素材下载-Javascript文档类资源-CSDN文库https://download.csd原创 2022-06-23 18:40:46 · 6212 阅读 · 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 · 6149 阅读 · 8 评论 -
Threejs实现波动热点效果,波动标记,波动标签显示
Threejs实现波动热点效果,波动标记,波动标签显示,Tweenjs实现波动效果原创 2022-06-17 15:04:59 · 2620 阅读 · 1 评论 -
Threejs实现镜头跟随物体移动效果,镜头拐弯并保持运动方向
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:创建一个管道(管道的作用主要是方便观察运动方向),镜头跟随物体移动效果,物体上下左右拐弯镜头跟随拐弯。效果图如下:2,实现思路1,定义关键固定位置坐标,用固定坐标值生成一组曲线。2,将曲线分割成多份获取分割后的一组顶点坐标3,加载物体并设置初始位置,这里用的是个飞机模型4,通过Threejs的帧动画实时修改物体坐标和物体朝向,达到运动效果根据坐标生成曲线,并创建一个管道// 通过类C原创 2022-05-19 18:07:02 · 7338 阅读 · 2 评论 -
Threejs使用Shapes实现不规则几何体,自定义绘图
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:使用Shapes实现不同规则几何体。效果图如下:2,实现说明形状(Shape)使用路径以及可选的孔洞来定义一个二维形状平面。 它可以和ExtrudeGeometry、ShapeGeometry一起使用,获取点,或者获取三角面;Shape – three.js docs (threejs.org)参考文档three.js examples (threejs.org)在线案例......原创 2022-05-18 16:52:24 · 4252 阅读 · 3 评论 -
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕。效果图如下:2,主要说明1,使用FontLoader加载字体,显示3D文字2,使用Canvas作为纹理贴图,实现滚动字幕用FontLoader引入的字体,创建文字几何体并引用字体使用Facetype.js生成json字体入口用于Threejs的谷歌字体库地址入口function add3DFont() {原创 2022-05-16 11:00:04 · 4459 阅读 · 2 评论 -
Threejs实现机械臂运动,机械臂dae格式模型,模型下载
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:引入机械臂dae格式模型,模拟机械臂运动。效果图如下:2,动画主要说明1,引入机械臂模型,附模型下载地址如下2,使用Tween.js模拟实现动画// 添加坊的模型function initFang() { var loader = new THREE.ColladaLoader(); loader.load('assets/models/abb_irb52_7_120.dae', functio.原创 2022-05-10 10:38:56 · 2253 阅读 · 0 评论 -
Threejs实现开门关门动画
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:模拟开门关门动画。效果图如下:2,动画主要说明1,使用THREE.BoxGeometry创建几何体。2,引用纹理THREE.TextureLoader进行材质创建THREE.MeshPhongMaterial3,创建物体THREE.Mesh并引用几何体和材质4,设置物体绕Y轴旋转实现动画,这里需要注意的是物体旋转是以自身中心进行旋转的,所以这里需要把几何体THREE.BoxGeometry平移自身宽度.原创 2022-05-09 18:21:40 · 2203 阅读 · 5 评论 -
智慧养殖,三维可视化解决方案
1,方案介绍建设数字养殖牧场,推进畜禽圈舍通风温控、环境感知、设备监测等设备智能化改造,集成物联网设备,实现畜禽养殖环境智能监控和精准饲喂,畜禽疫病疫情精准诊断、预警、防控。推进畜牧产业信息化标准化。本方案通过3D可视化技术、场景建模技术,集成物联网设备继电器、耳标、传感器、摄像头,实现生产3D可视化的管理系统整体解决方案。效果图如下:2,建设目标(一)实现全养殖牧场三维虚拟仿真 对养殖场大楼、牛棚、牲畜、生产设备、车辆、监控设备、排气扇...原创 2022-05-07 00:00:16 · 4291 阅读 · 0 评论 -
Threejs使用LOD根据摄像机距离物体的距离显示不同的物体
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:多细节层次 —— 在显示网格时,根据摄像机距离物体的距离,来使用更多或者更少的几何体来对其进行显示。效果图如下:2,动画主要说明多细节层次(LOD,Levels of Detail)多细节层次 —— 在显示网格时,根据摄像机距离物体的距离,来使用更多或者更少的几何体来对其进行显示。每一个级别都和一个几何体相关联,且在渲染时,可以根据给定的距离,来在这些级别对应的几何体之间进行切换。 通常情况下,你会创建多原创 2022-04-28 17:17:37 · 2531 阅读 · 1 评论 -
Threejs实现卫星太阳板折叠动画,信号发射,姿态调整
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:创建卫星主体,模拟太阳板折叠动画,卫星姿态调整,模拟发射信号。效果图如下:2,动画主要说明1,太阳板折叠动画利用Tweenjs实现动画,太阳板旋转因为Three.js中默认旋转中心为物体自身的中心,所以旋转的时候在外层包裹一层对象,让外层旋转中心设置到想要旋转的位置上,再调整太阳板相对位置到正确的显示位置上。2,卫星主体主要是用THREE.CylinderGeometry对象创建一个圆柱体和一个雷达圆锥原创 2022-04-28 16:23:18 · 1216 阅读 · 0 评论 -
Threejs实现宇宙中地球动态展示和卫星绕地运动
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:宇宙星空背景,流星星星闪烁,地球自转,卫星绕地运动。实际效果还是很丝滑的,GIF效果图如下:2,主要说明1,宇宙背景利是用背景图片+粒子效果zai。2,流星是使用一张透明图片,随机一个位置进行固定方向移动。3,地球是用SphereGeometry创建球几何体并进行贴图,案例地球中设置了多层贴图,这样地球会表现比较立体。4,轨道是用RingGeometry创建一个圆环并设置显示角度。5,卫星是用精原创 2022-04-21 21:44:16 · 3802 阅读 · 3 评论 -
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:引用水厂模型进行展示,模拟水流效果,动态显示数据信息。效果图如下:2,主要说明1,加载模型,使用着色器添加颜色效果2,创建管道并添加纹理,这里不过多介绍具体可查看上一篇文章......原创 2022-03-29 22:36:45 · 7647 阅读 · 8 评论 -
Threejs实现模拟管道液体流动
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:模拟管道液体流动。效果图如下:2,主要说明模拟管道液体流动实现步骤:创建管道,添加纹理,位移纹理实现流动效果。如下函数:定义管道位置坐标,创建管道并赋予材质,并添加到场景中function initTubeModel() { var pointsArr = [ [42, 0, 10], [21, 0, 10], [21, 0, 1], [-3, 0, 1], [-3, 0, -原创 2022-03-29 21:53:22 · 6260 阅读 · 7 评论 -
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:实现相机视角切换,平滑过渡。效果图如下:2,主要说明相机视角切换主要使用tween.js库实现,这个库可以很容易实现两个值之间进行过度,中间值都会自动计算出来,例如下方函数创建了TWEEN.Tween对象,这个对象会在1000毫秒内从当前坐标变换到目标坐标,变化方式可以是线性,指数性或者其他方式,可参考Tween.js / graphs 可以通过easing()方法配置变化效果。// current1..原创 2022-03-13 17:07:41 · 14880 阅读 · 12 评论 -
Three.js模拟沿着路径进行运动,模拟飞机飞行,并保持运动方向
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:加载飞机模型,初始化任意轨迹线路,沿着轨迹进行运动并保持方向。效果图如下:2,主要说明曲线通过三维样条曲线曲线类THREE.CatmullRomCurve3创建,然后从样条曲线通过曲线的方法.getPoints()获取曲线上一系列的顶点坐标,得到顶点坐标就可以通过顶点坐标结合threejs帧动画来控制网格模型沿着曲线轨迹移动function motion() { // 通过类CatmullRomC原创 2022-03-03 19:27:37 · 3692 阅读 · 3 评论 -
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:引用模型进行展示,使用精灵Sprite作为标签,鼠标悬浮精灵上时变小手。效果图如下:2,主要说明使用精灵Sprite作为标签,SpriteMaterial作为材质,使用精灵作为标签,就需要把精灵对象插入到父对象中,作为子对会随着父对象的位置变化而跟着变化,代码如下:// 创建精灵函数,传入父对象function createLableSprite_jcy(group) { var spriteM原创 2022-02-14 15:10:27 · 8317 阅读 · 5 评论 -
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:引用养殖场模型进行展示,轨道控制器设置,模型沿着路线运动,使用OutlinePass给模型添加边框,自定义样式显示标签,点击模型获取信息。效果图如下:2,主要说明养殖场3D展示主要使用OBJLoader和MTLLoader加载模型并直接赋予材质进行展示场景中自定义样式显示标签,主要代码,参考Three.js模型标签 (yanhuangxueyuan.com)使用Outlin...原创 2021-12-26 22:12:27 · 7100 阅读 · 3 评论 -
Threejs物联网,养殖场3D可视化(二)
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:引用养殖场模型进行展示。效果图如下:2,主要说明养殖场3D展示主要使用OBJLoader和MTLLoader加载模型并直接赋予材质进行展示。引入模型代码如下:3,源码 var camera; var renderer; var mesh; function init() { // 创建一个场景,它将包含我们所有的元素,如物体,相机和灯光。 va...原创 2021-12-03 15:54:26 · 5586 阅读 · 1 评论 -
Threejs物联网,养殖场3D可视化(一)
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:引用养殖场模型进行展示。效果图如下:2,主要说明养殖场3D展示主要使用OBJLoader和MTLLoader加载模型并直接赋予材质进行展示。引入模型代码如下:3,源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Threejs物联网,养殖场3D...原创 2021-10-19 09:22:25 · 5101 阅读 · 7 评论 -
Threejs渲染obj+mtl模型源码,3D工厂模型
1,介绍Threejs实现引入工厂模型,加载obj+mtl,可用于学习研究,二次开发2,部分代码// 创建一个场景,它将包含我们所有的元素,如物体,相机和灯光。var scene = new THREE.Scene();var cubeLoader = new THREE.CubeTextureLoader();// 创建一个摄像机,它定义了我们正在看的地方camera = new THREE.PerspectiveCamera(45, window.innerWid.原创 2021-08-27 10:46:14 · 2247 阅读 · 1 评论 -
Threejs工厂模型3Dmax模型obj+mtl格式,源文件下载
1,介绍该模型可用于学习研究,二次开发、threejs3D开发效果图如下:2,下载模型源文件.max格式,obj+mtl格式,立即下载传送门使用threejs渲染工厂模型源码,立即下载传送门原创 2021-08-27 10:48:03 · 2773 阅读 · 1 评论 -
Threejs实现标签,自定义样式显示标签
1,介绍使用threejs实现标签显示,这里只介绍如何实现显示标签功能,其他可查看往期文章。效果图如下:2,主要说明实现标签使用CSS2DRenderer(2D渲染器)进行渲染。1,引入渲染器并初始化2,创建dom元素对象,添加显示的内容和样式3,把dom元素包装到CSS2DObject对象,并添加到场景中4,使用CSS2DRenderer进行渲染显示引入渲染器,并初始化<script type="text/javascript" sr......原创 2021-08-05 16:34:02 · 11219 阅读 · 28 评论 -
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:绘制地球和地理位置进行标注效果图如下:2,主要说明准备一张地图,创建一个球体并进行贴图,把地理位置经纬度转换成threejs的世界坐标,并进行标注。创建地球,部分代码如下:// 创建地球 半径100function createEarth() { var earthGeo = new THREE.SphereGeometry(radius, 50, 50); var earthMate....原创 2021-07-21 15:29:10 · 10247 阅读 · 3 评论