يك صفحه فرود WebGL 3D ايجاد كنيد

ايجاد يك صفحه فرود WebGL 3D يكي از راه هاي ايجاد اولين تصور عالي در مخاطبان است. با استفاده از WebGL ، مي توانيد محتواي تصويري با كيفيت بالا را درست در مرورگر تحويل دهيد. شما مي توانيد آن را بدون پلاگين يا هر نوع نياز خاص انجام دهيد. همه مرورگرهاي مدرن از WebGL ، همراه با دستگاه هاي تلفن همراه و رايانه هاي لوحي پشتيباني مي كنند. WebGL شما را قادر مي سازد صحنه هاي سه بعدي باورنكردني ايجاد كنيد. اين مي تواند به تجارب webVR نيرو ببخشد ، فيلمبرداري كند ، سايه هاي گرافيكي ايجاد كند و موارد ديگر.

در اين آموزش ، شما مي توانيد يك صفحه فرود براي استوديوي فيلم داستاني ، Relative Studios ايجاد كنيد. اين مفهوم نمايشي و جذاب از نظر بصري است ، زيرا يك شيء مرموز در پاسخ به تعامل ماوس منعكس و مي چرخد. ذرات در اطراف آن پيچيده و تغيير مي كنند و هنگام حركت تغيير رنگ مي دهند. شما مي توانيد از طريق هر يك از مراحل ايجاد اين صفحه تعاملي كار كنيد ، به شما امكان مي دهد تا پروژه هاي خود را براي خود ايجاد كنيد (براي الهام بخشيدن بيشتر ، پست ما را در بهترين ).

شما فقط از ويژگي هاي شامل Three.js ، كتابخانه قدرتمند ارائه سه بعدي براي وب استفاده خواهيد كرد. مي توانيد از تصاوير خود به عنوان بافت استفاده كنيد تا آن را منحصر به فرد كنيد. همچنين مي توانيد در مورد استفاده از مش ، نورپردازي و بافت براي تقويت جزئيات سطح ، نحوه استفاده از نقشه هاي محيطي و نحوه اضافه كردن لايه ها براي عمق و علاقه ياد بگيريد.

بايد بيش از حد كافي براي شروع كار وجود داشته باشد ، و انرژي زيادي براي پروژه هاي بعدي شما داشته باشد.

01. تنظيم اوليه HTML

براي شروع ، به مكاني نياز داريد تا صحنه سه بعدي خود را ببينيد. يك فايل HTML اساسي تنظيم كنيد و پيوندي به three.js وارد كنيد. اين يا مي تواند به صورت خارجي ميزباني شود يا از مخزن three.js در اينجا اضافه شود :. مقداري CSS ساده اضافه كنيد تا صفحه به صورت كامل روي صفحه و حذف هر نوار پيمايشي انجام شود. پرونده خود را در وب سرور محلي خود ذخيره كنيد ، بنابراين مي توانيد در صورت آماده شدن براي تست HTML را ارائه دهيد. براي شروع كد زير را اضافه كنيد.


<html>
<head>
	<title>Relative Studiostitle>
	<script src=”libs/three.min.js”>script>
	<style>
		html, body { margin: 0; padding:0; overflow: hidden; }
	style>
head>
<body>
	<script>
		// 3D Code goes here
	script>
body>
html>

02. انواع جهاني را اضافه كنيد

به ساير متغيرها براي مراجعه به منابع در طول بقيه كد نياز خواهيد داشت. اين موارد را اكنون تنظيم كنيد. اين شامل آرايه اي براي نگه داشتن ذرات ، متغير "t" براي Tetrahedron ، ماوس ، raycaster و چراغ هاي شما خواهد بود.

در داخل برچسب هاي اسكريپت خود ، با اضافه كردن كد زير شروع كنيد.

// vars
var num=30;
var objects=[];
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var light,t;

03. اضافه كردن يك صحنه ، دوربين و رندر

ابتدا بايد صحنه اي را اضافه كنيم كه شامل تمام اشياء ما باشد. سپس ما دوربيني را اضافه مي كنيم كه بتواند درون آن حركت كند ، برپايي ، كج شدن و حركت كردن در صورت نياز. صفت اول زمينه ديد است. دوم نسبت ابعاد است. همچنين مي توانيد هواپيماهاي قطع كننده نزديك و دور را در صفات سوم و چهارم تعريف كنيد. آخر ، رندر را اضافه كنيد ، كه دسته اي از صحنه را به بوم مي كشاند.

در برچسب اسكريپت كد زير را اضافه كنيد.

// create camera
var camera = new THREE.PerspectiveCamera
( 65, window.innerWidth/window.innerHeight, 
0.1, 1000 );
camera.position.set(0.0,0.0,5);
// create a scene
var scene = new THREE.Scene();

// create renderer
var renderer = new THREE.WebGLRenderer(
{antialias:true});
renderer.setSize( window.innerWidth, window.
innerHeight );
document.body
              
                 ديجيتال وب 
                  جمعه ۲۹ آذر ۹۸ | ۰۹:۵۵  
                  ۷۵ بازديد  
                
                  ۰ نظر

يك صفحه فرود WebGL 3D ايجاد كنيد

طراحي سايت و بهينه سازي سايت و گرافيك