هنر سه بعدی با استفاده از کدنویسی
1397/06/19 15:14 , بهزاد ناظمی

هنر سه بعدی با استفاده از کدنویسی

این روزها فناوری بدون انتظار برای ما در حال رشد و بهبود است.

طراحی کاربری ( UI ) روز به روز بهبود می یابد. بنابراين طراحي نرمال HTML براي توسعه دهنده پيشرفته كافي نيست، زيرا او نياز بيشتری دارد تا UI را كامل تر كند. به عنوان مثال، انتقال به طراحی 3 بعدی.

 بنابراین در این روش دیدگاه (چشم انداز) ملاک است که می تواند به ما و دیگران کمک کند.

چشم انداز (Perspective) چیست؟

روش کار به این صورت است که از طریق آن می توانیم با استفاده از تنظیم الگوی رنگی، سایه، عمق و شکل آنها نسبت به اشیاء دیگر، می توانیم اشیاء 3D را به یک سطح 2D تبدیل کنیم. در حال حاضر، این روزها برخی از وبسایت ها از Perspective استفاده کرده اند و از طرفی هم متناسب با موبایل هستند. چشم انداز در طراحی، عکاسی، ساخت ویدیو و طراحی بازی استفاده می شود. چشم انداز در اصل به معنی نگاه کردن  یا نگاه کردن به یک شی بود. معنای چشم انداز در هنر شامل ایجاد عمق است. بنابراین، ما احساس واقعیت را با فضا و عمق دادن بر روی چیزهایی که هیچ کدام را نداریم، انتقال می دهیم.

ViewPoint چیست؟

ViewPoint موقعیتی است که ما از چیزها می بینیم؛ با توجه به این دیدگاه، چشم انداز به دیدگاه و موقعیت اشاره دارد.

اشیای دور خیلی کوچک هستند و اشیای اطراف آن بزرگ هستند و با اشیای دور همپوشانی دارند. بنابراین، به این طریق، معنای چشم انداز، تعیین دیدگاه است که بهترین ارتباط یک موضوع را با مخاطب دارد.

بنابراین استفاده از چشم انداز در طراحی چیست؟

با استفاده از چشم انداز، ما فضا و حس عمق بخشیدن را در UI خود توسعه می دهیم. بیاد داشته باشید که هدف ما ایجاد یک رابط کاربری بهتر است. حتی چیزهایی که واقعی نیستند به نوعی واقعی هستند. بنابراین، صرف نظر از اینکه شما یک توسعه دهنده UX-UI هستید یا نه، باید بدانید که مخاطبان آن را چگونه می بینند و این چیزی است که همه متخصصان هنرهای تجسمی با آن مواجه هستند.

پس چگونه شروع کنیم؟

 دو حامل برای شروع وجود دارد:

  • Parent
  • Child

 کد: Index.html

<!DOCTYPE html>  
<html>  
<head>  
<title>Page Title</title>  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="stylesheet" href="./main.css">  
</head>  
<body>  
<h1>Prespective Styling <strong>3D</strong></h1>  
<hr>  
<div class="parent flex-pc">  
<div class="child flex-pc rotate">  
<div class="text front">1</div>  
</div>  
</div>  
</body>  
</html>  

 

Code: main.css

.flex-pc{  
display: flex;  
justify-content: center;  
align-items: center;  
}  
.parent{  
position: relative;  
height: calc( 100vh - 94px );  
transition: 0.3s all ease-in-out;  
/* for 3d styling these two lines must insert  */  
transform: perspective(593px); /*1*/  
transform-style: preserve-3d; /*2*/  
perspective-origin: top;  
}  
.child{  
background-color: #00808080;  
width: 400px;  
height: 400px;  
display: flex;  
justify-content: center;  
align-items: center;  
position: absolute;  
font-size: 84px;  
color: white;  
box-shadow: inset 0px 0px 143px 0px black;  
}  
.rotate{  
transform: rotateY(40deg);  
}  

والد دارای خواص CSS است

"transform-style: preserve-3d",  
"transform: perspective(n px);  
where 0 < n < infinity 

مقدار بزرگتر از n مساوی فاصله بیشتر از شیء است.

 خروجی

هرچه بیشتر مقادیر چرخش و دید را تغییر دهید، اثر بیشتری خواهید دید.

 در اینجا کد برای بلوک انیمیشن ساده با ویژگی های چشم انداز ساده است.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<title>Page Title</title>  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<style>  
html, body{  
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  
box-sizing: border-box;  
margin: 0;  
padding: 0;  
}  
.flex-pc{  
display: flex;  
justify-content: center;  
align-items: center;  
}  
.grand-parent{  
position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
}  
.parent{  
position: relative;  
height: calc( 100vh - 94px );  
transform: rotateX(0deg) rotateY(0deg);  
transform-style: preserve-3d;  
transition: 0.3s all ease-in-out;  
}  
.child{  
background-color: #00808080;  
width: 400px;  
height: 400px;  
display: flex;  
justify-content: center;  
align-items: center;  
position: absolute;  
font-size: 84px;  
color: white;  
box-shadow: inset 0px 0px 143px 0px black;  
}  
.child.front{  
transform: translateZ(200px) ;  
}  
.child.back{  
transform: rotateX(-180deg) translateZ(200px) ;  
}  
.child.left{  
transform: rotateY(90deg) translateZ(200px) ;  
}  
.child.right{  
transform: rotateY(-90deg) translateZ(200px) ;  
}  
.child.up{  
transform: rotateX(90deg) translateZ(200px) ;  
}  
.child.down{  
transform: rotateX(-90deg) translateZ(200px) ;  
}  
</style>  
</head>  
<body>  
<h1>Prespective Styling <strong>3D</strong></h1>  
<hr>  
<div class="grand-parent">  
<div class="parent flex-pc">  
<div class="child down">6</div>  
<div class="child up">5</div>  
<div class="child right">4</div>  
<div class="child left">3</div>  
<div class="child back">2</div>  
<div class="child front">1</div>  
</div>  
</div>  
<script>  
cube = document.querySelector(".grand-parent .parent");  
let valX = 0;  
let valY = 0;  
setInterval(()=>{  
style.transform=`rotateX(${valX}deg) rotateY(${valY}deg)`;  
valX+=5;  
valY+=5;  
}, 50);  
</script>  
</body>  
</html>  

خروجی

هرچه بیشتر یاد بگیرید، بیشتر به یک متخصص تبدیل می شوید.

 

   برگرفته از : https://www.c-sharpcorner.com/

 

جالب است بخوانید

40 نکته‌ی جذاب در مورد گوگل که احتمالا نمی‌دانستید

هوش مصنوعی گوگل (AI) همانند یک انسان در موبایل ! آیا باید نگران بود ؟

اسکریپت های CGI کدامند و چگونه وب سایت ها را بهبود می بخشند

آیا از کتاب های برنامه نویسی خسته شده اید؟ این 3 راه را امتحان کنید

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات