shawn.xie - 博客园

【three.js详解之一】入门篇

摘要：开场白webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。博主目前也在学习three.js，发现相关资料非常稀少，甚至官方的api文档也非常粗糙，很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结，二是与大家分享。本篇是系列教程的第一篇：入门篇。在这篇文章中，我将以一个简单的demo为例，阐述three.js的基本配置方法。学完这篇文章，你将学会如何在浏览器中绘制一个立体图形！准备工作在写代码之前，你首先要去下最新的three.js框架包，阅读全文

posted @ 2012-08-16 16:17 shawn.xie 阅读(152536) 评论(42) 推荐(25)

[转]自律地追求更少——打破“成功是失败的催化剂”咒语

摘要：为什么一些成功的人或组织不会自动变得非常成功？对于这个问题，其中一个重要的解释就是“目标明确悖论”，这可概括为四个阶段：阶段1：当我们目标明确，目标明确会让我们成功。阶段2：当我们成功，成功会给予我们更多的选择和机会。阶段3：当我们有了更多的选择和机会，这些机会将分散我们的努力。阶段4：当我们努力被分散，我们最初成功的明确目标会被破坏。所以很离奇的，如果对这个结论再总结一下，那就是：成功是失败的催化剂。这个结论并不稀奇，我们可以在那些曾在华尔街炙手可热但最终倒闭的公司中看到这样的现象。在《How the Mighty Fall》一书中，Jim Collins曾探讨这种现象并发现这些失败有一个阅读全文

posted @ 2012-08-15 20:16 shawn.xie 阅读(659) 评论(0) 推荐(2)

phoneGap-Android开发环境搭建

摘要：一.安装在安装PhoneGap开发环境之前，需要按顺序安装以下工具：1.Java SDK java sdk，不安装的话不能正常安装Android SDK。安装成功检测：启动DOS窗口start-->run-->cmd，在DOS窗口中键入：java -version，如能显示版本信息说明安装正常。2.Eclipse java开发工具，这我就不用多说了，推荐装classic版的。3.Android SDK 下下来安装完之后是一个Android SDK Manager，你需要下载以下组件，可能需要较长时间：4.ADT Plugin 这是一个Eclipse插件，作用是关联Android 阅读全文

posted @ 2012-08-15 20:04 shawn.xie 阅读(24259) 评论(7) 推荐(4)

[canvas]通过动态生成像素点做绚丽效果

摘要：本例中的粒子就是实实在在的像素，由js代码在canvas上动态生成的像素点！这些像素点通过一个运动方法有规律地动了起来。透过这个思路，我们可以想到很多很炫的效果，但是这个性能有待考察。实验证明，动态控制太多像素点的话绝对会卡的！在做效果方面有经验的朋友，请提出宝贵意见！这个思路走得通么？<!doctype html><html><head> <title>智能粒子</title> <meta charset='utf-8' /> <style type="text/css"> 阅读全文

posted @ 2012-08-09 13:46 shawn.xie 阅读(4279) 评论(2) 推荐(1)

前端福音——移动app轻量级后台parse

摘要：对很多前端工程师而言，不懂后台的确是一件很痛苦的事情。就像一个装修师傅，只会做门面，不会盖房子，落了单就做不成独立的产品。纵然js的功能越来越强大，若要做一个独立的app，很多时候我们不可避免地要用到后台数据库。于是我们很苦逼地去翻看php，.net，sql，纵使我们产品的规模可能很小很小。有没有一种轻量易用的简易后台数据库呢？Parse 是由YC孵化出来的、专为移动应用提供后台服务的云计算平台，为开发者包办繁琐的后台服务，让开发者只需专注于具体的开发工作。借助Parse的服务，应用开发时间可降低10倍 – 100倍。原本可能需要数个星期才能做出来的应用现在只需数个小时即可完成。因为针对移动a 阅读全文

posted @ 2012-08-08 15:01 shawn.xie 阅读(8365) 评论(3) 推荐(5)

