AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-02-23 830
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现

第一章 作业背景

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代码

  最终立方体的效果图，如下所示：

image.png

  图2-1 立方体静态效果

2.2 使立方体旋转

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

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

  代码块2-3 立方体css3代码

  旋转后的gif效果图如下：

c418d13475e14bbcba859f7605d604b3.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代码

  此时，效果图如下：

image.gif

  图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>


文章标签：
JavaScript
前端开发
开发工具
图形学
自然语言处理
征途黯然。
目录
相关文章
生信分析笔记
|
数据可视化
绘制热图时看不出颜色差异？四种方式转换处理使结果显而“易”见
绘制热图时看不出颜色差异？四种方式转换处理使结果显而“易”见
生信分析笔记
19554 2
LALA
|
1月前
FW怎么做立体箭头? fireworks三维立体箭头的制作方法
我们在FW绘制图形时，有时候经常需要用到立体的效果。该怎么回执箭头并添加立体效果呢？下面我们就来看看详细的教程。
LALA
29 1
FW怎么做立体箭头? fireworks三维立体箭头的制作方法
baker_zhuang
|
2月前
Threejs绘制方形管道
这篇文章讲解了如何在Three.js中创建和渲染方形管道，包括建立几何体、应用材质以及进行场景中的定位和渲染等步骤。
baker_zhuang
49 0
Threejs绘制方形管道
baker_zhuang
|
2月前
ThreeJs绘制线
这篇文章详细说明了如何使用Three.js来绘制线条，包括创建线几何体、设置材质以及将线条添加到3D场景中的具体步骤。
baker_zhuang
37 1
龙腾九州
|
C语言
创建各类三角形图案
C 语言实例 - 创建各类三角形图案
龙腾九州
68 1
韩曙亮
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )（一）
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )（一）
韩曙亮
287 0
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )（一）
前端杂货铺
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体（轨道控制器、坐标轴辅助器、移动缩放旋转）
【Three.js入门】渲染第一个场景及物体（轨道控制器、坐标轴辅助器、移动缩放旋转）
前端杂货铺
304 0
Matlab科研工作室
|
机器学习/深度学习 传感器 算法
基于Matlab绘制带阴影区域的线附完整代码
基于Matlab绘制带阴影区域的线附完整代码
Matlab科研工作室
404 0
茶底世界之下
效果处理（内阴影、外阴影、外发光、内发光、投影）
效果处理（内阴影、外阴影、外发光、内发光、投影）
茶底世界之下
380 0
效果处理（内阴影、外阴影、外发光、内发光、投影）
长沙红胖子Qt
|
计算机视觉
Qt实用技巧：图形视图框架中图元将矩形边界改为不规则边界（用于选取和碰撞）
Qt实用技巧：图形视图框架中图元将矩形边界改为不规则边界（用于选取和碰撞）
长沙红胖子Qt
476 0