2017年07月_暮志未晚NAN

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

原创 17 Three.js针对浏览器变动进行自适应

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/19.html可以改变页面大小测试效果。有的时候，我们打开了浏览器的页面，显示了当前的渲染的模型。但是，如果你没有设置场景模型跟随着浏览器的宽高度变化进行自适应，就gg了。所以，今天额外补上一篇相关的怎么跟随浏览器变动进行自适应。要是场景随着浏览器的大小变动进行自适应，就需要监听window的r...

2017-07-31 23:49:28 3494

原创 16 Three.js使用dat.GUI简化试验流程

简介使用这个插件的最省事的地方在于，调试很方便的调节相关的值，从而影响最后绘制的结果。而dat.GUI实现的东西也很简单，理解起来也很好理解。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/18.html我们实例化dat.GUI对象后，会在右上角显示出一些可以调节的参数，比如：这就是今天的案例制作出来的五个可以调节的属性。而且实现起来也很简单...

2017-07-31 22:46:21 11678 3

原创如何获取input框type=file选中的文件对象（FileReader）

最近突发奇想想做一个现在常用的图像上传然后从中截取头像保存的案例，所以做了一些准备工作，比如input框选择文件触发的哪些事件，这一节就保存一下我们如何获取input的type=file的input框的文件数据。如果想获取通过input选择的文件的数据，我们就需要使用到js封装好的FileReader对象。获取对象：首先我们需要通过FileReader构造函数实例化对象。var

2017-07-31 01:57:17 43998 4

原创 select框触发事件过程

我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了select上面，模拟客户选择相关事件的触发流程：最后发现，触发的过程基本上一样，如果没有选择或者选择的是当前显示的option的话，不会触发change事件，只有在选择不同的option时候才会触发change事件。下面是选择了不同的option

2017-07-31 00:10:10 20266

原创 input输入框type=text触发的相关事件

我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了input上面，模拟客户输入相关事件的触发流程：首先还是先触发了鼠标按下事件，然后触发了焦点，接着鼠标抬起，触发click事件。到了这里客户开始输入信息了，keydown，keyup，keydown，keyup的循环，因为用的输入法，所以字

2017-07-30 23:38:23 16541

原创 input的type=file触发的相关事件

今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与input相关的事件运行的过程。添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input

2017-07-30 23:08:10 95951 6

原创 html5使用canvas画布制作圆形加载动画

之前我写过使用css3制作圆形加载的动画，但是很麻烦。这几天我突然发现使用canvas还更加的简单，为什么我不用canvas做呢？所以，趁着今天有时间，赶紧的整理一下思路，书写了一个简单的案例。这个相对于css3的好处就是，没有那个bug，css3的上下会有一点淡淡的颜色边，而canvas绘制出来的没有bug还很简单。所以，我就写了一个简单的案例。兼容性方面，canvas兼容到

2017-07-27 23:43:46 4612

原创 15 Three.js实现阴影效果

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/17.html作为webgl的插件，three.js肯定没有原生webgl那样，添加一个阴影这么费劲。所以，经过博主一小时的研究（笨人不聪明，已经是极限速度了）。终于将阴影效果做了出来，并且还发现一些容易犯错的地方。先上张图避避邪：实现这个效果其实很简单，只需要设置几个属性就可以实现当前的效果。...

2017-07-27 11:21:50 9488 10

原创 14 Three.js绘制字体模型

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/16.html使用three.js绘制字体模型，没有想象当中那么难。首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载，在加载成功的回调函数里面进行创建网格。然后通过THREE.TextBufferGeometry或者THREE.TextGeometry方法...

2017-07-23 20:03:34 5048 3

原创 13 Three.js照相机的正交投影和透视投影

这一篇文章会的人也不看，不会的人也不需要专业术语，我直接大白话介绍一下webgl里面的照相机。照相机就相当于在模型世界中，设置一个位置，将前方的内容拍摄下来，然后再给canvas，在窗口里面显示出来在当前位置的图像。再说的简单一些，就相当于我们拿着手机拍了一张照片，放到了窗口里面显示出来。而动画则是一直拍，一直显示而已。因为绘制出来的图形是3d的，而我们的显示屏只能显示2d的图片。所以

