- 博客(63)
- 收藏
- 关注
RSS订阅
原创 threejs中的着色器入门二
1.顶点着色器（vertex-shader）基元形状，比如一个球体，是由顶点构成的，顶点着色器被依次传入这些顶点中的一个顶点，然后处理它。如何处理每个顶点是可以自由定制的，但顶点着色器有一个必做的事，就是为一个名为 gl_Position （放置顶点坐标信息）的变量赋值，该变量是一个4维数组（vec4），表示该顶点最终在屏幕上的位置。但我们需要如何将一个三维坐标（一个具有x、y、z值得顶点）转化...
2019-07-31 10:53:52
1920
原创 threejs中的着色器入门一
什么事着色器？固定渲染管线 ——这是标准的几何&光照(T&L)管线，功能是固定的，它控制着世界、视、投影变换及固定光照控制和纹理混合。T&L管线可以被渲染状态控制，矩阵，光照和采制参数。如果有了固定渲染管线，编写程序就比较容易了，因为所有的变换都是由固定渲染管线来完成的，但是缺点就是自由度低。固定渲染管线只能完成一些最基本的操作，如果想要做一些特殊的处理，就比较麻烦了。...
2019-04-03 11:34:38
6358
原创 Vite搭建Vue3项目
一、创建项目如果没有安装vite，先全局安装npm i create-vite-app -g创建命令create-vite-app project_namecva project_name //缩写，其中“project_name”为任意项目名二、安装依赖注意：vue3需安装相对应的库和依赖1.Element Plus（目前为测试版）—通用样式组件库yarn add element-plus2.安装vue-router ----路由yarn add vue-router@43
2021-10-08 16:05:22
598
原创 谷歌组件开发初尝试--Chrome Extensions
最近项目遇到需要关闭其他网站网页窗口的需求，具体是浏览器处于全屏状态，无法使用浏览器的关闭按钮，所以想到使用chrome extensions来实现全局管理，在别人的网页中注入操作按钮。chrome extensions：谷歌插件谷歌扩展插件是直接定制浏览体验的小程序，可以根据实际需要控制浏览器的功能和行为，对网页进行样式修改、添加额外的人机交互等功能。扩展组件直接使用Web开发技术创建，如HTML，CSS和JavaScript。相关文档链接：chrome官方文档（英文版） https://deve
2021-03-10 15:52:03
1046
原创 前后端分离项目的一些小细节随记
后端需要将图片的相对地址存于数据库，方便移库，避免移动数据库后找不到；前端框架中public文件夹下的config.js文件很重要，配置公共地址，方便修改访问。
2021-02-02 10:27:52
301
原创 通过PC远程调试移动端——weinre的使用
weinre是一款非常好用的远程调试工具，功能与网页浏览器的开发者工具基本类似，可以很方便地用于移动端web的调试。1. NPM全局安装weinrenpm install weinre -g 2. 通过命令行窗口运行，直接复制该行即可weinre --httpPort 8081 --boundHost -all-httpPort ：调试服务器运行的端口，默认8080-boundHost ：调试服务器绑定的IP地址或域名，默认localhost3. 绑定目标项目获取本机的IP地址，例
2020-12-01 17:48:11
317
原创 three.js中的几何体、网格详解
一、常用几何体BufferGeometry：是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。Geometry：Geometry 是一个便于用户使用的 BufferGeometry 的替代品。Geometry 利用 Vector3 或 Color 存储了几何体的相关 attributes（如顶点位置，面信息，颜色等）比起 BufferGeometry 更容易读写，但
2020-10-29 16:02:15
1117
原创 three.js使用Shadertoy的着色器代码
three.js使用Shadertoy的着色器代码附上官网链接:https://www.shadertoy.com/1.ShaderMaterial材质中的默认顶点着色器和片元着色器，此时渲染的物体程序红色 /* 顶点着色器 */ const vertexShader=` void main(){ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; /* 片元着色器 */ con
2020-10-28 15:12:26
1672
3
原创 Node相关知识记录
使用gnvm进行node版本切换管理一、gnvm下载安装1、下载直接在 git 下载：地址：https://github.com/Kenshin/gnvm2、安装（1）已经下载了 node：直接将 下载的资源解压（gnvm.exe） 放到 node 所在的文件夹（2）没有下载 node：将 gnvm.exe 放到任意文件夹，并将此文件夹加到环境变量 path设置环境变量的菜单在：【此电脑】右键→【属性】→【高级系统设置】→【高级】→【环境变量】在系统变量中找到 Path，点击编辑，在变量值中
2020-07-28 13:59:49
378
1
原创 WebGL编程（5）-矩阵与图形变换的关系（平移、旋转、缩放）
变换矩阵（Transformation matrix）：一个mat4类型的变量 <script id="vShader" type="x-shader/x-vertex"> attribute vec4 a_Position; uniform mat4 u_MatrixFour; void main(){ gl_Position=u_MatrixFour*a_Position; } </script>新坐标 = 变换矩阵 * 旧坐标（因为
2020-07-07 11:49:01
568
原创 Spring Boot + Vue +Three.js综合案例（中）--后端开发
后端开发----Spring Boot +MyBatis(MySQL)一、项目的搭建使用IDEA编辑器创建好项目，具体项目结构如图
2020-06-22 22:39:52
1227
原创 Spring Boot + Vue +Three.js综合案例（上）--前端开发
前端开发----vue一、项目的搭建使用 vue-cli 脚手架搭建工程步骤步骤：默认已经安装好npm，我的版本以管理员身份运行cmd，全局安装vue-clinpm install -g @vue/cli //安装vue clivue --version //查看版本选择一个文件目录，存放项目，进入该目录的cmd命令提示符，输入下列命令，等待配置vue create 工程名（只能使用英文、数字、短横线，不支持中文,特殊字符）选择预设配置：1.默认；2.手动；（
2020-06-21 17:32:28
2262
原创 Three.JS之性能优化（一）
在项目中如果大量引入外部模型，且外部模型太大，就必须进行压缩，否则不仅占用带宽，而且会降低硬件运行性能，使用户体验极差。1.压缩和使用OBJ格式的模型–Draco算法Draco算法Github地址Draco是由谷歌Chrome媒体团队设计，旨在大幅加速3D数据的编码、传输和解码。因为研发团队的Chrome背景，所以这个开源算法首要应用对象是浏览器。但既然谷歌已经把他开源，现在全世界的开发者都...
2020-03-07 12:52:36
1984
原创 Redis存储系统的安装使用
Redis简介：Redis是一个key-value存储系统。和Memcached类似，它支持存储的value类型相对更多，包括string(字符串)、list(链表)、set(集合)、zset(sorted set --有序集合)和hash（哈希类型）。这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作，而且这些操作都是原子性的。在此基础上，redis支持各...
2020-01-20 21:41:26
134
原创 Mysql5.7解压版的安装配置使用
用了很久mysql了，最近又安装一次，就写了一些总结。解压版Mysql的安装：下载解压：官网下载地址：https://dev.mysql.com/downloads/mysql/根据服务器的系统，下载对应的压缩包，放在适合的目录下解压。配置①添加mysql配置文件此时根目录下只有一个my-default.ini文件 ，需要新建一个叫my.ini文件（用于修改或添加一些配置信息），在...
2019-12-11 21:55:38
397
原创 ES6入门四 - 集合
一、Set集合Set集合，类似于数组，它的成员的值是唯一的，不会出现重复值。可以传入一个数组作为参数初始化，会自动去除数组中的重复值。 const set_1=new Set(); console.log(set_1);//Set(0) {} const set_2=new Set([1,2,3,4]); console.log(set_2);//Set(4) {1...
2019-12-06 11:27:51
228
原创 ES6入门三 - 函数扩展
1. 函数参数的默认值在ES6中，函数的参数可用设置默认值，即直接卸载参数定义的后面。通常与结构赋值结合使用。 function f({x,y=5}={}){ console.log(x,y); } f({});//undefined 5 f({x:1});//1 5 f({x:1,y:2});//1 2 f(); ////undefined 5...
2019-11-28 10:57:39
136
原创 ES6入门二 - 增强的字符串
ES6对字符串进行了改造和增强，使开发人员能更方便更准确的调用。** 模板字符串 **模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。变量使用“ ${ js } ”标识。<div id="result"></div>//运行结果 我买了一辆bmw，花费了...
2019-11-26 16:48:04
445
原创 JavaScript 中for循环总结
在for循环中，设置变量区域为父级区域，循环体内为子级区域常规写法：这种写法比较常用，index为数字（number），与for…of相比，缺点，无法识别大于0xFFFF的码点 var arr=[1,2,3,4,5]; for(let index=0;index<arr.length;index++){ console.log(index+","+arr[inde...
2019-11-26 11:54:09
316
原创 threejs -内置着色器包的使用详解
threejs提供了丰富的着色器包，搭配后处理通道使用，可以实现非常强大的效果。（）效果示例：1.AfterimageShader.js实现效果2.DotScreenShader.js实现效果常用着色器包：CopyShader.js：该着色器会将效果输出，普通的通道一般都是不能输出的，要靠CopyShader进行输出。引用：js/shaders/CopyShader.js用法示...
2019-10-11 09:01:45
3744
2
原创 threejs postprocessing-后处理通道效果使用详解
threejs的后期处理通道包提供了各种强大的效果，有了这些效果可以大大降低代码难度，避免了复杂的着色器编写。效果示例：实现方式：初始化效果组合器 composer=new THREE.EffectComposer(renderer); //该参数是WebGLRenderer对象为了保证组合器的正常使用，必要的引用包，在工程文件下可找到，这四个都是必须的，并且注意引用的顺序...
2019-10-08 16:40:51
7635
4
原创 threejs二维坐标与三维坐标的互转
屏幕坐标转为为空间坐标应用场景，射线检测，使用鼠标点击屏幕，获取一个屏幕坐标A(x，y)，必须转换为空间坐标才能在threejs中使用。示例代码： var mouse=new THREE.Vector2(); mouse.x=(event.clientX/window.innerWidth)*2-1; mouse.y=-(event.clientY/window.inn...
2019-09-29 11:51:09
9242
1
原创 详解TWEEN.JS 补间动画
tweenJS是一个简单的javascript补间动画库，支持数字，对象属性，CSS样式等的动态效果过渡，允许平滑的修改元素的属性值。告诉它需要改变的元素的开始值和结束值，并设置好过渡时间，补间动画将会自动计算从开始到结束的状态，并产生平滑的动画变换效果。tweenjs在threejs中经常作为过渡动画使用，所以做了一些学习说明，供以后方便查阅。代码示例：//代码看不懂没关系，下面会有详细的...
2019-09-23 14:59:12
3233
原创 threejs 使用陀螺仪实现手机端全景
在threejs中实现全景的方式有多种，其中有天空盒子，贴图反缩放，还有CSS3DRenderer渲染。**方法：**CSS3DRenderer使用六幅图片绘制一个立方体盒子，将视角放置在其中，根据陀螺仪控制方向，移动视角。首先两个引用包： <script src="js/controls/DeviceOrientationControls.js"></script&g...
2019-09-20 16:31:05
3562
原创 webpack4的安装配置及其使用
webpack4的安装配置承接上文，上部分关于npm的链接以管理员身份在命令行窗口输入 npm install webpack -g，系统就会自动下载该安装包，-g代表全局安装。为了使用webpack命令，我们还需要安装webpack-cli，输入npm i -g webpack-cli，系统自动安装完成webpack-cli。在命令行中输入webpack-version，就可以看到安...
2019-09-18 11:34:56
237
原创 npm的安装配置及其使用
npm的安装和配置从官网下载node.js，点击安装，一直next就行，最后检查是否安装成功。查看node版本 —————————— node -v查看npm版本 ——————————npm -vnpm的项目使用找到项目目录（示例我在hbuilderx创建的项目，E:\HBuilderX\project\npmTest）；（以管理员身份运行）打开命令行窗口，输入E...
2019-09-17 16:52:39
1831
1
原创 ES6入门一 - 变量声明命令与解析赋值
原来的ES5，只有两个变量声明命令 var和function，ES6新加入了四个，let，const，以及import和class命令。这使得js朝着更规范化，更严谨的编程语言方向进化。...
2019-08-30 11:57:43
199
原创 WebGL编程（4）-基本图形和基本变换
基本图形的绘制和顶点的绘制差不多，只需要设置gl.drawArrays()的mode参数对应的值。gl.drawArrays(mode, first, count)mode的可选参数详解基本图形mode参数描述点gl.POINTS一系列点，绘制在v0,v1,v2…处线段gl.LINES一系列单独的线段，绘制在（v0,v1）、（v2,v3）、（v4,v5）…...
2019-08-29 16:59:34
267
原创 WebGL编程（3）-缓冲区对象和类型化数组
什么是缓冲区对象？普通方式一次只能向顶点着色器写入一个点，而缓冲区对象可以向着色器一次性传入多个顶点数据。它是WebGL系统中的一块内存区域，可以填充大量的顶点数据，保存在其中，供顶点着色器使用。三角形的顶点示例：方法：#.createBuffer()创建缓冲区对象返回值 ： 非null，新创建的建缓冲区对象； null，创建缓冲区对象失败。 错误： 无...
2019-08-29 11:11:26
818
原创 threejs fire 火焰与烟雾效果
在threejs中有一个为我们提供了可以实现火焰和烟雾效果的包，我们可以直接引用这个包，通过设置某些参数实现需要的效果。第一步引入fire包，可在工程文件夹下的example文件夹中找到<script type="text/javascript" src="js/objects/Fire.js" ></script>后续马上更新，工作…...
2019-08-28 16:27:18
11929
22
原创 WebGL编程（2）-学习总结之着色器
着色器语言类似于C语言，必须包含一个main函数，void 表示这个函数不会有返回值，并且不能为main函数指定参数。两种着色器：1.顶点着色器（vertext shader）：用于描述顶点特性（位置，大小）。2.片元着色器（fragment shader）：用于逐片元处理，显示在屏幕上，如处理光照，颜色等，片元可以理解为像素。顶点着色器内置变量变量名说明类型g...
2019-08-22 11:26:50
555
原创 WebGL编程（1）-学习总结之WebGL常用方法
WebGL简介：WebGL，是一项使用canvas在网页上绘制和渲染复杂三维图形（3D图形），并允许用户与之进行交互的技术，WebGL的技术规范继承自免费和开源的OpenGL标准，而后者在计算机图形学、电子游戏、计算机辅助设计等领域已被广泛使用多年。例子：<canvas id="canvas" height="400" width="400">该浏览器不支持canvas！<...
2019-08-22 09:52:28
894
原创 threejs 正交相机实现视图指示器
突发其想，想梳理一下正交相机的内容，虽然不是很常用，但也是有必要学习的。正交相机一般用在建模和工业UI上面，它观察的物体不会因为远近而引起视觉大小变化。构造函数：OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )left...
2019-08-20 12:59:00
2841
3
原创 threejs -实时场景缩影
在左上角显示一个视图，相当于整个场景的缩影，渲染一次场景，再渲染一次设置视图就行。1.新建两个透视相机； //主相机 camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000); camera.position.set(0,100,200); camera....
2019-08-14 14:51:43
3634
4
原创 threejs 使用SVG格式绘制地图
使用SVG绘制图形很简单，绘制地图也是一样。首先需要一个地图的SVG格式配置文件，我这里找了一个<script type="text/javascript" src="js/0_public/chinaMapConfig.js" ></script>//中国地图然后将SVG格式的字符串转换为THREE.Shape对象，此时需要引入插件<script type...
2019-08-12 11:51:32
3289
17
原创 js获取百度文库页面内容
打开搜索到的百度文库的word页面，打开控制台（F12），在console里输入（document.getElementById(id).textContent;），回车即可；id为抓取页面的id，选择控制台左上角的箭头，移到页面，即可看到id，...
2019-08-07 15:02:21
2005
原创 WebGL -矩阵及其变换
1.模型矩阵——模型变换局部（物体）坐标系或者局部（物体）空间：物体空间比较容易理解，就是需要绘制的3D物体所在的原始坐标系代表的空间。例如在进行设计时，物体的几何中心是摆放到坐标系原点的，这个坐标系代表的就是物体空间。世界坐标系或者世界空间：世界空间也不难理解，就是物体在最终3D场景中的摆放位置对应的坐标所属的坐标系代表的空间。模型变换是将物体坐标系下的物体变换到世界坐标系下。模型变...
2019-08-06 15:02:01
700
1
原创 着色器语言（GLSL）基础学习三
内置的常量glsl提供了一些内置的常量,用来说明当前系统的一些特性. 有时我们需要针对这些特性,对shader程序进行优化,让程序兼容度更好.在 vertex Shader 中:1.const mediump int gl_MaxVertexAttribs>=8gl_MaxVertexAttribs 表示在vertex shader(顶点着色器)中可用的最大attributes数.这...
2019-07-31 10:26:09
1665
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人