HTML5在线教程和技术博客

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:C
    套选:CTRL+鼠标左键(LMB)
    删除:X/Delete
    复制:Shift+D
    添加:Shift+A取消:Esc, RMB确认:Return, LMB界面操作F5: 工具栏位置对称切换
    SH...

    阅读全文 收藏 评论 (1) 阅读 (5006) 2016-07-06 08:36:56  
  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoader两个类来实现,这也提供了操作的灵活性。下述代码中首先使用MTLLoader加载egg.mtl材料文件,然后把该材料设置给一个OBJLoader对象,以便在加载obj模型的时候进...

    阅读全文 收藏 评论 (2) 阅读 (4464) 2016-06-29 00:31:57  
  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星的Gear VR以及HTC Vive。其中Vive和DK2都是高端专业VR设备,Gear VR属于中端设备,CardBoard是入门级的VR设备。现在体验VR,一般你需要在VR设备的前方加上一个手...

    阅读全文 收藏 评论 (0) 阅读 (6185) 2016-06-18 14:42:32  
  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这样就要求每张贴图长度和宽度应该是4的倍数。图像如同一般的做法按照行列顺序存放这些4X4的纹理单元块(texel blocks),每个texel blocks被看成是一个图像的“像素...

    阅读全文 收藏 评论 (1) 阅读 (5680) 2016-06-15 14:16:52  
  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于RGB图像。CSS3中也引入了blend模式,对照Photoshop中的实现,有助于我们深入理解该方法的使用。Opacity 不透明度C=d*A+(1-d)*B
    相对于不透...

    阅读全文 收藏 评论 (1) 阅读 (5675) 2016-06-15 12:15:03  
  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一部分光能被吸收并转化为热,其余部分被反射或投射。正是反射和透射使得物体可见。如果入射光全部被吸收,物体将不可见,该物体称为黑体。光能中被吸收、反射或透...

    阅读全文 收藏 评论 (0) 阅读 (6367) 2016-06-11 12:10:49  
  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间点或被压缩的点。我们知道纹理在使用中一个经典问题是会出现走样,滤波器就是用来实现纹理反走样的技术。gl.bindTexture(gl.TEXTURE_2D,>textures[0]); gl.texIma...

    阅读全文 收藏 评论 (0) 阅读 (6950) 2016-06-10 10:25:38  
  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场合。首先让我们来看看如何能画出一个普通的图像,然后看看我们如何能使它变形。使用WebGL绘制图像在踏得网之前的教程中,我们已经说明过,WebGL可以通过纹理对象...

    阅读全文 收藏 评论 (0) 阅读 (6420) 2016-06-09 21:51:31  
  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁剪成我们想要的形状。
    clip-path支持多种方式,如基本的图形(多边形polygon(), 圆形circle(), inset() (用来定义内部矩形), 和椭圆 ellipse()),也支持直接...

    阅读全文 收藏 评论 (1) 阅读 (6663) 2016-06-08 10:49:28  
  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的细节感受,会使得建模任务变得异常复杂而得不偿失。
    注:本文混用贴图(texture map)、texture和纹理这3个中英文词汇,因为它们代表同样的含义,用来确定物...

    阅读全文 收藏 评论 (0) 阅读 (7189) 2016-06-06 00:08:07