在线教程

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效果,你需要有一个兼容WebGL的现代浏览器(最好是Chrome/FireFox/Safari/Edge/IE11+)。本文的在线演示结果和代码请点击这里:

    阅读全文 收藏 评论 (1) 阅读 (71249) 2016-08-12 09:14:18  
  • 浏览器报错: Failed to execute 'createObjectURL' on 'URL'

    之前工作的网页调用摄像头获取视频并拍照的作品报错:Failed to execute 'createObjectURL' on 'URL'原因是Chrome升级后,新版本的Chrome不再支持该用法。其他主流浏览器也是如此,详细讨论请参考如下链接:

    阅读全文 收藏 评论 (4) 阅读 (52025) 2019-04-25 16:23:38  
  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数字营销等各个领域。在WebGL出现之前,用户必须安装第三方插件或本地应用程序才能利用设备硬件所拥有的强大的渲染功能,而使用WebGL,只需要浏览器就可以完成一切...

    阅读全文 收藏 评论 (7) 阅读 (34616) 2016-05-24 20:01:15  
  • 如何使用Three.js加载obj和mtl文件

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

    阅读全文 收藏 评论 (3) 阅读 (33597) 2016-06-29 00:31:57  
  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可见的”。Depth map中像素点记录的深度值为lenth1;然后从视点出现,计算物体顶点v到视点的距离,记为lenth2;比较二者大小,来确定“v”是否被遮挡。该术语的同义...

    阅读全文 收藏 评论 (1) 阅读 (31667) 2016-07-25 08:58:42  
  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

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

    阅读全文 收藏 评论 (1) 阅读 (30063) 2016-06-10 10:25:38  
  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使用会报错,通常是:require is not definedmodule is not defined解决第一个错误的方法是,去除require,直接在页面中使用script标签加载,或者...

    阅读全文 收藏 评论 (0) 阅读 (28586) 2016-05-27 19:50:36  
  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    教程2中,我们已经讲述了计算机图形处理硬件结构和流水线。在本文中,我们将开始讲述WebGL的具...

    阅读全文 收藏 评论 (0) 阅读 (27206) 2016-05-26 00:10:54  
  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

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

    阅读全文 收藏 评论 (0) 阅读 (25737) 2016-06-06 00:08:07  
  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG。本文介绍如何使用SVG结合CSS3来实现。在阅读本文之前,你最好先了解SVG的基本知识。...

    阅读全文 收藏 评论 (2) 阅读 (25618) 2016-10-07 18:57:13