- 博客(78)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 threejs——没什么意义的大屏
本文是一次尝试性的创新，代码是作者写的，但是下面的文章内容是把代码扔给AI，让AI写的，作者整理的，感觉比作者之前的文章写的细致，但是有点太细了，不知各位看官是否习惯这样的文章，欢迎大家提意见。五万多个字呢，比以往所有的内容加起来都多
2024-12-13 12:17:08
1181
原创 threejs——无人机概念切割效果
主要技术采用着色器的切割渲染，和之前写的风车可视化的文章不同，这次的切割效果是在着色器的基础上实现的，并新增了很多可调节的变量，兄弟们，走曲儿~
2024-12-13 12:04:37
1475
原创 threejs——粒子瀑布运动
项目采用vite+threejs开发的一个粒子的瀑布运动效果，可在源码中将logo替换为自己的文件，内附演示地址和源码下载地址
2024-12-13 11:46:22
1021
原创 高德地图游戏解决方案——自定义围栏系统结合智能设备模拟躲猫猫游戏端
高德地图除了导航还能做什么？本文章灵感来源于最近看的某台综艺《城市捉迷藏》和《真人猫鼠游戏》，也是最近相当火的一个大型户外交友游戏，由上帝视角制定玩家可活动区域，玩家佩戴智能设备，进行藏匿和寻找的游戏，高德地图有一整套的智能围栏和智能设备的解决方案，由于是个人开发，并没有获得高德地图的智能硬件的体验功能，所以文中用自定义电子围栏和模拟智能硬件地理位置开发一个猫鼠游戏的demo。文中涉及到非常多的数学公式，不过大部分功能高德地图都有封装。
2024-10-30 09:31:49
1026
原创 高德地图游戏解决方案——结合threejs仿某猫捉猫猫得红包游戏
现如今数字化时代，商圈为吸引顾客和增加顾客黏性，能够让人顾客有更好的购物体验和参与感，移动端小游戏应运而生，而今天要介绍的项目就是通过虚实结合制作的小游戏，通过高德提供的地图，结合threejs写一个趣味小游戏，项目主要是通过用户操作手柄控制角色移动，领取任务和做任务，文中只介绍一条任务线，通过手柄控制角色去抓鸡，当然，你也可以做一个寻宝游戏，或者其他类型的游戏。访问体验地址时，浏览器调为手机模式，效果更佳游戏流程：领取任务–> 抓鸡 --> 完成任务。
2024-10-30 09:29:23
816
原创 高德地图+threejs打造智慧景区大屏
本项目是一个智慧景区（商场）项目，项目主旨在于对景区的智能化管理，是对AI赋能的具象化，告别传统后台管理模式，从大屏中可以实现一个完整景区（商场）的集中化管理，可以对景区内部设施，店铺、人流量和人物画像进行精准分析。也可以配合智能相机、智慧消防对景区（商场）内的人防安全进行远程管理，现在杭州的景区公共卫生间也都实现智能化，甚至你可以在游客端（模拟的，现在所有内容都在同一个大屏）看到距离你最近的卫生间还剩几个坑儿，景区智慧大屏只是一个载体，集成的智慧体越多，大屏的功能就越强大。本项目代码使用umi。
2024-10-30 09:28:09
1079
原创 threejs——从实战出发之智慧塔吊大屏
点击链接进行跳转原文链接随着物联网的火爆，和ai的快速崛起，传统行业在AI赋能的加持下，都在改头换面，拿工地举例，从工人进门开始就有智能打卡机，施工时佩戴的安全帽结合gps和其他传感器能够及时了解人员是否佩戴，在视频监控区域也可以通过ai算法检查工人是否佩戴安全帽；各种传感器安装到机械设备上，能够实时监控设备的数据，下面文章内容就是基于工地的塔吊设备衍生出的一个智慧大屏功能，先上效果图，
2024-10-30 09:25:52
744
原创 threejs——3d大屏完整版2w字超详细讲解
theme: fancyhighlight: atelier-seaside-light 你还在开发传统大屏？这难道不是前端的觉醒年代？本文使用threejs开发一款发电机拆解动画并通过交互展示零件详细信息数据交互的大屏开发，效果中规中矩，但是涵盖的知识点比较多，内容详细，也列举了众多开发中遇到的坑，内容比较长，手把手教大家写一个完整的大屏，包教包会，不收任何学费，收藏==学...
2024-06-17 22:07:32
1049
原创 threejs渲染高级感可视化风力发电车模型
theme: fancyhighlight: atelier-seaside-light本文使用threejs开发一款风力发电机物联可视化系统，包含着色器效果、动画、补间动画和开发过程中使用模型材质遇到的问题，内含大量gif效果图， 视频讲解及源码见文末技术栈three.js 0.165.0vite 4.3.2nodejs v18.19.0...
2024-06-14 13:59:39
1083
原创 threejs——车辆雷达智能识别效果
theme: fancyhighlight: atelier-seaside-light前言随着智能电车越来越火，3d车辆的官网效果也越来越盛行，趁着空档，写一个车辆雷达识别概念效果，话不多说，直接上源码 https://gitee.com/sunhuapeng/automotive-radar 请点赞关注加分享，上车出发灵感图效果图技术栈th...
2024-06-13 18:36:05
534
原创 threejs——商场楼宇室内导航系统
源码源码下载地址在线体验地址视频说明地址 西瓜视频jvideo技术栈webpack 4.39.2nodejs v10.9.0threejs 0.107.0前言本文通过一个简单的3d导航系统引申出一些关于threejs开发过程中遇到的问题，理论比较多，可能有些枯燥，每一个开发中需要注意的点，也有性能优化的小点，都会以标题的方式标注出来。希望能对你...
2024-05-24 18:12:14
1136
原创 优化Three.js性能：提升WebGL渲染效率
LOD技术废话当渲染顶点信息时，WebGL 将这些顶点信息发送到 GPU 中，并使用着色器程序来处理这些顶点信息并最终将它们渲染到屏幕上。在渲染过程中，GPU 对每个顶点执行各种操作，如变换、光照计算、纹理映射等，然后将结果输出到屏幕上。这就意味着，顶点信息越多对于GPU的压力越大，threejs官网提供# 多细节层次(LOD，Levels of Detail)用于优化这种情形，主要原理是...
2024-05-21 16:39:49
696
原创 canvas识别路线
theme: jzman视频说明jvideo前言效果一技术栈htmljavascriptcsscanvas 项目主要功能上传一张地图，或者迷宫地图，通过canvas的一系列操作，并指定一个起点和终点，并找到到达终点最近的路线迷宫找出口效果正文加载图像首先是加载图像，选择一张图，最好是底色是相同的 或者说底色的色差不是很大，你也...
2024-05-07 10:26:10
456
原创 threejs——开发一款塔防游戏
theme: fancy前言完成效果gif 图较大，耐心等待，源码见文末 为了上班摸鱼合理的玩游戏，我写了一个3d塔防游戏，其中功能包含动画、敌人运动、放置武器、升级武器、销毁武器、动态检测等功能。请动动小手，点赞收藏，这就发车~目录结构思维导图具体功能和思路如下有了这个思维导图，就可以按部就班，一步一步的实现游戏功能技术栈types...
2024-04-10 09:20:54
1124
原创 如何计算地球任意两点之间距离
theme: jzmanjvideo相关源码和模型的下载链接地址点击链接进行跳转前言本文通过百度地图api实现一个地球地图模型，通过运用精确的Haversine公式和Vincenty公式，系统能够迅速计算出这两个坐标点之间的实际距离。文中力求使用专业的地理和数学的术语解释计算原理，如有失误，请指正，谢谢技术栈typescript百度地图apivite加载地图...
2024-03-25 19:59:01
864
原创 threejs——可跨越障碍的小车可操作演示
theme: jzman技术栈vitethreejsammojstypescriptjvideo前言此项目以vitejs作为基础框架，以typescript为编程语言，结合threejs3D渲染库和ammojs物理引擎工具开发，实现一个可以使用键盘操作汽车行驶，并可以跨越障碍物。下面我们一起来看一下吧源码相关源码和模型的下载链接地址点击链接进行跳转物理...
2024-03-18 13:20:54
589
原创 THREEJS——高科技感的魔法阵
theme: jzman我正在参加 #金石计划征文活动# ，希望各位点个赞，谢谢效果图绘制静态图在threejs的场景中使用line和Line2绘制出外围由线段组成的部分，外围虚线圆下面的代码是其中一条圆形虚线的代码，其中材质用到的是LineMaterial，属性包含color颜色、linewidth 宽度、dashed是否虚线、dashSize虚线尺寸、gapS...
2024-02-22 18:01:34
536
原创 THREE.JS——让你的logo切割出高级感
theme: jzman灵感图每次都根据灵感图写代码，我都快成灵感大王了，本文较长，跨度较大，效果较好，请耐心看完，本文阶段代码有tag可以分部查看前言这是B站的一段视频，用3D渲染的方式表达各个大厂的logo如何制作出来的，其中提取出一小段，用于本文的灵感，就是这个图的切割效果，下文不包含激光的圆圈和工作平台，只有切割的光线、切割效果和分离动画，灵感图中切割的部分是超过l...
2024-02-20 09:28:33
1103
原创 threejs——多重场景渲染
前言摸鱼时发现了这threejs实现的效果，从效果图中可以看出来，在滚动页面的时候，模型在进入不同的场景，或者说进入不同的页面，渲染模式改变了，下面我们一步一步拆解出这种效果是怎么实现的，首先第一步，先找到一个合适的模型，我是直接下载的这个原地址的飞机模型，我们加入一些自己的思考和实践来实现出这个效果。希望大家能够跟着一起做，效果实现起来很简单，但是过程中遇到的小细节，还是需要好好把握一下...
2024-02-03 15:11:31
1339
原创 threejs渲染高级感可视化涡轮模型
好久没写可视化方面的帖子了，最近在网上找灵感，发现一张图个人感觉不错，正好现有技术也可以实现个八九不离十，使用到的技术vite + typescript + threejs
2023-12-01 10:23:18
1161
原创 threejs基础——判断物体遮挡方案
theme: v-greenhighlight: a11y-dark前言在之前的文章，也提过很多次物体遮挡的案例，当时用的都是以THREE.Ray射线检测为基础，通过摄像头到目标体创建一条射线，通过检测射线是否经过被判断物体，从而决定被判断物体是否隐藏其中这篇文章介绍的比较详细，感兴趣的同学可以看一看# threejs 打造 world.ipanda.com 同款3D首页 ...
2023-11-29 11:25:12
1439
原创 threejs开发可视化数字城市效果
theme: condensed-night-purple灵感图现在随着城市的发展，越来越多的智慧摄像头，都被互联网公司布到城市的各个角落，举一个例子，一个大楼上上下下都被布置了智能摄像头，用于监控火势，人员进出，工装工牌佩戴等监控，这时候为了美化项目，大公司都会将城市的区域作为对象，进行3d可视化交互，接下来的内容，就是基于以上元素，开发的一款城市数据可视化的demo，包含楼宇特...
2023-11-23 12:10:10
1250
原创 刘谦又更新了——口袋魔术
每次在公司说：“我给大家变个魔术吧”，公司的小伙伴都回复：“刘谦又更新了？” 友情提示：很无聊的一篇文章(暂且称之为文章)刘谦：一(？)周一次，准时上课！魔术原理这个魔术的原理主要基于二进制数的特性和数学的排列组合规律。二进制中，每一位的数值，从右至左，分别代表2的0次方(也就是1)，2的1次方(也就是2)，2的2次方(也就是4)，以此类推。为了理解这个魔术的工作原理...
2023-10-08 10:19:21
88
原创 懒加载优化方案——IntersectionObserver
在加载图片列表时候，如果不做任何处理，浏览器会创建所有img标签并去加载每一张图片，当图片过大，或者过多的时候，页面将超级消耗资源，这时候，懒加载就起到了一个很重要的作用(如果有运维支持，当这篇文章不存在)，只展示用户看到的(屏幕内的)，所以官网提供了一个原生的APIIntersectionObserver接口； 从属于Intersection Observer API)提供了一种异步观...
2023-08-07 14:50:16
258
原创 大型蹦迪现场——可视化音频
请原谅使用了这么标题党的标题做标题，本文完全闲着没事时候干的，只是一些有趣的效果，可能对大部分同学的工作上来说没有任何帮助。使用window.AudioContext(音频模块)API开发一款可视化音频的效果，因为gif不能录制声音，所以大家凭想象脑补一下吧，背景音乐是《极乐净土》。gitee上会上传文件注册音频模块```typescriptlet AudioContext = ...
2023-06-20 16:37:18
67
原创 javascript基础之购物车主图放大镜功能
首先在淘宝上找一个宝贝链接，打开控制台，看一下淘宝上的放大镜功能的结构是怎样实现的不难看出来，主图区域功能最外面一层是div用来存放主要功能区的，position: relative;，主图并没有定位，只是一个img标签，滑块区域和放大图区域都是相对于外侧父元素定位，附图利用background-position来改变位置，其次主图和放大图下载下来后，尺寸属性是一样的，都是750 * 10...
2023-06-09 10:16:42
73
原创 写一个高德地图巡航功能的小DEMO
使用AMapLoader.load加载地图，从 控制台 申请一个属于自己的key```typescriptimport AMapLoader from '@amap/amap-jsapi-loader';...const AMap = await AMapLoader.load({ "key": "您自己申请的KEY"...
2023-06-08 14:31:13
145
原创 Javascript基础之有趣的文字效果
浏览网站时发现一个比较有趣的文字效果，实现起来也不是很复杂，所以尝试自己复刻一下，功能简单，但是在复刻的过程中，一点点调试参数，不断的切换思路，有的思路比较复杂，有的思路比较简单，甚至一个hover就能做一个差不多的效果，实现的结果很简单，但是过程很有趣。效果准备工作创建一个主文字图层，再创建几个copy的文字图层，使用text-shadow将文字描上黑色的边，给copy图层填充不...
2023-05-26 13:44:31
213
原创 Javascript基础之写一个好玩的点击效果
theme: smartblue基础准备工写一个div，让它跟随鼠标移动而移动typescriptconst point = document.querySelector('#point') as HTMLDivElement;const mouseMove = (e: MouseEvent)=>{ const { clientX, clientY } = e ...
2023-05-25 16:28:29
64
原创 Javascript基础之鼠标拖拉拽
theme: condensed-night-purple拖拉拽基础2维向量类创建一个2维向量vector2，用来存放鼠标位置信息typescriptexport class Vector2 { x: number; y: number; constructor(x = 0, y = 0) { this.x = x; ...
2023-05-24 18:33:15
78
原创 three.js 打造游戏小场景（拾取武器、领取任务、刷怪）
theme: qklhk-chocolate预览场景创建底板创建创建底板时，需考虑底板的可扩展性，比如修改任意尺寸，所以在创建时，先定义几个基础数据typescriptlet len = 100const size = 1const y = size / 2len为底板的尺寸，宽度和高度，size为每一个障碍物的尺寸，y为障碍物体的高度位置，```typ...
2023-05-12 18:21:07
267
原创 threejs 打造 world.ipanda.com 同款3D首页
theme: jzman最近丫丫回国掀起一股熊猫热，本人也没闲着，在查资料时候无意间发现 熊猫世界 的3D首页，心一痒痒，就扒了一下数据，刚好有模型，那索性按照熊猫世界的首页复刻一下；本文没什么高的技术含量，完全觉得这个页面比较好看，所以大概做了做，涉及到的api有 光线投射Raycaster 、 CSS 2D渲染器(CSS2DRenderer)、 TextureLoader 等等...
2023-04-28 18:18:53
72
原创 three.js——物理引擎
剖析three.js案例中物理引擎Ammo.js的使用方法，其中包含运动、碰撞、检测、自由落体、碰撞器、冻结、自定义更新等功能，有大量代码通过链接方式转到gitee，可以根据代码对照使用主要剖析的是threejs中提供的ammo案例，相对于原本案例，本篇文章精简了一些代码，提取了一些方法，新增了一些可配置参数，并结合我上一篇文章three.js——镜头跟踪 做了一个小Demo。先看一下效...
2023-04-18 11:42:07
466
原创 three.js——镜头跟踪
本篇文章主要缝合了官网的几个案例，并无高深或复杂的逻辑和代码；镜头跟踪在游戏或者展馆等场景下非常常见，可以是第一人称，也可以是第三人称，本次带来的是第三人称的镜头跟踪方法模型与动画来源指针控制器下面会一一介绍效果如下 从gif图中可以得知效果为，鼠标移动控制人物旋转，按住W键，人物切换run即跑步状态，释放W键人物切换为idle即空闲状态，动画是glf模型编辑好的，...
2023-04-10 16:37:13
671
原创 复刻掘金健康生活的3D宣传图
很熟悉吧，经常逛掘金的童鞋们，一定见过这张图咯，今天我们就用前端技术还原出里面部分的3d模型的，首先我们分析一下里面的元素分析除了基础的场景，背景布，灯光，还有一些文字，贴图和各种材质，我们一步一步的做，一个一个元素的往里加布景背景布颜色使用吸管工具大致取一下，不过会受到灯光的影响``` js// 创建背景布function initGround () {...
2021-05-20 11:13:26
44
原创 Astar算法基础使用——寻路
技术栈htmljavascriptcssastar.js准备工作文件目录结构第一步先用js循环绘制出 10*10的方格javascript// 初始化地图let w = h = 40function createMap () { const mapDom = document.querySelector("#map") for (let i = ...
2021-05-18 15:44:00
74
原创 如果把π进行可视化，会碰撞出什么效果呢！
灵感来源于B站的一段视频π就是艺术，将3.1415926等数字按照以上一个点为中心进行的角度绘制，每一个数字计算出的点的位置加上上一个点位的坐标计算出最终绘制位置准备工作视频上应该是用视频软件制作的，作为一个前端，可以使用前端的技术实现canvas，js等，这里我用THREE.JS进行绘制，先创建一个场景``` html Document...
2021-03-16 15:58:09
48
原创 three.js物理学，物体自然下落
主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-cho...
2021-01-08 13:27:54
91
原创 THREE.js 实现迷宫游戏
主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green贡献主题：http...
2021-01-05 09:35:13
107
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人