rotate 3D [初识篇]

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

随着前端技术发展，尤其是html5中canvas和svg的应用，开始让web也可以轻易的渲染出各种绚丽的效果。

本篇讨论的是基于rotate（旋转）的3d效果的初识。在canvas的getContext(‘2d’)下利用一些变换来模拟。webGL是后话，本篇暂不讨论。

【简要原理】
由于仍是在2d下模拟，所以所谓的3d最终还是要降到2d的层面来。
在坐标上的表现就是，3d的界面应该是有x,y,z三向坐标，2d的就只有x，y二向。
那么怎么把3d的z向坐标降到和2d的x，y相关联起来，就是关键。

要在2d的界面上展现3d的z方向的层次感，需要一个视井。
相信学过绘画的同学应该很清楚，要画透视或者有层次关系的多个物体时。在最开始建模的时候老师都会教先根据观察角度“打格子”，把物体的大小层次关系大概先模拟出来。
格子打出来其实就是由近及远的“井”字形。

最直观的感觉就是可以想象一张拍很长走廊的照片，照片里的走廊一定是近处宽，随着距离的拉远，走廊宽度一定是渐窄，看起来就像是两条斜线向远处延伸。

于是，在编码过程中，根据这个原理，不难想象到原本的z坐标要表现在2d的x，y坐标上，其影响就是会影响xy坐标的偏移。
同时还有物体大小的变化，透明度（模糊度）的变化，这些应该容易想到。

【demo1】
下面就以一个小球来展现改变z坐标的位置对其2d界面下的x，y位置和大小的影响。

// 创建一个小球    
var ball = createBall(ballR);
//添加到舞台
stage.addChild(ball);
//取得画布中心位置
vpx = canvas.width/2;
vpy = canvas.height/2;

// 取得当前鼠标相对中心偏移距离 xpos， ypos 
stage.addEventListener('mousemove', function (x, y) {
    xpos = x - vpx;
    ypos = y - vpy;
});
// 用键盘上下键改变z坐标的位置
document.addEventListener('keydown', function (e) {
    if (e.keyCode == 38) zpos += 5;
    if (e.keyCode == 40) zpos -=5;
}, false)
 
// 每帧刷新时的改变
stage.onRefresh = function () {
    // 将z坐标扁平化
    var scale = focalLength/(focalLength + zpos);
    // 将扁平後z坐标对x，y的影响给小球坐标
    ball.x = vpx + xpos*scale;
    ball.y = vpy + ypos*scale;
    // 对小球大小的影响
    ball.width  = ballR*2*scale;
 
    document.getElementById('scale').innerHTML = scale;
}
 
stage.start();

代码很简单，都舔了注释。
 

