2018年01月_暮志未晚season

12月 11月 10月 08月 07月 06月 05月 04月 03月 02月 01月

原创移动端使用 vConsole 打印console的信息数据

问题由于在移动端无法打开控制台，所以想办法打印console的数据一直很苦恼。之前一直用chrome的inspect调试移动端，但是那样有一个问题，就是只能使用移动版的chrome查看数据，今天，群里的无痕小伙伴给我推荐了一个由微信出品的叫 vConsole。 vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。

2018-01-30 15:02:53 17016 1

原创使用js或者jq设置滚动条滚动位置

js原生方法scrollTojs原生设置x轴和y轴就一个方法，首先获取到dom对象，然后设置位置即可，dom.scrollTo(x,y); //x为水平方向的滚动条位置，y为垂直方向的滚动条位置如果只想设置y轴的滚动条位置，首先需要获取到当前x轴的滚动条位置，然后再设置y轴，如：dom.scrollTo(dom.scrollLeft, 100); //设置y轴滚动一百像素

2018-01-28 22:45:31 59546 4

转载 Three.js 实时更新几何体的方法

基于性能的原因，改变几何体(Geometry)的某些属性不会引起浏览器对几何体(Geometry)的重新绘制。THREE.js会缓存一些数据，例如几何体的顶点和面的信息，修改这些属性的时候需要通知THREE.js去更新几何体，这些几何体才能得到重新计算并更新。需要通知THREE.js更新的几何体(Geometry)属性下面这些属性的变动需要通知THREE.js更新 1. geom

2018-01-25 00:45:25 10896 3

原创 56 Three.js 使用粒子实现雨滴特效

以上是最终的效果，我们通过之前的学习的内容，完全可以实现这个效果。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/58.html注意事项当前的纹理使用的图片加载，图片加载生成纹理的方法为：var texture = new THREE.TextureLoader().load("./rain.png");这样的...

2018-01-25 00:37:22 7311 1

原创 55 Three.js 使用canvas样式化粒子

简介使用canvas样式化粒子，那么我们首先需要先绘制一个canvas画布的纹理。比如：这是教程使用canvas绘制的吃豆人里面的一个小怪物，而我们今天要实现的就是，使用它来样式化粒子。过程通过上一节的代码，我们再扩展一下，首先需要获取到canvas对象，通过canvas对象生成可以供粒子使用的THREE.Texture对象。然后，将纹理对象赋值给THREE.Point...

2018-01-23 00:35:35 2107 1

转载 canvas 将折线转换成曲线

