第一章作业背景

1.1 作业要求

编程实现一个多面体的旋转。在多面体的旋转过程中，对于不可见的线，用虚线表示；对于可见的线，用实线表示。

1.2 开发技术

本次作业采用前端技术实现，主要有：html、css、css3、javascript、Jquery。其中，html作为页面显示的骨架，css用来渲染页面样式、绘制立体图形，css3控制图形旋转等相关参数，javascript作为脚本语言来显式的操作页面各个dom的css样式，Jquery是javascript的框架，实现跨浏览器的js编写。

1.3 实现思路

①绘制6个正方形，利用css3把它们拼成一个立方体；
②使用css3的动画功能，设置立方体旋转；
③使用Jquery，读取立方体旋转的角度，当角度在一定阈值的时候，显式地控制立方体地12条边变为虚线或者变为实线。

第二章代码实现

2.1 绘制立方体

首先，编写html代码，绘制立方体的6个面：

<div class="box"><ul><li id="panel_1">1</li><li id="panel_2">2</li><li id="panel_3">3</li><li id="panel_4">4</li><li id="panel_5">5</li><li id="panel_6">6</li></ul>
</div>

代码块2-1 立方体html代码
之后，加上css的样式，对每个面进行一定量的偏移。此处需要数学的3D几何基础，计算每个面在X方向、Y方向、Z方向的偏移量，css代码如下：

*{margin: o;padding: 0;}
body{background: white;}
.box{width: 400px;height: 400px;margin: 200px auto;perspective: 1000px;
}
.box ul{width: 300px;height: 300px;margin: 48px;position:relative;transform-style: preserve-3d;animation: move 20s infinite linear;transform-origin:center center 150px ;
}
.box ul li{width: 300px;height: 300px;list-style: none;font-size: 20px;color: #000;text-align: center;line-height: 300px;position: absolute;
}
.box ul li:nth-of-type(2){ transform:translateX(300px) rotateY(-90deg) ;transform-origin: left;}
.box ul li:nth-of-type(3){ transform:translateX(-300px) rotateY(90deg);transform-origin: right;}
.box ul li:nth-of-type(4){ transform: translateY(-300px) rotateX(-90deg);transform-origin:bottom;}
.box ul li:nth-of-type(5){ transform: translateY(300px) rotateX(90deg);transform-origin:top;}
.box ul li:nth-of-type(6){ transform: translateZ(300px);}

代码块2-2 立方体css代码
最终立方体的效果图，如下所示：

图2-1 立方体静态效果

2.2 使立方体旋转

图2-1的立方体只是静态的，我们使用css3的动画控制，使得立方体的6个面绕Y轴转动。代码如下：

@keyframes move{from{transform:rotateY(0deg);}to{transform: rotateY(360deg);}
}

代码块2-3 立方体css3代码
旋转后的gif效果图如下：

图2-2 立方体旋转效果

2.3 实线虚线切换

图2-2的立方体中，所有的线都是实线，我们需要当立方体的边不可见时，把边变成虚线，可见时再变成实线。这里使用了Jquery，判断每个的旋转角度，当某个面旋转的角度大于0或者小于0时，表示这个面可见或者不可见，往往这个时候又伴随着某线边的可见与不可见，于是写下JS代码如下：

