`

在canvas 2D API下实现3D效果(3D版LOVE函数的绘制)

阅读更多

html5的canvas为我们提供了浏览器原生支持的绘图API。
(或者怎么说呢,大多数浏览器已经为我们提供了原生的绘图API:HTML5的canvas)
目前,这个API只提供2D context,并不支持3D绘图,但是web上从来就不缺牛人,各种canvas下绘制的3D效果层出不穷,令人吱吱称赞。
有3D圣诞树:http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-tree
有3D的FPS:使用 HTML 5 canvas 和光线投影算法创建伪 3D 游戏
还有3D俄罗斯:http://www.benjoffe.com/code/games/torus/
不胜枚举…

其实,无论canvas是否提供API,在我们目前这种二维显示设备下显示,势必都要将3维形状投影到2维平面坐标上。无论多炫的3D效果也只是二维平面上的投影。
对于此,读过《三体》特别是第三部《死神永生》的同学或许会大有感触吧。

人们总是喜欢用这样一个类比:想象生活在三维空间中的一张二维平面画中的扁片人,不管这幅画多么丰富多彩,其中的二维人只能看到周围世界的侧面,在他们眼中,周围的人和事物都是一些长短不一的线段而已。只有当一个二维扁片人从画中飘出来,进人三维空间,再回头看那幅画,才能看到画的全貌。
这个类比,其实也只是进一步描述了四维感觉的不可描述。

关于《三体——死神永生》里四维空间(不算时间维)的讨论,这里还有篇有意思的博文:四维世界的堵车问题

好了,言归正传。
下面提供一个三维到二维的投影算法(from www.benjoffe.com):

var theta = 4.2; //转角
var eleva = 0.6; //仰角
function iso(x,y,z){
var dist = Math.sqrt(x*x+y*y);
var angle = (x==0 && y==0) ? 0 : Math.atan(y/x) + theta + ((x<0)? Math.PI : 0);

x=Math.cos(angle)*dist;
y=-Math.sin(angle)*dist;
var fact = (y*Math.cos(eleva) + z*Math.sin(eleva)+8)/8;
y=y*Math.sin(eleva) - z*Math.cos(eleva);
x*=fact;
y*=fact;

return {
x: x,
y: y
};
}

输入是x,y,z三个三维坐标下的值,输出是x,y两个二维坐标值。

我们应用一下:
下面是一个3D球

 

以上代码是对球面的方程 x^2+y^2+z^2=r^2进行求解,将解(x,y,z)代入iso方法,最后根据输出二维坐标进行绘图。
对于这个球面方程的解法,也是各有各的写法。
(这里有个Functions 3D的应用,用来将方程式输出成3D图形:http://www.benjoffe.com/code/tools/functions3d/

如果你知道这篇文章的话:笛卡尔情书的秘密——心形函数的绘制
我相信你也很可能知道网上还有一个3D版是心形函数:(x^2 + (9/4)y^2 + z^2 – 1)^3 – x^2*z^3 – (9/80)y^2*z^3 = 0
下面我将使用上面的iso方法在canvas中绘制出来。

 

我都给你画了这么多心了,难道非得让我把自己的心掏出来吗~~~~

咳咳…

回来,我们知道,三维空间下的坐标系不止直角坐标一种,还有 圆柱坐标系,球坐标系等等。
下面我们将iso方法转换一下,是输入使用球坐标系值(θ,Φ,r)——转角,仰角,球半径。
首先我们先要知道,三维直角坐标系于球坐标系的换算式:

x=rsinθcosφ  
y=rsinθsinφ   
z=rcosθ

呃哦…
代入iso函数后我们发现iso变的更简单了:

var theta = 4.2; //转角
var eleva = 0.6; //仰角
function iso(a,b,r){
var x,y,z
x=r*Math.cos(a+this.theta)*Math.sin(b);
y=r*Math.sin(a+this.theta)*Math.sin(b);
z=r*Math.cos(b);

var fact = (y*Math.cos(this.eleva) + z*Math.sin(this.eleva)+8)/8;
y=y*Math.sin(this.eleva) + z*Math.cos(this.eleva);
x*=fact;
y*=fact;
return {
x: x,
y: y
};
}

下面是我们使用球坐标系绘制的三维图形(三维投射到二维的图形)

 

http://www.cssass.com/blog/index.php/2011/976.html

分享到:
评论

相关推荐

    基于canvas 2D实现微信小程序自定义组件-环形进度条

    我们还需要实现一个`drawCircle`方法,使用canvas 2D API绘制环形进度条。这包括设置线条宽度、颜色,以及使用`arc()`方法绘制圆弧,`beginPath()`和`stroke()`完成路径的绘制。 ```javascript // component.js ...

    html5 canvas绘制3D地球旋转动画特效

    在这个“html5 canvas绘制3D地球旋转动画特效”中,我们将深入探讨如何利用HTML5 Canvas API来创建一个逼真的3D地球模型,并实现其旋转的动画效果。 首先,我们需要理解Canvas的基本用法。Canvas是一个矩形区域,在...

    使用HTML5 Canvas绘制 3D房间模型和人物动画特效

    在"使用HTML5 Canvas绘制3D房间模型和人物动画特效"这个主题中,我们将深入探讨如何利用Canvas技术构建逼真的3D环境,并实现动态的人物动画。 一、HTML5 Canvas基础 HTML5 Canvas是一个基于矢量图形的画布元素,...

    HTML5 Canvas 2D API 规范 1.0 中文版

    Canvas 2D API 规范 1.0 中文版闪亮登场,相信是您学习HTML5的canvas元素api的首选教材,里面有丰富的例子,并且均在IE9下成功测试。希望大家多多支持。 下面是目录: 摘要 2 1 介绍 2 1.1 术语: 2 2 CANVAS接口...

    Canvas绘制3D文字摇晃特效.zip

    "Canvas绘制3D文字摇晃特效.zip"这个压缩包包含了一种利用Canvas实现的3D文字摇晃动画效果,这在网页设计中可以增加交互性和视觉吸引力。 首先,3D文字效果通常通过CSS3的`transform`属性来实现,但在Canvas中,...

    用canvas属性实现3D烟花效果

    本篇文章将深入探讨如何利用JavaScript(简称js)和Canvas API来实现一个3D烟花绽放和旋转的视觉效果。 首先,让我们理解Canvas的基本工作原理。Canvas是一个基于矢量图形的画布,通过JavaScript来绘制和操作图像。...

    canvas实现遮罩效果

    在本文中,我们将深入探讨如何使用HTML5的Canvas API与CSS技术来实现一个创新的平行四边形图片遮罩效果。这个效果不仅能够为网页增添视觉吸引力,而且展示了Canvas和CSS的强大结合。以下是对实现这一效果所需技术的...

    html5 Canvas绘制2D背景 7款

    Canvas可以实现动态效果,例如通过定时器更新绘制函数,创建出流动、闪烁或其他动态背景。 第六种,我们可以结合图片和透明度来创建半透明背景,使背景元素看起来更为立体或模糊。 第七种,可能涉及到粒子系统。...

    canvas绘制ascii码表文字3D旋转特效

    - 使用`canvas`实现3D旋转需要对每个ASCII字符进行3D坐标转换,再将转换后的坐标映射到2D画布上。 4. **JavaScript实现**: - 首先,我们需要获取`canvas`元素并创建`2D渲染上下文`,这是绘图的基础。 - 然后,...

    HTML5 Canvas实现2D文字与3D图像粒子转换动画效果源码.zip

    在这个项目中,2D文字首先被绘制到Canvas上,然后通过粒子系统转化为3D效果。 粒子系统是一种常见的计算机图形学技术,它将复杂的效果分解为大量简单的个体——粒子,通过控制每个粒子的属性(如位置、大小、颜色、...

    HTML5基于Canvas实现的图片3D倒影效果源码

    Canvas API提供了一系列方法和属性,使得开发者可以直接在网页上绘制图像,实现动态交互的效果。 描述中提到的“图片3D倒影效果”是通过Canvas API实现的一种视觉特效。在3D空间中,物体通常会有其在平面上的投影,...

    html 5 Canvas绘制2D背景1

    在这个“HTML 5 Canvas绘制2D背景1”的主题中,我们将深入探讨如何使用Canvas API来创建吸引人的背景图案。 首先,让我们了解一下HTML5 Canvas的基本结构。Canvas是一个HTML元素,通过JavaScript来控制其内容。在...

    html5 canvas绘制逼真3D瀑布流动画特效

    这通常通过`requestAnimationFrame()`函数来实现,该函数会在浏览器准备好绘制下一帧时调用指定的回调函数,确保动画的平滑和性能优化。 3. **水体模拟**:逼真的水流效果需要考虑水的透明度、反射、折射和波纹等...

    HTML5 Canvas实现3D旋转物体动画及模糊发光特效源码

    通过调用Canvas API提供的方法,开发者可以绘制线条、形状、图像等,甚至可以实现复杂的动态效果和交互。在这个案例中,Canvas元素用于显示3D旋转物体,并实时更新其位置和角度,以实现连续的动画效果。 3D旋转物体...

    HTML5_Canvas_2D_API_规范_1.0_中文版

    本规范详细定义了一套用于二维图形绘制的Canvas API,这套API允许开发者在Web页面上实现即时模式的二维图形绘制功能。尤其适用于HTML5中定义的`&lt;canvas&gt;`元素,使网页开发人员能够在浏览器内直接进行图像处理与动态...

    html5 canvas酷炫的3D球形文字云动画特效

    - `requestAnimationFrame()`:用于在浏览器下一次重绘之前执行指定的函数,实现平滑的动画效果。 - 动态更新:每次动画帧时,需要重新计算所有文字的位置、角度和大小,以呈现动态效果。 - 时间戳和差值计算:...

    canvas实现3D图片画廊插件.rar

    1. **HTML5 Canvas**: HTML5的Canvas元素是一个可编程的2D图形绘制区域,通过JavaScript API,开发者可以直接在网页上绘制图形、动画和图像。这个3D图片画廊插件就是利用了Canvas的绘图功能来构建一个三维空间中的...

    原生js html5 canvas 3D云动画效果

    为了实现动画,我们需要在每一帧都更新云的位置、大小或旋转角度,然后使用`requestAnimationFrame`函数来创建连续的视觉效果: ```javascript var cloudX = 0; var cloudY = 50; var cloudSize = 100; var ...

    HTML5 Canvas 3D跳动Loading加载动画-可调节参数

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行2D和3D图形绘制,提供了丰富的API来创建交互式和动态的视觉效果。在这个特定的案例中,"HTML5 Canvas 3D跳动Loading加载动画-可调节参数"是一个...

    html5 canvas画布实现液体波浪动画效果

    在实现过程中,可能还需要考虑以下几点: 1. 波浪的碰撞检测:当波浪遇到画布边缘时,需要反射回来或者消失。 2. 多重波浪:可以创建多个独立的波浪实例,每个实例有自己的频率、振幅和相位,从而形成更复杂的波浪...

Global site tag (gtag.js) - Google Analytics