- 博客(55)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 three.js+blender 0~1智慧园区教学第一节
如有不明白的可以加wx: aichitudousien先看看视频效果three.js +blender 0~1智慧园区blender建模 , 会完全从基础开始建造园区模型，在学完后，相信你也可以独立完成建筑模型美术如何和程序开发配合，在业务中，我们的模型是需要根据业务需求去建模的，怎么分组，怎么命名，通过本门课程都可以学习到three.js完整开发流程（包含效果：相机飞行，文本渲染，模型渲染，后处理，楼层动画等各种特效），针对在。
2023-05-09 14:40:26
1676
1
原创 three.js车辆可视化教程-完整0到1
如有不明白的可以加QQ：2354528292；更多教学视频请访问：https://space.bilibili.com/236087412详细教学请到上方视频链接访问，总共3个多小时的教学~Three.js车展系统。
2023-04-25 12:46:54
1045
原创 three.js地图可视化项目-广州模型
如有不明白的可以加QQ：2354528292；更多教学视频请访问：https://space.bilibili.com/236087412详细教学请到上方视频链接访问，总共3个多小时的教学~three.js地图可视化项目-广州模型。
2023-04-25 12:45:00
913
原创 Three.js实战项目-智慧楼宇
如有不明白的可以加QQ：2781128388先看看视频效果Three.js 建筑可视化监控分别具备楼层展示，楼层热力度分析，扩散波特效，无人机飞行，飞行路径点规划，扩散波特效，多场景下钻，多文本渲染，路径动画。
2022-11-12 17:46:36
4446
原创 oculus设备VR漫游
oculus设备VR漫游概述概述使用oculus设备开发一个漫游demo，具备在头显中使用遥感控制方向，左手控制器具备传送跳跃功能，导航网格的制作
2021-11-20 12:50:44
2423
原创 aframe + oculus 开发全景编辑器
aframe + oculus 开发全景编辑器概述概述使用aframe开发的全景编辑器，头显使用的是oculus，可以完美支持PC端和VR模式VR模式视频 aframe+oculus 实现VR全景播放器 PC端模式视频 aframe+oculus 实现VR全景播放器
2021-11-14 18:47:38
435
原创 THREE.js + 语音识别控制
THREE.js + 语音识别控制概述概述使用aframe加载模型，然后使用语音识别功能对模型进行控制，模型可做起跳，奔跑等动作，详细请看视频：
2021-11-06 15:18:45
1668
原创 AR室内导航-Three.js
AR室内导航-Three.js概述初始化室内地图创建楼层控件导航使用Three.js 生成AR模块原理初始化Three概述这一次的AR室内导航是使用蜂鸟云地图加上three.js做的，具备室内楼层切换，2D/3D模型切换，指北针控件，AR开启/关闭。模拟室内导航的功能，先来看看视频效果 AR室内导航 初始化室内地图初始化蜂鸟云室内地图很简单，使用的也是蜂鸟云自带的地图数据vue文
2021-10-31 13:14:33
9084
5
原创 AR人脸识别 Three.js + tensorflow.js（一）
AR人脸识别 Three.js + tensorflow.js（一）概述tensorflow.js介绍项目搭建初始化摄像头初始化three.js概述这一期来使用Three.js和tensorflow.js来完成一个AR人脸识别的项目，主要使用的前端框架为Vue，项目中主要的功能点有可以实现人脸替换，在摄像头检测检测到人脸后会将人脸替换成一个预先准备好的人脸模型，然后我们人脸移动和变化的时候模型会跟随移动和变化，在模型上我们可以画线，画logo, 可以自由作图，然后还具备返回上一步和删除的功能先来看一下
2021-10-30 12:39:53
5031
3
原创 Three.js实战项目 烘培-云上城市
Three.js 烘培-云上城市概述创建场景创建天空创建水面创建模型开启模型动画栅栏动画概述开发了一个Three.js 使用烘培模型的demo，先看视频效果，整体的效果有水面，太阳，倒影，模型动画，围栏特效，相机动画 three.js 云上城市 创建场景创建渲染器，灯光，相机，控制器和以前的智慧城市项目一样，从那边照抄过来即可，调用方式如下 app = new ZThree(
2021-10-12 22:28:26
2448
1
原创 web开发技巧-SSE
概述严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。SSE对比WebSocket的优点SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。SSE 属
2021-08-31 14:28:34
388
原创 three.js 如何使用webworker
概述主要介绍如何在three.js中使用webworker，主要以两个案例说明，一个使用worker一个不使用worker他们的性能有什么有什么区别，首先我们先创建1000个mesh，然后每隔一秒随机改变mesh的位置。不使用worker const geometry = new THREE.BoxGeometry( 1, 1, 1 ); const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); const c
2021-08-29 14:06:35
1882
原创 web开发技巧-Worker
Worker基本概念基本概念Worker 接口是 Web Workers API 的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker ，只须调用 Worker(URL) 构造函数，函数参数 URL 为指定的脚本。Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建者同源（注意：Blink暂时不支持嵌套 Worker）。1.程序：指可以被CPU执行代码，程序储存在磁盘上2.进程：将程序调用内存中并且分配指定空间，在内存
2021-08-28 17:38:49
224
原创 web开发技巧-同域名下跨界面通信-storage事件
web高级开发技巧-同域名下跨界面通信-storage事件假设这么一个场景，同域名下的两个界面，A界面在修改了部分值后需要B界面进行同步更新，此时就可以用到storage事件。A界面代码： <input type="text" name="" id="input"> <script> document.getElementById('input').onblur = function () { localStorage.setItem('input',
2021-08-21 13:53:30
288
原创 three.js 创建文本的几种方式
three.js 创建文本的几种方式概述精灵贴图文本平面贴图文本CSS2DRendererCSS3DRenderer总结概述这篇文字总结了常用的创建文本的几种方式。首先写一个html.text { width: 128px; height: 128px; font-size: 16px; text-align: center; color: #ffffff; background: #ff0000; } <di
2021-06-13 14:16:48
2029
4
原创 three.js canvas做为纹理贴图需要注意的点
canvas做为纹理贴图需要注意的点概述代码概述在使用three.js开发的过程中，我们常常使用canvas来作为纹理贴图。但最后的效果总会被压缩或者模糊，这是由于什么原因造成的呢，这篇文章我们就来实际测试一下代码首先我们先创建一个canvas,宽高为1024，512 let canvas = document.createElement("canvas"); canvas.width = 1024; canvas.height = 512; let c = canva
2021-06-13 13:02:59
1942
原创 three.js 关于obj模型加载后坐标全部为（0， 0， 0）的解决方案
three.js 实战 关于obj模型加载后坐标全部为（0， 0， 0）的解决方案概述测试obj模型测试gltf模型概述相信大家在加载obj模型的时候都遇到过这种类似的问题。本来我的模型的坐标是不在原点(0, 0, 0)的，为什么在控制台中打印出来的模型坐标都是(0, 0, 0)呢，针对这个问题我做了测试，给出了具体的解决方案和问题点。测试obj模型第一步我们首先在three的编辑器中加载一个box，然后朝X轴方向移动4像素。此时我们的物体坐标为(4, 0, 0)，然后我们将模型给导出成obj格式。
2021-06-12 15:12:56
3808
6
原创 Three.js实战项目 图片处理系统
Three.js 图片处理系统概述灰度图更改rgba单色效果概述写一个Three.js 图片处理系统，图片全使用shader处理，先看视频效果 图片处理 周末补充代码，最近忙~~~灰度图更改rgba单色效果...
2021-04-19 21:29:56
792
原创 Three.js实战项目 模型拆解项目
Three.js 模型拆解项目概述初始化场景，相机，灯光，天空盒拆解模型原理拆解模型合并模型模型文本鼠标移动时更新文本概述写一个Three.js 模型拆解项目，先看视频效果 three.js 模型拆解项目 初始化场景，相机，灯光，天空盒此部分代码可在博客中的智慧城市项目中搜索到，就不在重复粘贴了，都是一样的，天空盒的素材是在three的demo素材里面，随便用一个就好了，这个无关紧
2021-04-11 14:19:30
6071
6
原创 three.js特效
three.js特效道路流光扩散波模拟模型加载动画楼层加载动画扫光模拟护盾模拟上升光带模拟线框模型热力特效箭头uv动画菲涅尔反射建筑物流光纹理流动水系雷达雨夜天空道路流光扩散波模拟模型加载动画楼层加载动画扫光模拟护盾模拟上升光带模拟线框模型热力特效箭头uv动画菲涅尔反射建筑物流光纹理流动水系雷达雨夜天空...
2021-03-14 14:00:10
3585
2
原创 Three.js实战项目 商场漫游
Three.js 商场漫游demo概述创建场景创建天空创建水面创建模型室内漫游概述开发了一个Three.js 商场漫游demo，先看视频效果创建场景创建渲染器，灯光，相机，控制器和以前的智慧城市项目一样，从那边照抄过来即可，调用方式如下 app = new ZThree("screen"); app.initThree(); // app.initHelper(); app.initOrbitControls(); light = app.ini
2021-03-14 13:35:24
5124
4
原创 高德地图+echarts 大屏项目
高德地图+echarts 马拉松大屏项目概述概述开发了一个高德地图视角实时更新的项目demo，先看视频效果代码后续在补上来，最近忙~
2021-03-08 10:18:09
3878
3
原创 maptalks+three实战项目 智慧城市项目
maptalks+three 智慧城市项目概述搭建开发环境搭建maptalks+three场景创建灯光加载建筑模型加载流光道路加载水系加载大厦模型加载飞行线条创建圆锥体创建文本概述经过上一次使用three.js做了个demo，这次使用maptalks+three+vue来继续开发一个demo玩玩先看视频效果：搭建开发环境使用的开发框架是vue-cli3.0, webgl使用three.js，地图使用maptalks，开发工具为vscode搭建完成后的目录为搭建maptalks+three场景
2021-03-06 13:19:12
9192
6
原创 shader 画圆，椭圆
shader 画圆，椭圆概述概述记录一下如何使用shader来画圆let shader = { vs: ` varying vec2 v_uv; void main() { v_uv = uv; gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 ); } `, fs: ` varyi
2021-01-31 12:52:29
1121
原创 mix混入函数
mix混入函数概述概述记录一下使用mix函数的过程，公式为：mix(x, y, a): x, y的线性混叠， x(1-a) + y*a; a为0 结果为x, a为1 结果为y先看代码let shader = { vs: ` varying vec2 v_uv; void main() { v_uv = uv; gl_Position = projectionMatrix * viewMatrix * modelMatrix * ve
2021-01-30 15:17:31
4726
原创 使用shader画直线，正弦波，余弦波
使用shader画直线，正弦波，余弦波概述绘制直线绘制正弦波概述学习一下如何使用shader画直线，正弦波，余弦波，先上代码绘制直线let shader = { vs: ` varying vec2 v_uv; void main() { v_uv = uv; gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
2021-01-30 15:14:15
1457
原创 关于gl_FragCoord的理解
关于gl_FragCoord的理解概述概述记录一下在使用gl_FragCoord的一些知识点先上shader来看效果let shader = { vs: ` void main() { gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 ); } `, fs: ` // 屏幕尺寸 uniform vec2
2021-01-30 13:52:07
2686
原创 向量点乘
向量点乘概述概述使用three.js画两条线，通过点乘来计算夹角画两条线段 let v1 = new THREE.Vector3(0, 0, 0); let v2 = new THREE.Vector3(10, 2, 0); let v3 = new THREE.Vector3(0, 10, 0); let geometry1 = new THREE.Geometry(); geometry1.vertices.push(v1, v2); let material1 = n
2021-01-26 15:51:12
557
原创 Three.js项目 智慧城市(四)
概述我们接着上一篇文章接着向下做，此时我们已经成功创建了场景，加载模型和天空盒，车流，现在我们来创建一些文本创建文本想要创建文本，我这边使用得方案是canvas贴图，当然使用css3DRender这些都可以首先我们先创建html<div class="sprite-canvas"> <span class="sprite-layer">${name}</span></div><style lang="less">.sp
2021-01-19 14:46:27
6284
4
原创 Three.js实战项目 智慧城市(三)
概述我们接着上一篇文章接着向下做，此时我们已经成功创建了场景，加载模型和天空盒，现在我们来创建车流创建车流的驾驶路线想要创建车流的驾驶路线，首先我们肯定是获取生成路线的点，那这个点怎么生成呢，在实际的开发中这些数据都由建模师来提供就好了，现在我们没有建模师怎么办呢，我们可以通过射线点击来获取模型上的具体坐标点首先我们在ZThree中创建射线的方法initRaycaster() { this.raycaster = new THREE.Raycaster(); // 绑定点击事
2021-01-19 14:45:48
8034
1
原创 Three.js实战项目 智慧城市(一)
在网上苦苦找寻很久都很难找到一篇详细讲解使用Three.js开发智慧城市的文章，为此专门做一个智慧城市得项目，先来看看效果智慧城市项目录制视频科技风版本：智慧城市二期视频。
2021-01-19 14:45:07
15989
4
原创 Three.js实战项目 智慧城市(二)
概述我们接着上一篇文章接着向下做，此时我们已经成功创建了场景，现在我们来加载模型和天空盒加载模型在ZThree类中加入loaderObjModel方法用来加载模型// 加载obj模型 loaderObjModel(path, objName, mtlName) { return new Promise(resolve => { new MTLLoader() .setPath(path) .load(mtlName + '.mtl',
2021-01-19 14:44:51
10196
4
原创 Three特效-扩散波
Three特效-扩散波概述代码完整代码概述使用Three.js来创建智慧城市场景中的扩散波动画，主要原理是使用控制mesh的缩放，效果图：贴图素材：代码创建圆柱几何体CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Floa
2021-01-09 14:47:03
4312
2
原创 Three特效-道路流光特效
Three特效-道路流光特效概述代码完整代码概述使用Three.js来创建智慧城市场景中的道路流光动画，效果图：代码创建道路顶点数组// 创建顶点数组 let points = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(10, 0, 0), new THREE.Vector3(10, 0, 10), new THREE.Vector3(0, 0, 10) ]使用CatmullRomCurve3生成曲线
2021-01-09 14:16:51
13770
14
原创 Three.js 多细节层次
Three.js 多细节层次概述代码概述多细节层次 —— 在显示网格时，根据摄像机距离物体的距离，来使用更多或者更少的几何体来对其进行显示。每一个级别都和一个几何体相关联，且在渲染时，可以根据给定的距离，来在这些级别对应的几何体之间进行切换。 通常情况下，你会创建多个几何体，比如说三个，一个距离很远（低细节），一个距离适中（中等细节），还有一个距离非常近（高质量）。代码在改变相机的位置时加载的mesh会对应改变var lod = new THREE.LOD(); var materia
2021-01-08 14:42:09
1953
1
原创 Three 解决加载模型闪烁
Three 解决加载模型闪烁概述解决方法概述在一次使用 three加载模型中遇到模型闪烁严重的问题，相机拉得越远模型闪烁越厉害，出现此问题的原因是因为出现了深度问题，以下记录解决办法解决方法WebGLRenderer开启logarithmicDepthBufferlogarithmicDepthBuffer 的定义：logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用。 默认是false。renderer.logarit
2021-01-08 14:21:09
4489
2
原创 Echarts 自适应报表
Echarts 自适应报表概述代码完整代码概述在单个echarts报表实例中使用resize来进行自适应，多个报表就不能这么使用了。代码$_resizeHandler() { return debounce(() => { if (this.chart) { this.chart.resize() } }, 100)() }完整代码此代码直接使用mixin混入即可，封装了报表自适应和报表销毁功能，在每一个
2021-01-07 09:34:53
1479
原创 Echarts 如何防止内存泄漏
Echarts 如何防止内存泄漏概述代码概述在使用Echarts时是很容易产生内存泄漏的，产生内存泄漏的原因是实例化echarts报表后在销毁组件前没有对echarts的实例进行删除。代码// 此段代码建议写在mixin中，在使用echarts时调用即可beforeDestroy() { if (!this.chart) { return } // 在组件销毁前调用dispose函数销毁报表 this.chart.dispose() this
2021-01-07 09:25:19
3811
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人