CSS+HTML<3D无人机>
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS+HTML<3D无人机>相关的知识，希望对你有一定的参考价值。
参考技术A主要是因为前几天买了一架大疆无人机（😁这里没算打广告啊，大疆就是好~~~），然后公司这几天也不是很忙，所以就想着搞一个无人机模型。起初是想学下3D Max建一个无人机模型，后来不知道怎么。就想试试看看html能不能拼凑一个，虽然很费时间，但是我成功了！！
这里基本就是用的css+html的一些基础知识，我只不是通过vue框架来写的。主要用于组件化的封装，这样就会节省时间了。下面主要跟大家说下涉及到的知识点和实现思路~~~~
知识点：
1.css+html，涉及了一点js（主要是用来控制无人机的移动用的）；
2.transform-style: preserve-3d; css的3d旋转属性；
3.perspective css的景深属性；
4.filter: drop-shadow ； css的滤镜阴影穿透；
5.svg的path路径填充和描边；
6.animation css动画；
实现思路：
主要讲一下怎么拼成的模型吧。其实并不难，主要是耗时间，慢慢的拼凑。分为3个部分：
机桨( yepian.vue )，机身( shenti.vue )，机架( jijia.vue )，合成部份( index.vue )。
机架和机桨可以合成一个组件，然后其它三个就是公用的了，只需要旋转下角度就可以了。
这里我直接把机桨和机架合到了一起，方便后面的直接使用。
JavaScript--面向对象--猜拳游戏
//html代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>猜拳游戏</title> <link rel="stylesheet" href="css/game.css"></link> </head> <body> <div id="game"> <ul class="panel"> <li> <p class="name">我：name</p> <div class="anim user"></div> </li> <li> <p class="name">电脑：name</p> <div class="anim comp"></div> </li> </ul> <div class="op"> <button id="play" onclick = "game.Caiquan();">开始</button> </div> <div id="text" class="text">请开始游戏...</div> <ul id="guess" class="guess"> <li> <div class="guess0" onclick="game.verdict(0)">石头</div> </li> <li> <div class="guess1" onclick="game.verdict(1)">剪刀</div> </li> <li> <div class="guess2" onclick="game.verdict(2)">布</div> </li> </ul> </div> <script type="text/javascript" src="js/game.js"></script> </body> </html>
//css样式(字体：迷你简卡通)
*{
margin:0px;
padding:0px;
font-family:‘迷你简卡通‘;
font-size:28px;
}
html,body{
width:100%;
height:100%;
background:rgba(244, 184, 202, 1);
}
ul{
list-style:none;
}
#game{
width:800px;
height:600px;
margin:auto;
top:20%;
}
#game ul{
width:100%;
height:415px;
}
#game ul li{
width:50%;
height:100%;
float:left;
text-align:center;
}
#game ul li .anim{
width:223px;
height:337px;
border:10px solid #ff6699;
border-radius:50%;
margin:20px auto 0;
background-position:center;
background-repeat:no-repeat;
}
.user{
background:url(‘../img/readyl.png‘);
}
.comp{
background:url(‘../img/readyr.png‘);
}
#game .op{
width:100%;
text-align:center;
}
#game .op button{
width:200px;
height:60px;
border:10px solid #ff6699;
background:rgb(253, 217, 227);
border-radius:50%;
outline:none;
cursor:pointer;
font-weight:bold;
}
#game .op button:hover{
border-color:#ff0000;
background-color:#ff0000;
font-size:36px;
color:rgb(253, 217, 227);
}
#game .op button.disabled{
border-color:#bbb;
color:#bbb;
background-color:#ccc;
font-size:28px;
cursor:default;
}
#game .guess{
width:220px;
height:100%;
position:fixed;
top:0px;
left:0px;
display:none;
}
#game ul.guess li{
width:100%;
height:32%;
}
#game ul.guess li div{
width:100%;
height:90%;
border:10px solid #ff6699;
border-radius:50%;
background-position:center;
background-repeat:no-repeat;
cursor:pointer;
background-color:rgba(244, 184, 202, 1);
}
#game ul.guess li div:hover{
background-color:#ff6699;
color:#fff;
}
div.guess0{
background-image:url(‘../img/0.png‘);
}
div.guess1{
background-image:url(‘../img/1.png‘);
}
div.guess2{
background-image:url(‘../img/2.png‘);
}
#game div.text{
margin-top:20px;
text-align:center;
font-size:50px;
font-weight:bold;
}
//js代码
Function.prototype.extend = function( fn ){
for( var attr in fn.prototype ){
this.prototype[attr] = fn.prototype[attr];
}
}
//父级构造函数用于继承,共有属性
function Caiquan( name ){
this.name = name;
this.point = 0;
}
//用于继承下面衍生，共有方法
Caiquan.prototype.guess = function(){}
//继承父，玩家的构造函数
function User( name ){
Caiquan.call(this,name);
}
User.extend( Caiquan );
User.prototype.guess = function( point ){
return this.point = point;
}
//电脑的构造函数
function Comp( name ){
Caiquan.call(this,name);
}
Comp.extend( Caiquan ) ;
//电脑的猜拳方法，随机
Comp.prototype.guess = function(){
return this.point = Math.floor( Math.random()*3 );
}
//裁判构造函数
function Game( u , c ){
this.text = document.getElementById(‘text‘);
this.btn = document.getElementById("play");
this.user = u;
this.comp = c;
this.classN =document.getElementsByClassName(‘name‘);
this.guess = document.getElementById("guess");
this.anim = document.getElementsByClassName("anim");
this.num = 0;
this.init();
this.tiemr = null;
}
Game.prototype.Caiquan = function(){
this.textValue( ‘请出拳...‘ );
this.BtnDisable();
this.start();
this.guess.style.display = ‘block‘;
}
//怎么玩
Game.prototype.start = function(){
var This = this;
this.timer = setInterval(function(){
This.anim[0].className = ‘anim user guess‘ +( ( This.num ++ ) % 3 );
This.anim[1].className = ‘anim comp guess‘ + ( ( This.num ++ ) % 3 ) ;
},500)
}
//初始化名字
Game.prototype.init = function(){
this.classN[0].innerHTML = ‘我:‘ + this.user.name;
this.classN[1].innerHTML = ‘电脑:‘ + this.comp.name;
}
//提示面板区域的修改
Game.prototype.textValue = function( val ){
this.text.innerHTML = val;
}
//按钮失效
Game.prototype.BtnDisable = function(){
if( this.btn.disabled ){
this.btn.disabled = false;
this.btn.className =‘‘;
this.btn.innerHTML = ‘再来一次‘
}else{
this.btn.disabled = true;
this.btn.className =‘disabled‘;
}
}
Game.prototype.verdict = function( point ){
clearInterval(this.timer);
var userGu = user.guess(point);
var compGu = comp.guess();
this.anim[0].className = ‘anim user guess‘ + userGu;
this.anim[1].className = ‘anim comp guess‘ + compGu;
var res = userGu - compGu;
switch (res){
case 0:
this.textValue(‘平局!!!‘)
break;
case 1:
case -2:
this.textValue(‘lose~~~‘);
break;
case 2:
case -1:
this.textValue(‘win!!!‘)
break;
}
this.guess.style.display = ‘none‘;
this.BtnDisable();
}
var user = new User( ‘锐雯‘ );
var comp = new Comp( ‘拉克丝‘ );
var game = new Game( user , comp );
以上是关于CSS+HTML<3D无人机>的主要内容，如果未能解决你的问题，请参考以下文章
Pix4Dmapper无人机航测之3D数据处理工作站硬件配置方案