setInterval( ()=>{var deg_2 = parseFloat($("ul").css("transform").replace(/[^0-9\-.,]/g,'').split(',')[2])var deg_3 = parseFloat($("ul").css("transform").replace(/[^0-9\-.,]/g,'').split(',')[8])var deg_6 = parseFloat($("ul").css("transform").replace(/[^0-9\-.,]/g,'').split(',')[10])// 面3不可见时if(deg_3 <= 0){/***面2可见***/// 面2上下变实线$("li").eq(1).css('borderTop','2px solid black')$("li").eq(1).css('borderBottom','2px solid black')// 面3上下变虚线$("li").eq(2).css('borderTop','2px dashed black')$("li").eq(2).css('borderBottom','2px dashed black')// 面2可见时，面36之间线不可见$("li").eq(5).css('borderLeft','2px dashed black')}else{/***面3可见***/// 面3上下变实线$("li").eq(2).css('borderTop','2px solid black')$("li").eq(2).css('borderBottom','2px solid black')// 面2上下变虚线$("li").eq(1).css('borderTop','2px dashed black')$("li").eq(1).css('borderBottom','2px dashed black')// 面3可见时，面12之间线不可见$("li").eq(0).css('borderRight','2px dashed black') }if(deg_6 <= 0){/***面1可见***/// 面1上下变实线$("li").eq(0).css('borderTop','2px solid black')$("li").eq(0).css('borderBottom','2px solid black')// 面6上下变虚线$("li").eq(5).css('borderTop','2px dashed black')$("li").eq(5).css('borderBottom','2px dashed black')// 面1可见时，面12之间线可见$("li").eq(0).css('borderRight','2px solid black')// 面2可见时，26线可见$("li").eq(5).css('borderRight','2px dashed black')}else{/***面6可见***/// 面1上下变虚线$("li").eq(0).css('borderTop','2px dashed black')$("li").eq(0).css('borderBottom','2px dashed black')// 面6上下变实现$("li").eq(5).css('borderTop','2px solid black')$("li").eq(5).css('borderBottom','2px solid black')// 面6可见时，面36之间线可见$("li").eq(5).css('borderLeft','2px solid black')// 面3可见时，13线可见$("li").eq(2).css('borderRight','2px dashed black')}if(deg_2<=0){// 面3可见时，13线可见$("li").eq(2).css('borderRight','2px solid black')}else{// 面2可见时，26线可见$("li").eq(5).css('borderRight','2px solid black')}},20)

代码块2-4 立方体边虚实JS代码
此时，效果图如下：

图2-3 立方体最终旋转效果

2.4 动态切换视角

图2-3的立方体是在一定视角下来观看的，我们添加一个切换视点的函数，如下：

var per = 1000 ;$(document).mousewheel(function(event) {if(event.deltaY < 0 ){per = per >= 2000 ? 2000 : per+100}else{per = per <= 300 ? 300 : per-100}$('.box').css('perspective', per + 'px')console.log(per)
});

代码块2-5 立方体切换视角代码
当鼠标滚轮上下滑动时，可以拉近或者拉远视点。

第三章总结

作业实现起来难度较大，如果掌握一定的专业工具实现起来的效果、效率都会很高，用前端网页只能实现一些简单的功能。

掌握一些制作游戏的引擎、开发工具、概念应该很容易去做，耳熟能详的有UE4、Unity、光追、光捕、粒子等等。

在读研究生选方向前，我也有一腔热血，想投身于计算机图形学。凭什么电影《哪吒》的画质效果比不过皮克斯、迪士尼，为什么中国做不出属于自己的特效呢？后来才发现这条路太难走了，家里条件也不支持，最终妥协，选了NLP作为科研方向。

附代码及使用方式

总共有三个文件，一个index.html，一个jquery-3.3.1.min.js，一个jquery.mousewheel.min.js。后两个js文件网上自行下载，很容易找，下面附上index.html


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立方体</title><style>*{margin: o;padding: 0;}body{background: white;}.box{width: 400px;height: 400px;margin: 200px auto;perspective: 1000px;}.box ul{width: 300px;height: 300px;margin: 48px;position:relative;transform-style: preserve-3d;animation: move 20s infinite linear;transform-origin:center center 150px ;}.box ul li{width: 300px;height: 300px;list-style: none;font-size: 20px;color: #000;text-align: center;line-height: 300px;position: absolute;}.box ul li:nth-of-type(2){ transform:translateX(300px) rotateY(-90deg) ;transform-origin: left;}.box ul li:nth-of-type(3){ transform:translateX(-300px) rotateY(90deg);transform-origin: right;}.box ul li:nth-of-type(4){ transform: translateY(-300px) rotateX(-90deg);transform-origin:bottom;}.box ul li:nth-of-type(5){ transform: translateY(300px) rotateX(90deg);transform-origin:top;}.box ul li:nth-of-type(6){ transform: translateZ(300px);}@keyframes move{from{transform:rotateY(0deg);}to{transform: rotateY(360deg);}}</style>
</head>
<body><div class="box"><ul><li id="panel_1">1</li><li id="panel_2">2</li><li id="panel_3">3</li><li id="panel_4">4</li><li id="panel_5">5</li><li id="panel_6">6</li></ul></div></body>
<script src="./jquery-3.3.1.min.js"></script>
<script src="./jquery.mousewheel.min.js"></script>
<script>/*** 6与1相对，2与3相对* deg_2 第2面：为正可见， 为负不可见* deg_3 第3面：为正可见， 为负不可见* deg_6 第6面：为正可见， 为负不可见* * 当1个面可见时，这个面的右边框可见，为实线**/setInterval( ()=>{var deg_2 = parseFloat($("ul").css("transform").replace(/[^0-9\-.,]/g,'').split(',')[2])var deg_3 = parseFloat($("ul").css("transform").replace(/[^0-9\-.,]/g,'').split(',')[8])var deg_6 = parseFloat($("ul").css("transform").replace(/[^0-9\-.,]/g,'').split(',')[10])// 面3不可见时if(deg_3 <= 0){/***面2可见***/// 面2上下变实线$("li").eq(1).css('borderTop','2px solid black')$("li").eq(1).css('borderBottom','2px solid black')// 面3上下变虚线$("li").eq(2).css('borderTop','2px dashed black')$("li").eq(2).css('borderBottom','2px dashed black')// 面2可见时，面36之间线不可见$("li").eq(5).css('borderLeft','2px dashed black')}else{/***面3可见***/// 面3上下变实线$("li").eq(2).css('borderTop','2px solid black')$("li").eq(2).css('borderBottom','2px solid black')// 面2上下变虚线$("li").eq(1).css('borderTop','2px dashed black')$("li").eq(1).css('borderBottom','2px dashed black')// 面3可见时，面12之间线不可见$("li").eq(0).css('borderRight','2px dashed black') }if(deg_6 <= 0){/***面1可见***/// 面1上下变实线$("li").eq(0).css('borderTop','2px solid black')$("li").eq(0).css('borderBottom','2px solid black')// 面6上下变虚线$("li").eq(5).css('borderTop','2px dashed black')$("li").eq(5).css('borderBottom','2px dashed black')// 面1可见时，面12之间线可见$("li").eq(0).css('borderRight','2px solid black')// 面2可见时，26线可见$("li").eq(5).css('borderRight','2px dashed black')}else{/***面6可见***/// 面1上下变虚线$("li").eq(0).css('borderTop','2px dashed black')$("li").eq(0).css('borderBottom','2px dashed black')// 面6上下变实现$("li").eq(5).css('borderTop','2px solid black')$("li").eq(5).css('borderBottom','2px solid black')// 面6可见时，面36之间线可见$("li").eq(5).css('borderLeft','2px solid black')// 面3可见时，13线可见$("li").eq(2).css('borderRight','2px dashed black')}if(deg_2<=0){// 面3可见时，13线可见$("li").eq(2).css('borderRight','2px solid black')}else{// 面2可见时，26线可见$("li").eq(5).css('borderRight','2px solid black')}},20)var per = 1000 ;$(document).mousewheel(function(event) {if(event.deltaY < 0 ){per = per >= 2000 ? 2000 : per+100}else{per = per <= 300 ? 300 : per-100}$('.box').css('perspective', per + 'px')console.log(per)});
</script>
</html>

【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现相关推荐

计算机图形学图形旋转_计算机图形学翻译
计算机图形学图形旋转计算机图形学| 翻译 (Computer Graphics | Translations) Transformation techniques mean to modify th ...
计算机图形学图形旋转_计算机图形学中的平板显示
计算机图形学图形旋转平板显示器 (Flat Panel Display) It is generally known as FPD, the flat-panel display is such a ...
计算机图形学图形旋转_计算机图形学中的旋转
计算机图形学图形旋转计算机图形学| 回转 (Computer Graphics | Rotation) Rotation is a type of transformation that is ve ...
计算机图形学-二维图形变换笔记总结与代码实战
文章目录 1.向量基础知识 2.图形坐标系 3.二维图形变换原理 4.二维图形几何变换 5.窗口视区变换基本二维几何变换代码二维复合变换实战-五星红旗绘制 1.向量基础知识为什么向量如此重要:在 ...
计算机图形学画三角形、圆等（入门代码）
[要求] 实现自己的三角形线框显示算法,能够将三角形的各个顶点经过坐标变换后变换到屏幕坐标,并以连线的方式将三角形的各个边显示出来.要求连线不使用Windows API,而是利用自己的2D Line算 ...
【计算机图形学课程】一.MFC基本绘图函数使用方法
这是最近我<计算机图形学>课程实践编程课介绍的相关知识,主要是想通过MFC C++绘图,让学生体会下图形学相关的编程及简单的图形绘制,同时非常佩服学生的想象力,他们做得真的不错.希望这篇基 ...
几行代码搞定Flash应用的多语言实时切换问题
在<WPF/Silverlight的数据绑定设计的真糟糕>文中批评了WPF/SL的数据绑定机制,拿的是Flex的数据绑定与其对比.本文介绍应用Flex的数据绑定来解决一个实际问题--多语言 ...
计算机图形学学习笔记（七）：二维图形变换：平移，比例，旋转，坐标变换等
接上文计算机图形学学习笔记(六):消隐算法:Z-buffer,区间扫描线,Warnock,光栅图形学小结在图形学中,有两大基本工具:向量分析,图形变换.本文将重点讲解向量和二维图形的变换. 5. ...
计算机图形学 | 实验六：旋转立方体
计算机图形学 | 实验六:旋转立方体计算机图形学 | 实验六:旋转立方体 Z-缓冲 GLM函数库 PVM矩阵 PVM矩阵的使用华中科技大学<计算机图形学>课程 MOOC地址:计算机图形 ...

【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现

第一章作业背景

1.1 作业要求

1.2 开发技术

1.3 实现思路

第二章代码实现

2.1 绘制立方体

2.2 使立方体旋转

2.3 实线虚线切换

2.4 动态切换视角

第三章总结

附代码及使用方式

总共有三个文件，一个index.html，一个jquery-3.3.1.min.js，一个jquery.mousewheel.min.js。后两个js文件网上自行下载，很容易找，下面附上index.html

【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现相关推荐

最新文章

热门文章

【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现

第一章 作业背景

1.1 作业要求

1.2 开发技术

1.3 实现思路

第二章 代码实现

2.1 绘制立方体

2.2 使立方体旋转

2.3 实线虚线切换

2.4 动态切换视角

第三章 总结

附代码及使用方式

总共有三个文件，一个index.html，一个jquery-3.3.1.min.js，一个jquery.mousewheel.min.js。后两个js文件网上自行下载，很容易找，下面附上index.html

【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现相关推荐

最新文章

热门文章

第一章作业背景

第二章代码实现

第三章总结