您现在的位置是：首页 > 其他

当前栏目

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

计算机

2023-03-14 22:52:09 时间

第一章作业背景

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>

猜你喜欢

Littlefs原理分析--Commit机制（二）
OpenHarmony数据转码应用开发实战（上）
在 React 中使用 Redux 的四种写法
微软或将推出瘦客户端 PC：搭载 Windows 365 云电脑服务，价格便宜但有广告
手把手教你对抓取的文本进行分词、词频统计、词云可视化和情感分析
Vanilla OS：不只是原味 GNOME 的 Ubuntu
如何分析产品新功能的效果？
Ahooks 中那些控制“时机”的 Hook 都是怎么实现的？
Linux运维之json文件操作
如何通过 chroot 恢复 Arch Linux 安装
通向优秀数据分析师的六个阶梯
Content-Visibility 再探究，完美替代 Lazyload？
使用面向对象和功能性方法来重构Java应用
关于 find 命令的15个超级有用的例子
如何在 Linux 命令行中删除指定扩展名的文件
春节大数据：节前返乡客流增长超40%，带火低线城市“微旅游”
JVM系列之JVM垃圾回收算法相关知识
数据分析八大模型：同期群模型
一日一技：如何让自己的工具函数在Python全局可用？
数据发现在数据网格架构中的重要性

zl程序教程

当前栏目

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

第一章作业背景

1.1 作业要求

1.2 开发技术

1.3 实现思路

第二章代码实现

2.1 绘制立方体

2.2 使立方体旋转

2.3 实线虚线切换

2.4 动态切换视角

第三章总结

附代码及使用方式

相关文章

当前栏目

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

第一章 作业背景

1.1 作业要求

1.2 开发技术

1.3 实现思路

第二章 代码实现

2.1 绘制立方体

2.2 使立方体旋转

2.3 实线虚线切换

2.4 动态切换视角

第三章 总结

附代码及使用方式

相关文章

第一章作业背景

第二章代码实现

第三章总结