سلام،وقت بخیر
چطوری تو بعضی سایت ها آبجکت هایی هستند مثل تصاویر سه بعدی که 360 درجه هستند! گاها مثلا با افکت ماوس میچرخند و هر جهتش نشون داده میشه؟ اونارو چطوری به HTML اضافه و استفاده میکنند و فرمتشون چیه؟؟! من جاوااسکریپت اینا تا حدی بلدی اگه لازم ب دونیتن اون مبحث باشه.
سلام با کتابخانه threejs میتونید اشیا و افکت های سه بعدی شگفت انگیزی رو در وب ایجاد کنید
اگر منظورتون تصاویر پارانومای 360 دجه هست، اکثرا از krpano یا سرویس های گوگل استفاده می شود که می تونید نسخه کرک شده krpano رو از لینک های زیر دانلود کنید.
https://www.downloadha.com/software/krpano/
https://p30download.ir/fa/entry/73647/
همچنین میشه فقط با سی اس اس کار های سه بعدی انجام داد مثل کد زیر:
مخصوص اعضای ویژه 
<!DOCTYPE html>
<html>
<head>
<title>3D Text Animation</title>
<style>
body {
min-height: 199px;
height: 100vh;
margin: 0;
background: #000;
}
.stage {
height: 200px;
width: 400px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
perspective: 9999px;
transform-style: preserve-3d;
}
.layer {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: anim 5s infinite alternate ease-in-out -7.5s;
animation-fill-mode: forwards;
transform: rotateY(40deg) rotateX(33deg) translateZ(0);
-webkit-font-smoothing: antialiased;
}
.layer:after {
font: 150px/0.95 sans-serif;
content: "top learn";
white-space: pre;
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top: 50px;
color: whitesmoke;
letter-spacing: -2px;
text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}
.layer:nth-child(1):after {
transform: translateZ(0px);
}
.layer:nth-child(2):after {
transform: translateZ(-1.5px);
}
.layer:nth-child(3):after {
transform: translateZ(-3px);
}
.layer:nth-child(4):after {
transform: translateZ(-4.5px);
}
.layer:nth-child(5):after {
transform: translateZ(-6px);
}
.layer:nth-child(6):after {
transform: translateZ(-7.5px);
}
.layer:nth-child(7):after {
transform: translateZ(-9px);
}
.layer:nth-child(8):after {
transform: translateZ(-10.5px);
}
.layer:nth-child(9):after {
transform: translateZ(-12px);
}
.layer:nth-child(10):after {
transform: translateZ(-13.5px);
}
.layer:nth-child(11):after {
transform: translateZ(-15px);
}
.layer:nth-child(12):after {
transform: translateZ(-16.5px);
}
.layer:nth-child(13):after {
transform: translateZ(-18px);
}
.layer:nth-child(14):after {
transform: translateZ(-19.5px);
}
.layer:nth-child(15):after {
transform: translateZ(-21px);
}
.layer:nth-child(16):after {
transform: translateZ(-22.5px);
}
.layer:nth-child(17):after {
transform: translateZ(-24px);
}
.layer:nth-child(18):after {
transform: translateZ(-25.5px);
}
.layer:nth-child(19):after {
transform: translateZ(-27px);
}
.layer:nth-child(20):after {
transform: translateZ(-28.5px);
}
.layer:nth-child(n+10):after {
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.25);
}
.layer:nth-child(n+11):after {
-webkit-text-stroke: 15px dodgerblue;
text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}
.layer:nth-child(n+12):after {
-webkit-text-stroke: 15px #0077ea;
}
.layer:last-child:after {
-webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}
.layer:first-child:after {
color: #fff;
text-shadow: none;
}
@keyframes anim {
100% {
transform: rotateY(-40deg) rotateX(-43deg);
}
}
</style>
</head>
<body>
<div class="stage">
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
</div>
</body>
</html>سلام و عرض ادب، وقتتون بخیر باشه. استاد این تصاویر و آبجکت های سه بعدی رو چطور ب سایتمون اضافه کنیم؟ من خیلی در این مورد گشتم اما چیز ب درد بخوری پیدا نشد همشون به کتابخانه جاوا اسکریپت ربط پیدا میکرد که باید three.js اینا استفاده کنیم که راستیتش اصلا حتی یدونه آموزش فارسی هم در این مورد نیس!
این چیزی که من میخام ی چیز خیلی خیلی ساده و در حد ابتدایی باشه که بشه به تگ HTML اضافه کرد و بعد بهش انیمیشن css اینا تعریف کرد که مثلا بچرخه و این آیکون سه بعدی رو حتی از کجا باید دان کرد,اینترنت این چیزی رو که میخام تو گوگل نمیاره،مربوط نیس
خیلی کمک با ارزشی میکنید اگه دقیقتر با منبع و اینا راهنماییم کنید
بله، اما اون فقط ی متن بود ،که تو content نوشته شده، اما چیزی که من نیاز دارم مخدود ب متن نباشه مثلا یک شئ مثل تصویر توپ،جام،سکه،یا هرچیزی که از هر زوایه ای انیمیشن داشته باشه بچرخه و نمایش داده شه، مثلا همین آیکون های نئومورفیسم سه بعدی هستند فقط از یک زاویه ثابت است چیزی که من لازم داره،تصویر یا شئ باشه که مثل نمونه کد دوستمون یجا ثابت اما بچرخه نشون داده بشه،,,,,
مثلا تصاویر پایین نمونه کاراکتر های سه بعدی تو انیمیشن سازی تو برنامه های Maya,3Dmax هستند، حالا سوال بنده اینه که این خروجی ها چی هستند و چطوری میشه تو سایت نمونه دانلود و استفاده کرد ی گوشه خودش بچرخه، دیگه خودمون با three.js اینا طراحی نکنیم ،تو اینترنت هرچی زدم نتیجه مربوط پیدا نکردم شایدم من خوب سرچ نمیتونم بکنم
سلام دوست اگر می خواید بدون کد نویسی چنین اجسام سه بعدی رو در وبسایتتون اضافه کنید میتونید از ابزار spline استفده کنید. این هم لینک وبسایتش:
این ابزار کاملا به صورت گرافیکی هست و به راحتی می تونید اشیائ سه بعدی رو به وبسایتتون اضافه کنید.( در صورتی که بعد از export بهتون یه لینک داد می تونید با تگ iframe داخل سایتتون ازش استفاده کنید)
ولی نسخه رایگانش زیر کارتون یه واتر مارک کوچیک هم میندازه که به سایت اصلیش لینک میشه.
پیشنهاد من کتاب خونه threejs هست(خود spline هم با threejs نوشته شده)، درسته آموزش فارسیش نیست ولی خب یه دوره بهتون معرفی می کنم که واقعا بی نظیره و 95 دلار قیمتشه ولی تو لینک زیر می تونید آخرین آپدیتش رو رایگان دانلود کنید و لذت ببرید!
https://downloadly.ir/elearning/video-tutorials/three-js-journey-the-ultimate-three-js-course/
من خودم در حال مشاهده همین دوره هستم، مدرس از خیلی از دوره های فارسی بهتر مفهوم رو جا میندازه! پس نگران اینکه زبانش انگلیسیه نباشید:)
موفق باشید
