rotate 3D [初识篇]

rotate 3D [初识篇]随着前端技术发展,尤其是html5中canvas和svg的应用,开始让web也可以轻易的渲染出各种绚丽的效果。本篇讨论的是基于rotate(旋转)的3d效果的初识。在canvas的getContext

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

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();

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

 

【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;
}

代码实际运行如下:
  

 

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

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

下篇继续…

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166782.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 西尔斯罗巴克公司案例分析_巴宝莉滑铁卢

    西尔斯罗巴克公司案例分析_巴宝莉滑铁卢这几天看到网上对WannaCry勒索病毒讨论得沸沸扬扬,不免有些感触。其实该病毒的这次爆发,完全可以类比N年前“熊猫烧香”爆发的情况。也就是国内杀软纷纷歇菜,让本来就没什么技术含量的病毒横行于世。所不同的是,这次在病毒横行的时候,假设有技术爱好者出来质疑国内杀软的查杀水平,那么该杀软厂商的公关人员就会第…

  • matlab fmincon优化,matlab fmincon优化问题[通俗易懂]

    matlab fmincon优化,matlab fmincon优化问题[通俗易懂]程序出现如下问题,—options.MaxFunEvals=400(thedefaultvalue).论文时间紧张,有时间的同学可以看一下吗?谢谢x0=[100;100;100;100];A=[];b=[];Aeq=[1,1,1,1];beq=[2000];VLB=[300;400;0;0];VUB=[600;1000;500;500];[x,fval]…

  • datagrip 2022 激活码 mac(JetBrains全家桶)「建议收藏」

    (datagrip 2022 激活码 mac)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~9AAG1RZ8NI-eyJsaWNlb…

  • restful接口定义_主板上的spi接口接什么

    restful接口定义_主板上的spi接口接什么由于在实际项目中碰到的restful服务,参数都以json为准。这里我获取的接口和传入的参数都是json字符串类型。发布restful服务可参照文章http://www.cnblogs.com/jav

  • supervisor添加进程_monitor进程

    supervisor添加进程_monitor进程Supervisor简介Supervisor超级用户,监管员Supervisor。超级用户是一个负责管理和维护网络的用户。supervisor是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具。可以很方便的监听、启动、停止、重启一个或多个进程。用supervisor管理的进程,当一个进程意外被杀死,supervisor监听到进程死后,会自动将它重启,很方便的做到进程自动恢复的功能,不再需要自己写shell脚本来控制。1.安装PIPw

  • matlab自带的插值函数interp1的几种插值方法

    matlab自带的插值函数interp1的几种插值方法插值法    插值法又称“内插法”,是利用函数f(x)在某区间中已知的若干点的函数值,作出适当的特定函数,在区间的其他点上用这特定函数的值作为函数f(x)的近似值,这种方法称为插值法。如果这特定函数是多项式,就称它为插值多项式。线性插值法    线性插值法是指使用连接两个已知量的直线来确定在这两个已知量之间的一个未知量的值的方法。    假设我们已知坐标(x0,y0)与…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号