2017-07-21 10:50:44 6756 1

原创 12 Three.js官方文档介绍的相关对象功能列表

Cameras（照相机，控制投影方式）CameraOrthographicCameraPerspectiveCameraCore（核心对象）BufferGeometryClock（用来记录时间）EventDispatcherFace3Face4GeometryObject3DProjectorRaycaster（计算鼠标拾取物体时很有用的对象）

2017-07-21 09:13:00 1609

原创 css3实现圆形加载动画的js插件

这个是本人写的一个小插件，实现的功能也很有限，就是能够使用圆形加载的效果。 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2017-07-19 16:08:43 4306

原创 11 Three.js使用Detector.js插件实现兼容性检测

其实Detector.js插件的代码很短，但是功能很全，（1）判断canvas兼容。（2）判断webgl兼容性。（3）在页面添加不兼容提示信息。这三个功能已经对兼容性检测足够了。使用方式也很简单：首先，将插件引入到页面：<script src="examples/js/Detector.js"></script>然后，在js里面添加一个判断：if ( ! Detector....

2017-07-19 11:22:54 9969 4

原创 css3实现圆形进度加载动画

使用到的css3属性有border-radius,transform,animation,clip等，在这里着重讲一下clip这个属性。因为博主也是第一次用这个属性。。。这个属性就是规定盒子内显示的区域，可以有的值有auto（默认），有inherit：从父类继承，还有就是添加rect(top,right,bottom,left)。就是规定一下显示区域，只有盒子内从盒子的左上角的顶点做位置对比，

2017-07-18 16:01:16 8934

原创 css3 实现十字光标和光标外圆圈环绕

实现十字光标其实很简单，用更原始的方法也可以实现，本例使用伪类：after和：before来进行定位实现。第二个案例鼠标悬停，所有的外圆的一圈点会跟随着一个一个的变动颜色，在鼠标悬停上后，会一个一个的变成蓝色。这个也只是用到了css3的过渡，其实，也没有什么难度。只要基础打的好，都可以写出来，里面的dom和css样式，都是通过js循环生成的，因为样式都一样，只是数值有区别。

2017-07-18 14:46:21 3821

原创 10 Three.js使用orbit controls插件（轨道控制）来控制模型交互动作

案例查看效果地址：http://www.wjceo.com/blog/threejs/2018-02-09/12.html这个效果相对于第八节的轨迹球插件使用上感觉要好，虽然轨迹球插件可以来回的滚动，但是容易分辨不清楚上下左右的关系，容易混乱，适合调试，而轨道控制插件orbit则适合客户使用，还不会产生混乱效果。下面讲一下使用。（1）首先引入插件，文件地址在官方案例的examples/js/con...

2017-07-13 01:08:41 12246 1

原创 9 Three.js使用性能插件stats进行性能监听

stats性能插件添加了以后，会默认在左上角显示性能帧数，每次刷新所用时间，占用内存。鼠标左键点击可进行切换，默认显示每秒的帧数。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/11.html 首先需要将stats插件引入，地址是官网下载文件里面的examples/js/libs/stats.min.js。然后需要实例化一个组件，然后添...

2017-07-12 10:20:17 6045 3

原创 8 Three.js使用轨迹球插件（trackball）增加对模型的交互功能

这是three.js的一个组件，需要额外的引入文件，文件的地址是在官方下载的案例的examples/js/controls/TrackballControls.js。只需要和案例里面一样设置相关的属性，并在实例化的时候讲相机传入。就可以实现交互效果。可以实现的效果：鼠标按住左键可以旋转模型鼠标按住右键拖拽可以移动模型鼠标滚轮可以缩放模型案例查看地址：http://www.wjceo.com/blo...

2017-07-12 00:23:31 4749 1

原创 js模拟栈的操作

栈作为一种数据结构，是一种只能在一端进行插入和删除操作的特殊线性表。它按照先进后出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据（最后一个数据被第一个读出来）。栈具有记忆作用，对栈的插入与删除操作中，不需要改变栈底指针。栈是允许在同一端进行插入和删除操作的特殊线性表。允许进行插入和删除操作的一端称为栈顶(top)，另一端为栈底(bottom)；栈底

2017-07-11 10:59:48 1206 1

原创使用js获取到css3的兼容前缀

将下面的代码放入到js当中 function prefix() { var div = document.createElement('div'); var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -

2017-07-07 15:15:53 854

原创 7 Three.js内置几何

这个案例是官方案例，个人通过一个一个测试备注，感受模型如何配置参数，来生成理想的形状。three.js内置的这些几何确实够平常使用，还可以通过顶点实现效果。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/9.html案例代码：<!DOCTYPE html><html><head> <met...

2017-07-05 18:06:07 3118 3

原创 6 Three.js工程文件目录结构

为了熟悉Three.js，我们需要花一些时间来了解它的目录结构、文档和示例。这里面包含的东西很多，了解一下对以后学习的用处很大。~build/Three.js的完整项目代码输出目录，包括未压缩版本和压缩版本。Three.js使用Google Closure进行编译发布，编译好的输出文件包含完整的Three.js库代码，它由不同代码目录下的源代码编译而成。如果你不熟悉Closure并

2017-07-05 10:36:00 3672

原创 5 Three.js一个好的结构书写

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/7.html学习three.js也有两天了，现在也在不间断的学习相关知识，了解three.js的规则。也做了两个简单的案例，感受到了three.js的强大，研究了一些别人的代码，现在想找到一种适合自己的书写代码。今天，还真的找到了一种感觉特别适合自己的方法，自己写js的时候貌似也这么写。...

2017-07-04 18:16:42 3089 4

原创 js 生成随机颜色

function randomColor() { var arrHex = ["0","1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d","e","f"], strHex = "#", index;

2017-07-04 17:05:45 814

原创 WebGL相关框架及网站

（1）three.js官网：https://threejs.org/中文文档：http://techbrood.com/threejs/docs/（2）RequestAnimationFrame.js(requestAnimationFrame()函数兼容性组件)github地址：https://github.com/paulirish/jquery-requestAnimatio

2017-07-04 14:49:38 3822 4

原创 4 Three.js一个案例详解

之前根绝官网书写了两个简单的案例，今天开始写了一个教程书里面的案例。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/6.html（1）创建了渲染器，并传值对象antialias设置为true，告诉Three.js要启用抗锯齿（antialiased）渲染。抗锯齿可以避免绘制物体边缘时产生的锯齿。（2）创建场景。（3）创建相机，设置相机的投影视...

2017-07-04 12:02:10 7188 4

原创 3 Three.js绘制线

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/5.html上面就是绘制完成后显示的效果。<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="wid

2017-07-03 16:04:49 6236 3

原创 2 Three.js的hello world

首先使用我们先用three.js创建一个立方体的hello world类型的案例。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/4.html<!doctype html><html><head> <meta charset="UTF-8"> <meta name="v...

2017-07-03 14:29:24 3627 1

原创 1 重新启程，WebGL框架three.js

查看一个简单的案例：http://www.wjceo.com/blog/threejs/2018-02-07/3.html从今天开始，我学习WebGL基础将占时告一段落，开始学习WebGL的流行框架three.js。经验告诉我，学习一种语言，如果入门能力差，最好从框架开始学，虽然会被掩盖很多的原理方面的东西，但是，你能直接做出来一些东西，给自己充足的信心，能让自己做下去。如果你连东西都做不出来，时...

2017-07-03 11:24:08 3942 2

原创 56 WebGL处理响应上下文丢失

这将是WebGL基础的最后一节的更新，以后请关注three.js框架的相关学习的更新。案例查看地址：点击这里WebGL使用了计算机的图形硬件，而这部分资源是被操作系统管理，由包括浏览器在内的多个应用程序共享。在某些特殊情况下，入另一个程序接管了图形硬件，或者操作系统进入休眠，浏览器就会失去使用这些资源的权利，并导致存储在硬件中的数据丢失。在这种情况下，WebGL绘图上下文就会丢失，比如，如果你正在...

2017-07-02 16:17:36 12973 5