实现原理依靠canvas 2d的api方法context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);来实现绘制曲线。实现目标具体过程代码Vector2，一般用来表示向量，但有的时候也用来当作点来进行一计算。var Vector2 = function(x, y) { this.x = x; th

2018-01-22 19:12:33 2310 3

原创 54 Three.js 使用THREE.PointCloudMaterial（新版本：THREE.PointsMaterial）样式化粒子

简介上一节我们介绍了一下THREE.PointCloud。THREE.PointCloud构造函数接收两个属性：几何体和材质。材质用来给粒子着色和添加纹理，而几何体则用来指定单个粒子的位置。每个顶点和每个用来定义几何体的点，将会以粒子的形态展示出来。如果我们基于THREE.BoxGeometry对象创建THREE.PointCloud对象，即使不添加顶点，我们也将会得到八个粒子，立方体一个角上...

2018-01-19 00:11:39 5162 3

原创 53 Three.js 使用THREE.PointCloud（新版本改名：THREE.Points）批量管理粒子

简介当我们如果大量使用粒子时，会很快遇到性能问题，因为每添加一个粒子就是一个模型，因为每个粒子对象分别由THREE.js进行管理，所以，three.js提供了另一种方式来处理大量粒子，那就是使用THREE.PointCloud。通过THREE.PointCloud，three.js不再需要管理大量的单个THREE.Sprite对象，而只需管理THREE.PointCloud实例即可。实...

2018-01-18 00:05:23 4458 2

转载 css的居中问题

水平居中设置1、行内元素设置 text-align:center2、定宽块状元素设置左右 margin 值为 auto 3、不定宽块状元素a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 autob:给该元素设置 displa:inine 方法c:父元素设置 p

2018-01-16 15:44:17 398 1

原创 03 使用three.js开发全景漫游制作单张球形全景

简介一般网页中使用的全景图为两种，一种是由六张正方形图片组成的，另一种就是一整张的宽高比为2比1的全景图片。前面，第一节的案例就是一个六张正方形。今天我就实现一整张的案例文件引入。实现思路一张全景图都是这样的这是一张three.js官方的全景图片。我们通过这张全景图实现全景查看。首先我们需要一个球体的网格var geometry = new THREE.Sphe

2018-01-15 23:18:22 8817 8

原创 58 Three.js 通过THREE.Raycaster给模型绑定点击事件

简介由于浏览器是一个2d视口，而在里面显示three.js的内容是3d场景，所以，现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标。好在three.js已经有了解决相关问题的方案，那就是THREE.Raycaster射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）等等。我们看一张图片：这张图片偷自：https://segmentfault.com...

2018-01-14 02:59:03 38552 43

转载 canvas内的字体实现阴影效果

api介绍可以通过几种全局context属性来控制阴影。 shadowColor任何CSS中的颜色值。可以使用透明度（alpha） ShadowOffsetX像素值。值为正数，向右移动阴影；值为负数，向左移动阴影 shadowOffsetY像素值。值为正数，向下移动阴影；值为负数，向上移动阴影 shadowBlur高斯模糊值。值越大，阴影边缘越模糊案例代码html l

2018-01-12 16:52:35 9720 3

原创 02 使用three.js开发全景漫游视角问题

简介本全景前期是使用六张图片拼成的一个立方体，天空盒类型的。相机的位置处于0，0，0的位置，外面设置了一个长宽高都为200的立方体盒子。只要有相应的照片，把视角封闭在一个相对封闭的空间中，我们查看的效果，就达到了全景图的效果。案例我写了一个由六个不同颜色的纹理组成的图片拼接出来的盒子，可以清楚的查看出来效果。地址：https://johnson2heng.github.io/panorama/exa

2018-01-10 19:04:35 1662 1

原创 01 使用three.js开发全景漫游新的开始

简介新的开始代表一个新的阶段。从一个用户到一个开发者，这就是我所处的阶段的转变。接触全景也快一年了，在这一年了，从无知到有知，再到明白一些原理。再到学习three.js，每一天都成长一点点，日积月累，不放弃，终究会成才。本案例内容上面说了一些废话，我发现每创建一个目录，第一节都会说点感慨。下面开始介绍一下本目录制作的框架以后会更新的东西： - 全景图类型：六张图或一整张图的导入

2018-01-06 02:23:52 1491 5

转载欢迎使用CSDN-markdown编辑器-留存

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I

2018-01-05 23:43:13 242 1

原创 52 Three.js里面的粒子

粒子的作用粒子（有时也精灵sprite），可以非常容易地创建很多细小的物体，可以用模拟雨滴、雪花、烟和其他有趣的效果。简单案例创建一个粒子很简单：var sprite = new THREE.Sprite(material);即可完成创建，material属性可以是两种： - new THREE.SpriteMaterial() - new THREE.Sprite...

2018-01-02 23:44:55 2953 1

原创 51 使用ThreeBSP库进行Three.js网格组合

简介之前我们一直使用Three.js默认提供的几何体，今天我们使用ThreeBSP库，可以将现有的模型组合出更多个性的模型来使用。我们可以使用ThreeBSP库里面的三个函数进行现有模型的组合，分别是：差集(相减)、并集(组合、相加)、交集(两几何体重合的部分)。下面我们介绍一下三个函数，并提供每个方法的简单案例。查看案例效果：http://www.wjceo.com/blog/three...

2018-01-01 03:11:43 12989 11