Three
文章平均质量分 64
爱吃土豆丝嗯z
主要发布一些可视化方面的文章~
展开
-
Three.js实战项目-智慧楼宇
如有不明白的可以加QQ:2781128388先看看视频效果Three.js 建筑可视化监控分别具备楼层展示,楼层热力度分析,扩散波特效,无人机飞行,飞行路径点规划,扩散波特效,多场景下钻,多文本渲染,路径动画。原创 2022-11-12 17:46:36 · 4936 阅读 · 0 评论 -
oculus设备VR漫游
oculus设备VR漫游概述概述使用oculus设备开发一个漫游demo,具备在头显中使用遥感控制方向,左手控制器具备传送跳跃功能,导航网格的制作原创 2021-11-20 12:50:44 · 2561 阅读 · 0 评论 -
aframe + oculus 开发全景编辑器
aframe + oculus 开发全景编辑器概述概述使用aframe开发的全景编辑器,头显使用的是oculus,可以完美支持PC端和VR模式VR模式视频 aframe+oculus 实现VR全景播放器 PC端模式视频 aframe+oculus 实现VR全景播放器原创 2021-11-14 18:47:38 · 504 阅读 · 0 评论 -
THREE.js + 语音识别控制
THREE.js + 语音识别控制概述概述使用aframe加载模型,然后使用语音识别功能对模型进行控制,模型可做起跳,奔跑等动作,详细请看视频:原创 2021-11-06 15:18:45 · 1818 阅读 · 0 评论 -
AR室内导航-Three.js
AR室内导航-Three.js概述初始化室内地图创建楼层控件导航使用Three.js 生成AR模块原理初始化Three概述这一次的AR室内导航是使用蜂鸟云地图加上three.js做的,具备室内楼层切换,2D/3D模型切换,指北针控件,AR开启/关闭。模拟室内导航的功能,先来看看视频效果 AR室内导航 初始化室内地图初始化蜂鸟云室内地图很简单,使用的也是蜂鸟云自带的地图数据vue文原创 2021-10-31 13:14:33 · 10357 阅读 · 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 · 5352 阅读 · 3 评论 -
Three.js 拓扑图
Three.js 拓扑图概述概述这篇文章主要介绍一下如何使用three.js 制作拓扑图 拓扑图原创 2021-10-18 14:18:10 · 4925 阅读 · 12 评论 -
Three.js实战项目 烘培-云上城市
Three.js 烘培-云上城市概述创建场景创建天空创建水面创建模型开启模型动画栅栏动画概述开发了一个Three.js 使用烘培模型的demo,先看视频效果,整体的效果有水面,太阳,倒影,模型动画,围栏特效,相机动画 three.js 云上城市 创建场景创建渲染器,灯光,相机,控制器和以前的智慧城市项目一样,从那边照抄过来即可,调用方式如下 app = new ZThree(原创 2021-10-12 22:28:26 · 2602 阅读 · 1 评论 -
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 · 2092 阅读 · 0 评论 -
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 · 2258 阅读 · 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 · 2142 阅读 · 0 评论 -
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 · 4211 阅读 · 6 评论 -
three.js 楼层加载动画
three.js 楼层加载动画原创 2021-05-23 14:51:05 · 2671 阅读 · 4 评论 -
Three.js实战项目 图片处理系统
Three.js 图片处理系统概述灰度图更改rgba单色效果概述写一个Three.js 图片处理系统,图片全使用shader处理,先看视频效果 图片处理 周末补充代码,最近忙~~~灰度图更改rgba单色效果...原创 2021-04-19 21:29:56 · 850 阅读 · 0 评论 -
Three.js实战项目 模型拆解项目
Three.js 模型拆解项目概述初始化场景,相机,灯光,天空盒拆解模型原理拆解模型合并模型模型文本鼠标移动时更新文本概述写一个Three.js 模型拆解项目,先看视频效果 three.js 模型拆解项目 初始化场景,相机,灯光,天空盒此部分代码可在博客中的智慧城市项目中搜索到,就不在重复粘贴了,都是一样的,天空盒的素材是在three的demo素材里面,随便用一个就好了,这个无关紧原创 2021-04-11 14:19:30 · 6799 阅读 · 6 评论 -
three.js特效
three.js特效道路流光扩散波模拟模型加载动画楼层加载动画扫光模拟护盾模拟上升光带模拟线框模型热力特效箭头uv动画菲涅尔反射建筑物流光纹理流动水系雷达雨夜天空道路流光扩散波模拟模型加载动画楼层加载动画扫光模拟护盾模拟上升光带模拟线框模型热力特效箭头uv动画菲涅尔反射建筑物流光纹理流动水系雷达雨夜天空...原创 2021-03-14 14:00:10 · 3943 阅读 · 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 · 5329 阅读 · 4 评论 -
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 · 9717 阅读 · 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 · 1202 阅读 · 0 评论 -
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 · 5014 阅读 · 0 评论 -
使用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 · 1539 阅读 · 0 评论 -
关于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 · 2797 阅读 · 0 评论 -
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 · 6595 阅读 · 4 评论 -
Three.js实战项目 智慧城市(三)
概述我们接着上一篇文章接着向下做,此时我们已经成功创建了场景,加载模型和天空盒,现在我们来创建车流创建车流的驾驶路线想要创建车流的驾驶路线,首先我们肯定是获取生成路线的点,那这个点怎么生成呢,在实际的开发中这些数据都由建模师来提供就好了,现在我们没有建模师怎么办呢,我们可以通过射线点击来获取模型上的具体坐标点首先我们在ZThree中创建射线的方法initRaycaster() { this.raycaster = new THREE.Raycaster(); // 绑定点击事原创 2021-01-19 14:45:48 · 8418 阅读 · 1 评论 -
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 · 10673 阅读 · 4 评论 -
Three.js实战项目 智慧城市(一)
在网上苦苦找寻很久都很难找到一篇详细讲解使用Three.js开发智慧城市的文章,为此专门做一个智慧城市得项目,先来看看效果智慧城市项目录制视频科技风版本:智慧城市二期视频。原创 2021-01-19 14:45:07 · 16967 阅读 · 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 · 4538 阅读 · 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 · 14446 阅读 · 14 评论 -
Three.js 多细节层次
Three.js 多细节层次概述代码概述多细节层次 —— 在显示网格时,根据摄像机距离物体的距离,来使用更多或者更少的几何体来对其进行显示。每一个级别都和一个几何体相关联,且在渲染时,可以根据给定的距离,来在这些级别对应的几何体之间进行切换。 通常情况下,你会创建多个几何体,比如说三个,一个距离很远(低细节),一个距离适中(中等细节),还有一个距离非常近(高质量)。代码在改变相机的位置时加载的mesh会对应改变var lod = new THREE.LOD(); var materia原创 2021-01-08 14:42:09 · 1991 阅读 · 1 评论 -
Three 解决加载模型闪烁
Three 解决加载模型闪烁概述解决方法概述在一次使用 three加载模型中遇到模型闪烁严重的问题,相机拉得越远模型闪烁越厉害,出现此问题的原因是因为出现了深度问题,以下记录解决办法解决方法WebGLRenderer开启logarithmicDepthBufferlogarithmicDepthBuffer 的定义:logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异,就有必要使用。 默认是false。renderer.logarit原创 2021-01-08 14:21:09 · 4754 阅读 · 2 评论 -
Three.js camera中的position,lookAt,up三个属性的理解
Three.js camera中的position,lookAt,up三个属性的理解概述步骤概述主要针对相机中的position,lookAt,up三个属性来谈谈自己的理解。position: 相机位置,默认为(0,0,0)lookAt:相机焦点方向,默认为Z轴负半轴方向, 大白话就是相机看向哪一个点up:相机朝向,默认(0,1,0),可以理解为那一根坐标轴向上步骤引入透视相机,角度设置为45°, 引入辅助坐标轴 let camera = new THREE.PerspectiveCam原创 2020-12-15 11:23:31 · 8666 阅读 · 4 评论 -
Three.js 自定义创建点,线,面,Geometry,法线,UV坐标,顶点颜色
Three.js 自定义创建点,线,面,Geometry概述顶点使用顶点来创建面面使用顶点颜色渲染面使用面颜色渲染概述此章将介绍如何自定义创建点,线,面,Geometry,法线,UV坐标,顶点颜色。任何一个模型都是由一个一个顶点来组成的,然后由顶点来组成线和面来生成的,在Three.js中,我们使用new THREE.Vector3()来创建一个顶点。顶点现在我们来创建4个顶点,顶点坐标分别为(0, 0, 0),(10, 0, 0), (0, 0, 10), (10, 0, 10) le原创 2020-12-13 17:31:44 · 5734 阅读 · 0 评论 -
Three.js 定义材质
Three.js 每一个面单独定义材质概述步骤概述Three.js中Mesh()的第二个参数material可以是一个数组,所以我们就能给网格模型定义多个材质,效果:我们可以在效果图中看到,这个box网格模型总共使用了三种材质,分别为颜色贴图的基础网格材质,黄色的基础网格材质,红色的基础网格材质步骤创建多个材质let loader = new THREE.TextureLoader();let texture = loader.load('ground.jpg')let materia原创 2020-12-13 13:35:21 · 1852 阅读 · 0 评论 -
Three.js 后期处理-物体边界线条高亮处理-OutlinePass
Three.js 后期处理-物体边界线条高亮处理-OutlinePass概述步骤概述本文介绍如何使用three.js的后期处理来制作物体边界线条高亮处理,先来看效果图步骤添加相应的后期处理js,对应的js在three的github中全部可以获取到<!-- 后期处理js --><!-- EffectComposer(效果组合器)对象 --><script src="js/postprocessing/EffectComposer.js"></scr原创 2020-12-11 11:19:52 · 8646 阅读 · 10 评论 -
Three.js 后期处理-通过黑点贴到图片上的效果-DotScreenPass-相机分层渲染
Three.js 后期处理-通过黑点贴到图片上的效果-DotScreenPass-相机分层渲染概述步骤概述本文介绍如何使用three.js的后期处理来制作通过黑点贴到图片上的效果,先来看效果图注意:**camera的默认layers层次为0此处有三个大坑renderer.autoClear = false 此代码一定要加上,必不可少通道渲染顺序必须在renderer渲染之前执行 ,在执行之前清除颜色、深度和或模板缓存renderer.clear,然后将相机层级设置为1, 使用通道进行渲染原创 2020-12-11 10:27:50 · 1896 阅读 · 0 评论 -
Three.js 后期处理-通过扫描线和失真模拟电视屏幕-FilmPass-相机分层渲染
Three.js 后期处理-通过扫描线和失真模拟电视屏幕-FilmPass-相机分层渲染概述步骤概述本文介绍如何使用three.js的后期处理来制作通过扫描线和失真模拟电视屏幕,先来看效果图注意:**camera的默认layers层次为0此处有三个大坑renderer.autoClear = false 此代码一定要加上,必不可少通道渲染顺序必须在renderer渲染之前执行 ,在执行之前清除颜色、深度和或模板缓存renderer.clear,然后将相机层级设置为1, 使用通道进行渲染清原创 2020-12-11 10:19:23 · 2026 阅读 · 0 评论 -
Three.js 后期处理-泛光效果-BloomPass-相机分层渲染
Three.js 后期处理-泛光效果-BloomPass-相机分层渲染概述步骤概述本文介绍如何使用three.js的后期处理来制作处泛光效果,先来看效果图注意:**camera的默认layers层次为0此处有三个大坑renderer.autoClear = false 此代码一定要加上,必不可少通道渲染顺序必须在renderer渲染之前执行 ,在执行之前清除颜色、深度和或模板缓存renderer.clear,然后将相机层级设置为1, 使用通道进行渲染清除深度缓存,将相机的层级设置为0,使原创 2020-12-11 10:13:43 · 5690 阅读 · 4 评论 -
Three.js 后期处理-高亮虚幻效果-UnrealBloomPass-相机分层渲染
标题asdasdasdaZx// A code block阿斯顿撒旦撒旦this.$Api.CovidSurveyController.post_getCovidSurveyPeoples .request({ data: this.listParams, }) .then((res) => { this.linesData = res; });原创 2020-12-10 19:36:51 · 6022 阅读 · 6 评论 -
Three.js 深度测试
Three.js 深度测试概述解决z-fighting问题被遮住的也可以看见概述在网上找了很多有关于深度测试的文章,感觉表述得都不是很明白,我个人理解的深度测试就为了实现两个功能,解决z-fighting问题和被遮住的也可以看见。解决z-fighting问题大白话就是因为两个图形在同一个像素上的深度相同时而产生的闪烁现象,仔细看下方的这张gif图片,我在(0, 0, 0)和(10, 0, 0)处分别创建了两个BoxGeometry, 在移动相机时出现了图形闪烁现象。代码: let geo原创 2020-12-09 19:33:13 · 3227 阅读 · 0 评论 -
Three.js 使用UV贴图制作地面
Three.js 使用UV贴图制作地面概述原理概述在Three.js中使用UV纹理重复创建一个带有+号的地面。原理加载图片texture的一个类let textureLoader = new THREE.TextureLoader()let texture = textureLoader.load("base.jpg")// THREE.RepeatWrapping:平铺重复。texture.wrapS = texture.wrapT = THREE.RepeatWrapping; /原创 2020-12-08 19:32:59 · 4257 阅读 · 0 评论