- 博客(65)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 threejs——开发一款塔防游戏
theme: fancy前言完成效果gif 图较大，耐心等待，源码见文末 为了上班摸鱼合理的玩游戏，我写了一个3d塔防游戏，其中功能包含动画、敌人运动、放置武器、升级武器、销毁武器、动态检测等功能。请动动小手，点赞收藏，这就发车~目录结构思维导图具体功能和思路如下有了这个思维导图，就可以按部就班，一步一步的实现游戏功能技术栈types...
2024-04-10 09:20:54
1007
原创 如何计算地球任意两点之间距离
theme: jzmanjvideo相关源码和模型的下载链接地址点击链接进行跳转前言本文通过百度地图api实现一个地球地图模型，通过运用精确的Haversine公式和Vincenty公式，系统能够迅速计算出这两个坐标点之间的实际距离。文中力求使用专业的地理和数学的术语解释计算原理，如有失误，请指正，谢谢技术栈typescript百度地图apivite加载地图...
2024-03-25 19:59:01
603
原创 threejs——可跨越障碍的小车可操作演示
theme: jzman技术栈vitethreejsammojstypescriptjvideo前言此项目以vitejs作为基础框架，以typescript为编程语言，结合threejs3D渲染库和ammojs物理引擎工具开发，实现一个可以使用键盘操作汽车行驶，并可以跨越障碍物。下面我们一起来看一下吧源码相关源码和模型的下载链接地址点击链接进行跳转物理...
2024-03-18 13:20:54
295
原创 THREEJS——高科技感的魔法阵
theme: jzman我正在参加 #金石计划征文活动# ，希望各位点个赞，谢谢效果图绘制静态图在threejs的场景中使用line和Line2绘制出外围由线段组成的部分，外围虚线圆下面的代码是其中一条圆形虚线的代码，其中材质用到的是LineMaterial，属性包含color颜色、linewidth 宽度、dashed是否虚线、dashSize虚线尺寸、gapS...
2024-02-22 18:01:34
255
原创 THREE.JS——让你的logo切割出高级感
theme: jzman灵感图每次都根据灵感图写代码，我都快成灵感大王了，本文较长，跨度较大，效果较好，请耐心看完，本文阶段代码有tag可以分部查看前言这是B站的一段视频，用3D渲染的方式表达各个大厂的logo如何制作出来的，其中提取出一小段，用于本文的灵感，就是这个图的切割效果，下文不包含激光的圆圈和工作平台，只有切割的光线、切割效果和分离动画，灵感图中切割的部分是超过l...
2024-02-20 09:28:33
867
原创 threejs——多重场景渲染
前言摸鱼时发现了这threejs实现的效果，从效果图中可以看出来，在滚动页面的时候，模型在进入不同的场景，或者说进入不同的页面，渲染模式改变了，下面我们一步一步拆解出这种效果是怎么实现的，首先第一步，先找到一个合适的模型，我是直接下载的这个原地址的飞机模型，我们加入一些自己的思考和实践来实现出这个效果。希望大家能够跟着一起做，效果实现起来很简单，但是过程中遇到的小细节，还是需要好好把握一下...
2024-02-03 15:11:31
917
原创 将博客搬至CSDN
为了确认是您本人在申请搬家，请在原博客发表一 篇标题为《将博客搬至CSDN》的文章，并将文章地址填写在上方的"搬家通知地址"中。
2023-12-01 11:29:41
374
原创 threejs渲染高级感可视化涡轮模型
好久没写可视化方面的帖子了，最近在网上找灵感，发现一张图个人感觉不错，正好现有技术也可以实现个八九不离十，使用到的技术vite + typescript + threejs
2023-12-01 10:23:18
967
原创 threejs基础——判断物体遮挡方案
theme: v-greenhighlight: a11y-dark前言在之前的文章，也提过很多次物体遮挡的案例，当时用的都是以THREE.Ray射线检测为基础，通过摄像头到目标体创建一条射线，通过检测射线是否经过被判断物体，从而决定被判断物体是否隐藏其中这篇文章介绍的比较详细，感兴趣的同学可以看一看# threejs 打造 world.ipanda.com 同款3D首页 ...
2023-11-29 11:25:12
1016
原创 threejs开发可视化数字城市效果
theme: condensed-night-purple灵感图现在随着城市的发展，越来越多的智慧摄像头，都被互联网公司布到城市的各个角落，举一个例子，一个大楼上上下下都被布置了智能摄像头，用于监控火势，人员进出，工装工牌佩戴等监控，这时候为了美化项目，大公司都会将城市的区域作为对象，进行3d可视化交互，接下来的内容，就是基于以上元素，开发的一款城市数据可视化的demo，包含楼宇特...
2023-11-23 12:10:10
901
原创 刘谦又更新了——口袋魔术
每次在公司说：“我给大家变个魔术吧”，公司的小伙伴都回复：“刘谦又更新了？” 友情提示：很无聊的一篇文章(暂且称之为文章)刘谦：一(？)周一次，准时上课！魔术原理这个魔术的原理主要基于二进制数的特性和数学的排列组合规律。二进制中，每一位的数值，从右至左，分别代表2的0次方(也就是1)，2的1次方(也就是2)，2的2次方(也就是4)，以此类推。为了理解这个魔术的工作原理...
2023-10-08 10:19:21
24
原创 懒加载优化方案——IntersectionObserver
在加载图片列表时候，如果不做任何处理，浏览器会创建所有img标签并去加载每一张图片，当图片过大，或者过多的时候，页面将超级消耗资源，这时候，懒加载就起到了一个很重要的作用(如果有运维支持，当这篇文章不存在)，只展示用户看到的(屏幕内的)，所以官网提供了一个原生的APIIntersectionObserver接口； 从属于Intersection Observer API)提供了一种异步观...
2023-08-07 14:50:16
45
原创 大型蹦迪现场——可视化音频
请原谅使用了这么标题党的标题做标题，本文完全闲着没事时候干的，只是一些有趣的效果，可能对大部分同学的工作上来说没有任何帮助。使用window.AudioContext(音频模块)API开发一款可视化音频的效果，因为gif不能录制声音，所以大家凭想象脑补一下吧，背景音乐是《极乐净土》。gitee上会上传文件注册音频模块```typescriptlet AudioContext = ...
2023-06-20 16:37:18
25
原创 javascript基础之购物车主图放大镜功能
首先在淘宝上找一个宝贝链接，打开控制台，看一下淘宝上的放大镜功能的结构是怎样实现的不难看出来，主图区域功能最外面一层是div用来存放主要功能区的，position: relative;，主图并没有定位，只是一个img标签，滑块区域和放大图区域都是相对于外侧父元素定位，附图利用background-position来改变位置，其次主图和放大图下载下来后，尺寸属性是一样的，都是750 * 10...
2023-06-09 10:16:42
26
原创 写一个高德地图巡航功能的小DEMO
使用AMapLoader.load加载地图，从 控制台 申请一个属于自己的key```typescriptimport AMapLoader from '@amap/amap-jsapi-loader';...const AMap = await AMapLoader.load({ "key": "您自己申请的KEY"...
2023-06-08 14:31:13
36
原创 Javascript基础之有趣的文字效果
浏览网站时发现一个比较有趣的文字效果，实现起来也不是很复杂，所以尝试自己复刻一下，功能简单，但是在复刻的过程中，一点点调试参数，不断的切换思路，有的思路比较复杂，有的思路比较简单，甚至一个hover就能做一个差不多的效果，实现的结果很简单，但是过程很有趣。效果准备工作创建一个主文字图层，再创建几个copy的文字图层，使用text-shadow将文字描上黑色的边，给copy图层填充不...
2023-05-26 13:44:31
13
原创 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
12
原创 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
21
原创 three.js 打造游戏小场景（拾取武器、领取任务、刷怪）
theme: qklhk-chocolate预览场景创建底板创建创建底板时，需考虑底板的可扩展性，比如修改任意尺寸，所以在创建时，先定义几个基础数据typescriptlet len = 100const size = 1const y = size / 2len为底板的尺寸，宽度和高度，size为每一个障碍物的尺寸，y为障碍物体的高度位置，```typ...
2023-05-12 18:21:07
107
原创 threejs 打造 world.ipanda.com 同款3D首页
theme: jzman最近丫丫回国掀起一股熊猫热，本人也没闲着，在查资料时候无意间发现 熊猫世界 的3D首页，心一痒痒，就扒了一下数据，刚好有模型，那索性按照熊猫世界的首页复刻一下；本文没什么高的技术含量，完全觉得这个页面比较好看，所以大概做了做，涉及到的api有 光线投射Raycaster 、 CSS 2D渲染器(CSS2DRenderer)、 TextureLoader 等等...
2023-04-28 18:18:53
21
原创 three.js——物理引擎
剖析three.js案例中物理引擎Ammo.js的使用方法，其中包含运动、碰撞、检测、自由落体、碰撞器、冻结、自定义更新等功能，有大量代码通过链接方式转到gitee，可以根据代码对照使用主要剖析的是threejs中提供的ammo案例，相对于原本案例，本篇文章精简了一些代码，提取了一些方法，新增了一些可配置参数，并结合我上一篇文章three.js——镜头跟踪 做了一个小Demo。先看一下效...
2023-04-18 11:42:07
160
原创 three.js——镜头跟踪
本篇文章主要缝合了官网的几个案例，并无高深或复杂的逻辑和代码；镜头跟踪在游戏或者展馆等场景下非常常见，可以是第一人称，也可以是第三人称，本次带来的是第三人称的镜头跟踪方法模型与动画来源指针控制器下面会一一介绍效果如下 从gif图中可以得知效果为，鼠标移动控制人物旋转，按住W键，人物切换run即跑步状态，释放W键人物切换为idle即空闲状态，动画是glf模型编辑好的，...
2023-04-10 16:37:13
179
原创 复刻掘金健康生活的3D宣传图
很熟悉吧，经常逛掘金的童鞋们，一定见过这张图咯，今天我们就用前端技术还原出里面部分的3d模型的，首先我们分析一下里面的元素分析除了基础的场景，背景布，灯光，还有一些文字，贴图和各种材质，我们一步一步的做，一个一个元素的往里加布景背景布颜色使用吸管工具大致取一下，不过会受到灯光的影响``` js// 创建背景布function initGround () {...
2021-05-20 11:13:26
16
原创 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
21
原创 如果把π进行可视化，会碰撞出什么效果呢！
灵感来源于B站的一段视频π就是艺术，将3.1415926等数字按照以上一个点为中心进行的角度绘制，每一个数字计算出的点的位置加上上一个点位的坐标计算出最终绘制位置准备工作视频上应该是用视频软件制作的，作为一个前端，可以使用前端的技术实现canvas，js等，这里我用THREE.JS进行绘制，先创建一个场景``` html Document...
2021-03-16 15:58:09
18
原创 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
19
原创 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
20
原创 3D堆叠游戏——第四步 结束判定，记分器等
主题列表：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...
2020-12-31 18:18:12
11
原创 3D堆叠游戏——第三步 切割等功能
主题列表：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...
2020-12-31 14:40:14
15
原创 3D堆叠游戏——第二步 控制 控制主角移动以及停止
主题列表：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...
2020-12-30 15:26:01
11
原创 3D堆叠游戏——第一步 基础 初始化游戏
主题列表：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...
2020-12-30 13:00:21
9
原创 算法基础——异或运算符（^）的骚操作
主题列表：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...
2020-12-29 15:20:30
6
原创 一些three.js的基础——加载FBX模型
主题列表：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...
2020-12-28 16:12:35
76
原创 threejs 笔记 —— 高频使用工具整理
访问模型信息const THREE = require("three");export default class GetBox { public box: any constructor(box) { this.box = box; } // 返回box3 getBox() { let b = new THREE.Box3(); b.expand...
2020-04-30 14:07:15
33
原创 threejs 笔记 09 —— 玩一玩 ‘线’
Line直线var material = new THREE.LineBasicMaterial({ color: 0xff00ff, linewidth: 1, }); var points = []; points.push(new THREE.Vector3(50, 50, 0)); points.push(new THREE.Vector3(0, 50...
2020-04-28 22:20:38
20
原创 threejs 笔记 08 —— 面
通过顶点绘制面``` javascriptvar geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象//类型数组创建顶点位置position数据var vertices = new Float32Array([ 0, 0, 0, //顶点1坐标 50, 0, 0, //顶点2坐标 0, 100, 0, //顶点3坐标...
2020-04-28 20:17:10
10
原创 threejs 笔记 07 —— 线
通过网格模型创建线var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry// 线条渲染模式var material = new THREE.LineBasicMaterial({ color: 0xff0000, //线条颜色}); //材质对象// 创建线模型对象 构造函数：Lin...
2020-04-28 16:34:58
14
原创 threejs 笔记 06 —— 点
按网格模型顶点创建点提取顶点信息创建一个网格几何体并访问顶点信息var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个球体几何对象 console.log(geometry.vertices) // 创建一个点材质对象 // PointsMaterial // 点材质 var material = new THR...
2020-04-28 16:04:56
10
原创 threejs 笔记 05 —— 光源
环境光光源的基类为LightAmbientLight环境光会均匀的照亮场景中的所有物体。环境光不能用来投射阴影，因为它没有方向，也不会体现物体的棱角/** * 创建网格模型 */var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometryvar material = new THREE.Mes...
2020-04-28 14:13:55
10
原创 threejs 笔记 04 —— 网格材质对象
网格材质对象对于一个成熟的3D模型来说，只有框架是远远不够的，要想展示出绚丽的3d效果，材质是必不可少的要素之一，比如模型是否可以受光照的影响，决定模型是否透明等等。材质对象对比/** * 创建网格模型 */ var geometry = new THREE.SphereGeometry(35, 32, 32); // 球几何体 // var geometry = new...
2020-04-28 10:06:30
11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人