<!DOCTYPE html><html><style><br />html {overflow:hidden}<br />body {position: absolute; margin:0; padding:0;width:100%; height:100%}<br />canvas {display:block;border:2px solid #ccc; margin:10px auto;}<br />p {text-align: center; font-size:12px;color:#454545;}<br /></style><script src=”http://hongru.github.com/js/JCanvas.js”></script><br /><canvas id=”canvas” width=”600″ height=”400″></canvas><p>键盘上下键改变z方向深度。 当前scale：<span id=”scale”></span></p><script><br /> var canvas = document.getElementById(‘canvas’);<br /> var stage = new Stage(canvas);<br /> var createBall = function (radius) {<br /> radius = (radius === undefined) ? 20 : radius;<br /> return new Sprite(stage.ctx, {<br /> x: 0,<br /> y: 0,<br /> width: radius*2,<br /> draw: function () {<br /> this.ctx.beginPath();<br /> this.ctx.arc(0, 0, this.width/2, 0, Math.PI*2, true);<br /> this.ctx.closePath();<br /> this.ctx.fillStyle = ‘rgba(0,0,0,’+ Math.min(1, this.width/(2*radius)) +’)’;<br /> this.ctx.fill();<br /> }<br /> });<br /> };</p> <p> var initialize = function () {<br /> var xpos = 0,<br /> ypos = 0,<br /> zpos = 0,<br /> focalLength = 250,<br /> ballR = 20,<br /> vpx,<br /> vpy;<br /> var ball = createBall(ballR);<br /> stage.addChild(ball);<br /> vpx = canvas.width/2;<br /> vpy = canvas.height/2;</p> <p> stage.addEventListener(‘mousemove’, function (x, y) {<br /> xpos = x – vpx;<br /> ypos = y – vpy;<br /> });<br /> document.addEventListener(‘keydown’, function (e) {<br /> if (e.keyCode == 38) zpos += 5;<br /> if (e.keyCode == 40) zpos -=5;<br /> }, false)</p> <p> stage.onRefresh = function () {<br /> var scale = focalLength/(focalLength + zpos);<br /> ball.x = vpx + xpos*scale;<br /> ball.y = vpy + ypos*scale;<br /> ball.width = ballR*2*scale;</p> <p> document.getElementById(‘scale’).innerHTML = scale;<br /> }</p> <p> stage.start();<br /> };</p> <p> initialize();</p> <p></script></html> </p> <p>

【demo2】
可能上面的demo还太简单，不能看出所谓的3d的效果。按照上面的思路，可以给x方向添加一个旋转的效果，结合z方向对其的影响就可以看出一点所谓3d的效果了。

// 获取画布中心        
vpx = canvas.width/2;
vpy = canvas.height/2;
 
// 根据鼠标位置计算选装角度（速度）
stage.addEventListener('mousemove', function (x, y) {
    angleY = (x - vpx) * .001;
});
        
// 主旋转函数        
function rotateY(ball, angleY) {
    // 把角度三角函数化，以便看起来是绕圆旋转
    var cosy = Math.cos(angleY),
        siny = Math.sin(angleY),
    // 把 z方向影响算进来
        x1 = ball.xpos * cosy - ball.zpos * siny,
        z1 = ball.zpos * cosy + ball.xpos * siny;
    ball.xpos = x1;
    ball.zpos = z1;

    // z坐标扁平化，并赋给小球影响
    var scale = focalLength / (focalLength + ball.zpos);
    ball.x = vpx + ball.xpos * scale;
    ball.y = vpy + ball.ypos * scale;
    ball.width = ballR*2*scale;
}

代码实际运行如下：
　　

<!DOCTYPE html><html><style><br />html {overflow:hidden}<br />body {position: absolute; margin:0; padding:0;width:100%; height:100%}<br />canvas {display:block;border:2px solid #ccc; margin:10px auto;}<br />p {text-align: center; font-size:12px;color:#454545;}<br /></style><script src=”http://hongru.github.com/js/JCanvas.js” ></script><br /><canvas id=”canvas” width=”600″ height=”400″></canvas><p></p><script ><br /> var canvas = document.getElementById(‘canvas’);<br /> var stage = new Stage(canvas);<br /> var createBall = function (radius) {<br /> radius = (radius === undefined) ? 20 : radius;<br /> return new Sprite(stage.ctx, {<br /> x: 0,<br /> y: 0,<br /> width: radius*2,<br /> draw: function () {<br /> this.ctx.beginPath();<br /> this.ctx.arc(0, 0, this.width/2, 0, Math.PI*2, true);<br /> this.ctx.closePath();<br /> this.ctx.fillStyle = ‘rgba(0,0,0,’+ Math.min(1, this.width/(2*radius)) +’)’;<br /> this.ctx.fill();<br /> }<br /> });<br /> };</p> <p> var initialize = function () {<br /> var focalLength = 250,<br /> ballR = 20,<br /> ballN = 20,<br /> balls = [],<br /> vpx = 0,<br /> vpy = 0,<br /> angleY = 0;</p> <p> for (var i=0; i<ballN; i++) {<br /> var ball = createBall(ballR);<br /> stage.addChild(ball);<br /> ball.xpos = Math.random() * 200 – 100;<br /> ball.ypos = Math.random() * 200 – 100;<br /> ball.zpos = Math.random() * 200 – 100;<br /> balls.push(ball);<br /> }<br /> vpx = canvas.width/2;<br /> vpy = canvas.height/2;</p> <p> stage.addEventListener(‘mousemove’, function (x, y) {<br /> angleY = (x – vpx) * .001;<br /> });</p> <p> function rotateY(ball, angleY) {<br /> var cosy = Math.cos(angleY),<br /> siny = Math.sin(angleY),<br /> x1 = ball.xpos * cosy – ball.zpos * siny,<br /> z1 = ball.zpos * cosy + ball.xpos * siny;<br /> ball.xpos = x1;<br /> ball.zpos = z1;</p> <p> var scale = focalLength / (focalLength + ball.zpos);<br /> ball.x = vpx + ball.xpos * scale;<br /> ball.y = vpy + ball.ypos * scale;<br /> ball.width = ballR*2*scale;<br /> }</p> <p> stage.onRefresh = function () {<br /> for (var i=0,ball; ball=balls[i]; i++) { rotateY(ball, angleY) }<br /> }</p> <p> stage.start();<br /> };</p> <p> onload = initialize;</p> <p></script></html> </p> <p>

恩，本来这篇还想多写点的，但是肚子饿了，木办法，先去填肚子了，明天还要上班….

今天中秋，虽然迟了点，还是祝各位园友佳节快乐吧。

下篇继续…