canvas变幻线效果demo

摘要：课下做的一个小练习，老师出的题目，运行起来效果挺好看的，大家可以把代码粘走看看效果：<!doctype html><html><head> <title>变幻线-by-@谢帅shawn</title> <meta charset='utf-8' /></head><body> <canvas height='560' width='1000' id='canvas'>您的浏览器不支持canvas！</canvas> 阅读全文

posted @ 2012-07-26 16:08 shawn.xie 阅读(1662) 评论(1) 推荐(0)

基于canvas图像处理的图片展示demo

摘要：图片展示网页往往色彩繁杂，当一个网页上有多张图片的时候用户的注意力就很不容易集中，而且会造成网站整个色调风格的不可把控。能不能把所有的预览图变成灰度图片，等用户激活某张图片的时候再上色呢？以前，唯一的方法就是让美工做两张图，一张彩色一张黑白，费时费力。能不能让js对图片进行一些处理呢？幸运的是，canvas就提供了图片处理的方法。canvas+js可以让我们对图片进行像素级的操作，我们可以通过操作图像的像素实现各种图片处理效果,如模糊，马赛克，液化，调色等等。详细代码及注释如下：<!doctype html><html><head> <title> 阅读全文

posted @ 2012-07-26 16:00 shawn.xie 阅读(12745) 评论(8) 推荐(1)

构建canvas动画框架（三）——canvas图片预加载及进度条的实现

摘要：照例先回顾一下目录1.通用类的提取：动画对象与帧对象2.灵与肉的结合：便于拆卸的运动方程3.进度条的实现：canvas的图片预加载4.demo测试：通过一个demo测试框架今天和大家探讨canvas动画框架之图片预加载，如上图的进度条，这可不是假的进度条，是真正能够实时获取图片加载进度的进度条。为什么想要做这个进度条呢？canvas需要进度条么？答案显然是肯定的。我们的页面如果放到服务器上，图片的下载将是相当漫长的一个过程。如果我们不进行预加载就开始执行动画的话，那么用户肯定看不到理想的效果。那么我们就来看看canvas图片预加载的实现（此处参考了网上一段代码，来源：http://hi.bai 阅读全文

posted @ 2012-07-13 10:35 shawn.xie 阅读(9821) 评论(2) 推荐(3)

css3 内贴图 360度环绕视角

摘要：之前经常看到有人发用css3做立方体的博文，心想如若能把视角拉到立方体里面，岂不是就能做一个环绕的视角效果了么。今天试着做了一下，发现这个视角还真不是那么好调的，毕竟标准制定的时候应该没人想到有人会这么玩的。chrome下显示不正常，safari下基本正常，但是景深还是有问题，仔细观察上图你会发现有扭曲~~~~代码分享如下，求完美解决方案：（测试图片可以在相册内下载，6张）<!doctype html><html><head> <title></title> <meta charset='utf-8' /> 阅读全文

posted @ 2012-07-11 18:04 shawn.xie 阅读(2225) 评论(3) 推荐(0)

构建canvas动画框架（二）——灵与肉的结合

摘要：今天一直在弄css3的立体效果，发现如果结合canvas和css3的3d，可以做出很多不可思议的效果来，大家可以发挥想象力！接着上节讲canvas动画框架：1.通用类的提取：动画对象与帧对象2.灵与肉的结合：便于拆卸的运动方程3.进度条的实现：canvas的图片预加载4.demo测试：通过一个demo测试框架这一节我们先来说说运动方程的叠加。之前写过的一个动画框架，并没有把运动独立出来。这样造成的后果就是，每个动画对象没有自己的运动个性！如果我们批量创建一百个动画对象，并且想让它们每一个都拥有自己的运动属性，将非常麻烦。所以，将运动与形式相分离，是最好的解决方案。上节提到过，我们为Aniele 阅读全文

posted @ 2012-07-11 17:42 shawn.xie 阅读(3723) 评论(0) 推荐(0)

小扣钉