- 博客(91)
- 资源 (6)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 阿里云 Nginx 配置Https(ssl证书)
获取ssl证书可以参考这篇文章：https://blog.csdn.net/hx7013/article/details/79711288获取下来的证书里面包含了两个文件各种平台密钥文件，这里我们选用nginx, 里面包含了两个文件，以key和pem结尾: 在阿里云ESC服务器的/etc/nginx/路径下创建一个用于放置ssl证书的文件夹，可以自定义命名这个文件夹，这里有两种创建方式1.通过阿里云控制台远程创建：cd /etc/nginx/mkdir ssl_key2...
2020-10-10 12:07:59
1234
原创 vue-video-player动态更新视频地址
<div class="video" v-if="isVideoVisible"> <video-player ref="videoPlayer" :options="playerOption" :playsinline="true" ></video-player> </div>一开始设置playerOption的时候不要给 sources[0].src...
2020-06-19 22:47:56
7475
原创 vue-cli + three.js 解决页面跳转时Css2dObject遗留在dom的问题
最近再做项目的时候，采用vue + three.js进行开发大型的3d场景项目，该项目中涉及到需要为建筑中的元素添加标签说明一些信息、名称，遂决定使用three.js的CSS2DRenderer和CSS2DObject进行标签的绘制，用的代码如下：function makeCSS2DObject(position, radius, text) { const div = document.createElement( 'div' ); div.className = 'scene-la
2020-05-31 21:27:52
3465
4
原创 git提交代码提交错分支怎么办？
当你在本地写好代码后想提交代码到远程仓库，即当你执行了：git add . git commit -m "#XX_XXX"但是你发现你commit 的时候写错分支，例如将 #12 写成 #22，这个时候该怎么办？不要慌，一行命令搞定,这个时候代码还在本地仓库，可以用下面的命令把代码撤回来：git reset HEAD^执行了上面的代码后，可以用：git status...
2019-11-13 21:14:49
1810
原创 Three.js使用TextBufferGeometry创建3D文本
学习交流欢迎加群：789723098，博主会将一些demo整理共享我们知道在Web前端上，可以用CSS样式设置多种多样的二维字体格式。如果我们想文本当成3D几何绘制在场景中，即生成3D文本来提升场景的逼格，可不可以呢？答案是肯定的，Three.js中提供了绘制文本的接口，TextGeometry和TextBufferGeometry，使用这两个接口，再配合FontLoader就可以实现3D字体...
2019-11-12 20:31:54
2048
原创 Three.js用SkinedMesh创建蒙皮 (1)
学习交流欢迎加群：789723098，博主会将一些demo整理共享蒙皮(skin)是3D动画中常用的一种为模型添加骨骼的技术，由于骨骼与模型是相互独立的，为了让骨骼驱动模型性运动，把模型绑定到骨骼上的技术称之为蒙皮。蒙皮被广泛应用于3D动画制作或者3D游戏中的角色对象，很多模型制作软件都有带这一功能，例如3Dmax和blender，而由它们创建出来的动画模型利用unity这样的游戏引擎，...
2019-11-08 21:29:04
873
原创 Three.js动态增删场景模型
学习交流欢迎加群：789723098，博主会将一些demo整理共享有时候我们在开发一些项目的时候，需要不断的往场景中添加和移除模型，所以会经常调用到scene，这是一件很烦的事，特别是当项目很大的时候，你会发现再很多地方乱用scene.add和scene.romove会很容易出错，那有没有什么好方法避免N多次的scene调用的，当然是有的啦，three.js设计的时候应该也考虑到这个问题了吧...
2019-11-06 21:55:08
4274
原创 git 误删文件如何恢复
git reset HEAD 误删的文件夹或者文件的路径git checkout 误删的文件夹或者文件的路径即使是在某个文件夹下，误删了某些文件，利用上面的这两行命令也有效如下图：...
2019-08-14 21:11:20
2962
原创 three.js射线：THREE.Raycaster实现鼠标选取几何图元
学习交流欢迎加群：789723098，博主会将一些demo整理共享一、介绍有时候我们在对三角网格模型进行操作的时候可能会需要对三角面进行选择，而实现这一功能最方便快捷的方法就是利用THREE.Raycaster创建射线来实现,在这边就不详细介绍射线的原理了，如果有兴趣的同学可以自行百度查询，有很多介绍射线的文章。Raycaster类的使用方法可以在官方文档中查询到：Raycaster使用方...
2019-04-25 19:12:25
2612
2
原创 原生 WebGL开发文章目录
为了方便读者学习和阅读，这篇文章主要是列出笔者撰写的原生WebGL博文的链接：一.WebGL二维几何开发1.原生webgl学习（一） 原生WebGL学习和入门引言2.原生webgl学习（二） 用WebGL绘制一个三角形3.原生webgl学习（三） WebGL中的矩阵运算：平移、旋转和缩放4. 原生webgl学习（四） WebGL绘制矩形（一）5.原生webgl学习（五） W...
2018-10-16 19:44:08
1430
2
原创 three.js创建简单的法向贴图
学习交流欢迎加群：789723098，博主会将一些demo整理共享在上一节，我们用了three.js创建了简单的凹凸贴图效果：点击查看凹凸贴图，凹凸贴图可以呈现出比普通贴图更多细节，也更具层次感，如果我们对场景要求更为细致，我们可以使用法向贴图对材质进行贴图，本文以THREE.MeshPhongMaterial为例，演示一个法向贴图的示例，法向贴图主要是利用材质的normalMap来贴图，利用...
2018-09-21 17:11:20
4859
原创 node.js安装express出错:不是内部或外部命令解决方法
在安装express框架的时候，运行：npm install -g express安装好之后我们发现输入express --help，会提示不是内部或外部命令，那是因为少安装了一个东西，在express新版本中将命令工具独立出来了，所以要再执行以下命令：npm install -g express-generator再执行express --help或express --ver...
2018-09-16 20:05:50
797
原创 three.js创建简单的凹凸贴图
有时候我们需要某个场景或者物体突出其凹凸特征，让物体看起来更有层次感，怎么办？Three.js的许多材质就提供了凹凸贴图的属性，下面笔者以THREE.MeshPhongMaterial为例，演示如何对一个立方体进行凹凸贴图： function textureBump() { let texture1 = new THREE.TextureLoader().load("text...
2018-09-12 16:10:14
2874
原创 three.js用THREE.CubeCamera和环境贴图创建反光效果
在文章：three.js贴图之CubeTextureLoader全景贴图中已经讲过全景贴图的应用，本文将进一步扩展全景贴图的功能，结合THREE.CubeCamera功能，创建出一个具有反光效果的场景，首先来看看看看THREE.CubeCamera的用法：let cubeCamera = new THREE.CubeCamera(0.1, 10000, 128);//实例化一个cubeCam...
2018-09-12 11:59:34
4398
原创 three.js贴图之CubeTextureLoader全景贴图
学习交流欢迎加群：789723098，博主会将一些demo整理共享有时候我们在创建地图街景或者地点全景图的时候，会经常用到THREE.CubeTextureLoader来对场景Scene的背景进行贴图，使之成为一个天空盒，只不过这个天空盒不能看见其外面的情景，无论怎么缩放，始终都在全景内，这是为什么呢？原因很简单，我们是对Scene的背景颜色进行贴图；笔者从官方文档中查到其应用的方法如下：...
2018-09-09 22:04:37
13048
1
原创 用three.js创建点云粒子贴图
学习交流欢迎加群：789723098，博主会将一些demo整理共享点云可以用来模拟各种各样的场景，如下雨、下雪和火焰燃烧等；点云在THREE.JS中也称为精灵(sprites)；接下来将介绍THREE.JS中点云的两种创建方式：1.运用于少量点云粒子场景:代码如下例：let material = new THREE.SpriteMaterial()for (let i = -3...
2018-08-25 21:25:18
3281
原创 JavaScript鼠标拖动图片
<!DOCTYPE html><html><head><style type='text/css'>img { position: absolute; }</style><body><script type='text/javascript'> function moveImage() {...
2018-08-13 11:43:57
978
原创 JavaScript读取本地文件
利用XMLHttpRequest对本地文件进行读取操作，值得注意的是，HTML文档的格式要与流中的读取格式设置一致， 代码如下：function load(name) { let xhr = new XMLHttpRequest(), okStatus = document.location.protocol === "file:" ? 0 : 200; xh...
2018-08-10 17:55:11
28718
10
原创 用python将GBK编码文件转为UTF-8编码文件
有的时候我们有一些网页的项目，需要用到JavaScript读取一些文本文件，用以读取数据；但各种文本文件的编码方式不尽相同，特别是带有中文字符的文件，为GBK编码，一般加载后都会出现乱码情况，故需要在加载之前将文件的编码形式转为国际兼容的编码方式UTF-8。乱码也是一个很烦的问题，博主苦寻良久，终于找到了相应的解决方案，这个python程序对单个文件或者整个文件夹下的文件进行批量转码操作，经过实例...
2018-08-10 17:26:04
31307
4
原创 使用three.js的着色器通道二之渲染太阳模型
在第一节：https://blog.csdn.net/qq_37338983/article/details/80289631，讲了如何利用基本的着色器通道对地球模型进行渲染，文章里面只是单纯地用到了着色器通道，代码里也没有着色器代码的编写，本节将会使用着色器代码和着色器通道结合共同来渲染一个类似于太阳的模型，模拟太阳表面的流动效果。所用贴图在上一篇文章里面有提到过下载方法，请读者自行下载：点击打...
2018-05-17 21:41:08
1728
原创 使用three.js的着色器通道一之渲染地球模型
学习交流欢迎加群：789723098，博主会将一些demo整理共享我们都知道，three.js库里面内置了很多着色器通道对象供我们渲染场景，本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现：1.RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建：let renderPass ...
2018-05-12 11:27:51
3032
原创 使用javascript实现矩阵LU分解
在线性代数中，LU分解是将一个矩阵分解为 L（单位下三角矩阵）和 U（上三角矩阵），可用于求解线性方程组、反矩阵和计算行列式。本文结合LU分解，用javascript实现线性方程组的求解；假设存在线性系统Ax = b，其中A为n*n矩阵， b为1*n向量，先进行A=LU分解，得到 LUx = b, 再令Y = Ux，得到LY = b，求出Y，再由Y = Ux求解x，具体算法实现如下：/*...
2018-04-12 19:24:03
1008
原创 JavaScript读取JSON文件
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。有关于json的相关信息，可参考：json百度百科。1、HTML文档<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>R
2018-03-13 21:17:41
56454
2
原创 Javascript与Canvas游戏场景开发之多彩弹力球
众所周知，Javascript结合HTML的canvas元素可以开发出丰富多彩的浏览器界面效果，并用于网页游戏的开发，下面分享一个在浏览器上实现的一个多彩弹力球Demo, 在这里有几点需要注意：1、理解JavaScript类的建立，可参考：点击打开链接。2、理解JavaScript的原型继承机制，可参考：点击打开链接。3、理解canvas元素的使用。我们先来看这个Demo实现的效果：下面将源代码附...
2018-03-12 22:05:06
1113
原创 VS2013配置OpenGL开发环境详细教程与实例
VS2013配置OpenGL开发环境，OpenGL编程指南（红宝书）第一个例子画三角形的实现
2018-01-02 17:39:57
6302
1
原创 three.js光源的应用
学习交流欢迎加群：789723098，博主会将一些demo整理共享three.js中定义了不同种类的光源，本节主要讲四种基本光源的应用：THREE.AmbientLight、THREE.PointLight、THREE.SpotLight和THREE.DirectionalLight。它们的介绍如下表：THREE.AmbientLight 自然光源，该光源的颜色会叠加到场景现有...
2017-12-17 19:18:39
1293
原创 three.js中正交和透视投影相机的应用
学习交流欢迎加群：789723098，博主会将一些demo整理共享一个场景之所以会呈现在我们眼前是因为我们具有眼睛，眼睛提供了视觉。换句话说，如果three.js场景中没有这双眼睛，就像电影没有摄像机一样，场景就无法呈现在我们面前？这双眼睛就是相机，可见相机是Three.js场景中不可或缺的一个组件。Three.js库提供了两种不同的相机：正交投影相机和透视投影相机，接下来分别讲解这两种相机以...
2017-12-01 23:12:27
4144
原创 解决let definenation are not supported by current JavaScript version
let definenation are not supported by current JavaScript version
2017-11-30 11:36:03
12018
7
原创 webstorm破解方法（亲测可用）
1.先去webstorm官网下载最新版本：点击打开链接；2.初次启动在以下界面进行如下操作：(1)选择License server;(2)输入：http://idea.imsxm.com/；(3)最后点击Activate。上面的破解必须在计算机有联网的前提下进行，由于是在线破解，以后打开软件计算机必须联网，才可以。...
2017-11-30 11:21:19
5622
2
原创 第六节 WebGL画球算法
学习交流欢迎加群：789723098，博主会将一些demo整理共享很多学习WebGL的小伙伴，刚开始一直都是学怎么画立方体，等到立方体画的炉火纯青的时候，却被另一个东西难住了，那就是球。what,还会被一个球难住？下面就给大家介绍一种画球的算法：我们的地球现在被划分为很多经线和纬线，如下图所示：由下面的图，我们来推导一下计算球面上点的坐标：假设图中圆的半径R=1...
2017-11-27 13:42:44
6110
1
原创 chrome谷歌浏览器开启webgl
方法一：右键单击谷歌浏览器的桌面快捷方式，在目标里面加上," --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files”,注意有空格符的地方一定要加空格符，直接复制本文章的也可以。然后点击应用，再点击确定，重启浏览器，你的谷歌浏览器已经开启了webgl！方法二：打开谷歌浏览器，在地址栏输...
2017-11-22 19:01:41
39487
8
原创 three.js给场景加上阴影
学习交流欢迎加群：789723098，博主会将一些demo整理共享现实世界中（假设只在地球，先不考虑外太空），只要有光的地方就会有阴影产生。所以当我们构建好一个具备光照的场景后，还必须给其加上阴影，才能更清楚地显示场景中各个元素的关系，光照和阴影是webgl和three.js开发大型场景必不可少的元素，如果少了这两者，想象一下，地球上一切事物如果没有阴影，没有灯光，那么是不是世界乌漆嘛黑，什么...
2017-11-20 13:39:53
8099
webgl、three.js中网格模型变形问题
2017-06-01
TA创建的收藏夹 TA关注的收藏夹
TA关注的人