آموزش Three.js

saalek110

Well-Known Member
آموزش Three.js

بحث های قبلی:
در:
من در مورد webgl گفتم و در انتهای بحث گفتم:
(( برای شروع کار با WebGL پیشنهاد می کنم با Library های آماده شروع کنید. در حال حاضر دو Library برجسته WebGL به نام های Three.js و Babylon.js هستند که می توانید در قدم اول از آنها استفاده کنید.))


اگر دوست دارید نگاهی به اون تاپیک بیاندازید.

اگر می خواهید برنامه ها روی هاست خود آپلود کنید از :
می توانید استفاده کنید.

یک ادیتور نیاز دارید تا کدها را با رنگ های مناسب نشان دهد و بتواند با پسوند دلخواه ذخیره کند. سرچ کنید و دانلود کنید.



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


عکس و تکسچر برای بازیهای 3 بعدی
 
آخرین ویرایش:

saalek110

Well-Known Member
a1.jpg

عکس بالا به عنوان مقدمه آموزش است. بعدا با دیدن کدها متوجه می شوید این اسامی چیست.

 

saalek110

Well-Known Member
a2.jpg
به این عکس توجه کنید. بعدا در کد متوجه می شوید این روابط چیست.
 

saalek110

Well-Known Member
اولین برنامه از:

در کد زیر:
HTML:
<html>
<head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
    <script>
        // Our JavaScript will go here.
    </script>
</body>
جای اضافه کردن کدهای جاوا اسکریپ را نشان داده.
اگر Html بلد نیسیتد کمی آموزش های Html را نگاه کنید تا مقداری آشنا شوید.

حالا قسمت جاوا اسکریپت که بایددر اون قسمت اضافه کنید:
JavaScript:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();
 

saalek110

Well-Known Member
نتیجه اجرا:

a3.jpg


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



من عمدا یک خط کد در انتهای کدها اضافه کردم تا شما بتوانید کلیک راست کنید و سورس صفحه را ببنید.
b0.jpg

در برنامه اول به یک فایل three.js در سایتی لینک داده ولی در برنامه دوم انتظار داشته اون فایل در پوشه ای کنارش باشه. در برنامه دوم خواهید دید.
 
آخرین ویرایش:

saalek110

Well-Known Member
در صفحه فوق یک pdf هست که من ضمیمه می کنم. خواستید نگاهی بیاندازید.
 

پیوست ها

  • three-js.pdf
    3.2 مگایابت · بازدیدها: 7

saalek110

Well-Known Member
شرح کد: شاید کد بالا کد مینیمم برای ساخت یک شکل در three js باشد.
من فعلا قصد ندارم همه کد را شرح بدهم. با دیدن برنامه های بعدی خودتان می فهمید هر قسمت کارش چیست.
یعنی می خواهیم با زبان کد با هم صحبت کنیم. نه با زبان فارسی.

ولی نگاه کنید ببینید مکعب از دو چیز ساخته شده geometry و material این گونه روابط را توجه کنید. برای همین اول آموزش اون عکسها را گذاشتم تا بدانید در three js روابط چه شکلی است.
JavaScript:
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

و در کد بالا می بینید که geometry و material در خطوط قبلی ساخته شده اند.
و بعد مکعب به scene اضافه شده.و در بالا دیدید که scene در خط اول کدهای جاوا اسکریپت ایجاد شده بود یعنی این خط:
JavaScript:
var scene = new THREE.Scene();


a6.jpg
 
آخرین ویرایش:

saalek110

Well-Known Member
توصیه: اگر جاوا اسکریپت هیچی بلد نیستید یک نگاهی بکنید تا کدهای جاوا اسکریپت برایتان آشناتر باشد.
چون در این تاپیک قصد آموزش Html و جاوا اسکریپت را نداریم. آموزشهای زیادی در این مورد هست.
اگر انگلیسی راحت هستید این سایت را ببینید:
خوبیش اینه که تمرین آنلاین هم داره و کار شما راحت تره. آموزش Html هم داره.
ولی لازم نیست در این دو مبحث تا آخر بروید. مقداری را که نیاز است فقط نگاه کنید.

ولی اگر جاوا اسکریپت هم بلد نباشبد با دیدن کدها کم کم آشنا می شوید و من خودم بعضی قسمت ها را شرح می دهم.
 

saalek110

Well-Known Member
خوبی برنامه بالا مینیمم بودنش بود
ولی به نظر من زیادی مینیمم بود. و نتیجه اجرای جالبی نداشت چون اصلا نمیشد فهمید اون مکعب است و مربع نیست.
و دیگه اینکه فقط رنگ زده شده بود و تکسچر نداشت.
مبحث three js بسیار زیباتر و شیرین تر از این برنامه است. اجازه ندهید کمبودهای برنامه اول دید شما را به three js خراب کند. برنامه آموزشی بود تا با کدها آشنا بشوید.

پس اگر مکعب تکسچر داشت و متحرک بود بسیار جذاب تر بود.
تکسچر مثل شکل زیر که یک جعبه چوبی می سازد.

crate.gif

یا مثلا تکسچر طرح سنگ یا بتون.
این توضیحات را دادم تا برای برنامه های بعدی آماده شوید.
 

saalek110

Well-Known Member
برنامه با مکعب چرخش دار:
JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d</title>
    <script type="text/javascript" src="js/three.js"></script>
<style type="text/css">
    body{
        margin:0;
    }
    
    canvas{
        width:100%;
        height:100%;
    }
    
</style>
</head>
    
<body>
    <script type="text/javascript">
    //Scenes
        var scene = new THREE.Scene();
        
    //The camera innerWidth/innerHeight includes the viewport width and height of the scroll bar
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1 ,1000);
        camera.position.z = 5;
    
    //Renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
    //Renderer end
        
    //object
       var geometry = new THREE.BoxGeometry(1, 1, 1);
       var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );
       var material = new THREE.MeshBasicMaterial({color:0x00ff00});// MeshBasicMaterial is a material that does not react to light sources
      
       var material = new THREE.MeshLambertMaterial( { color:0x00ff00} );//MeshLambertMaterial The material that responds to light MeshLambertMaterial Note that this word is Lambert instead of Lamber
       var cube = new THREE.Mesh( geometry, material );
       scene.add( cube );
     //Object end
        
    //Render
      // renderer.render(scene, camera); fixed objects
        
    //Animation
        
       function animate() {
       cube.rotation.x += 0.01;
       cube.rotation.y += 0.01;
       renderer.render( scene, camera);
       requestAnimationFrame( animate );
       }
       animate();
        
    //light source
        
        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        scene.add( spotLight );
        
    //Light source end         
    </script>
</body>
</html>

منبع:
 

saalek110

Well-Known Member
توجه کنید در تابع animate به مکعب در دو جهت چرخش داده:
JavaScript:
       cube.rotation.x += 0.01;
       cube.rotation.y += 0.01;
 

saalek110

Well-Known Member
به این خط نگاه کنید:
HTML:
<script type="text/javascript" src="js/three.js"></script>

برنامه نیاز به یک فایل با پسوند js دارد که در پوشه js باید باشد.

فایل را ضمیمه می کنم. البته بایذ از حالت زیپ خارج کنید تا قابل استفاده باشد. در پوشه js کنار فایل برنامه باشد.

از این به بعد به این فایل با نام فایل یک مگایی خواهم پرداخت. فایل زیپ شده 200 کیلو است ولی بعد آنزیپ می شود حدود 1 مگا.
 

پیوست ها

  • three.zip
    231 کیلوبایت · بازدیدها: 8
آخرین ویرایش:

saalek110

Well-Known Member
ولی نگاه کنید به این سه خط:

JavaScript:
 var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );
       var material = new THREE.MeshBasicMaterial({color:0x00ff00});// MeshBasicMaterial is a material that does not react to light sources

       var material = new THREE.MeshLambertMaterial( { color:0x00ff00} );//MeshLambertMaterial The material that responds to light MeshLambertMaterial Note that this word is Lambert instead of //Lamber
می بینید که 3 تا متریال تعریف شده و جلوی آنها گفته فرقشان چیه.

اولین می دانید اگر کد بالا اجرا شود خط سوم اجرا می شود و دو خط قبلی ندیده گرفته می شود چون هر 3 خطا دارند یک چیز را می سازند.
من برنامه را اجرا کردم. یک مکعب سبز در حال چرخش است که با توجه به جهت نور واکنش دارد. شکل زیر:

a14.gif


اگر خط سوم را با گذاشتن دو ممیز پشت سر هم در اول خط به حالت کامنت در آورید می بینید که مکعب دیگر به نور واکنشی ندارد.

جاوا اسکریپت:کامنت توضیحاتی برای برنامه نویس است و جز کد نیست. در جاوا اسکریپت از دو ممیز برای ساخت کامنت استفاده می شود.


می توانید در پایین صفحه کلیک راست کنید و سورس را ببنید و یا کپی کنید.
 
آخرین ویرایش:

saalek110

Well-Known Member
و توجه کنید به انتهای کد یعنی:
JavaScript:
        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        scene.add( spotLight );
می بیند که یک نور تعریف شده و به scene افزوده شده.
 

saalek110

Well-Known Member
تا اینجا دو برنامه بحث شد.
حالا خودتان دو برنامه را مقایسه کنید.
ببنید برنامه دوم چه چیزهایی دارد که برنامه اول ندارد. ما می خواهیم این طوری یاد بگیریم یعنی با مقایسه کدها.
یعنی نمی خواهیم خط به خط کدها را شرح بدهیم. بلکه با مقایسه برنامه های متوالی خودبخود می فهمیم که هر خط کد کارش چیه.

البته بعدا خطوط برنامه را شرح خواهیم داد ولی فعلا نمی خواهم در شرح ها غرق شوید.
 

saalek110

Well-Known Member
تفاوت زبانهای سمت کلاینت و زبانهای سمت سرور:

زبان php یک زبان سمت سرور است و شما نمی توانید با دیدن کدهای صفحه با کلیک راست کردن کدهای php را ببنید.
ولی جاوا اسکریپت یک زبان سمت کلاینت است. پس می توانید با کلیک راست کدهای html و جاوا اسکریپت را بخوانید.

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

saalek110

Well-Known Member
شما می توانید به سایت زیر بروید:

و بسته را دانلود کنید.
در پوشه examples می توانید مثالها را ببینید.

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

saalek110

Well-Known Member
a7.jpg

مدیریت ریسورس:
نکته: نباید برای هر شکل یک متریال ساخت. اگر صدتا شکل مشابه دارید باید همه از یک متریال استفاده کنند. مثلا اگر در برنامه ده تا الوار دارید متریال هر ده تا می تواند یک متریال باشد.

a5.jpg


این به علت اینه که با ساخت هر چیزی منابعی مصرف میشود.

نکته دوم:
اگر از تکسچر استفاده می کنید نیازی نیست ده تا دیوار بسازید و به هر کدام اون متریال را نسبت دهید. بلکه باید از repeat تکسچر استفاده کنید.
این هم بخاطر استفاده درست از منابع کامپیوتر است. بعدا کد repeat تکسچر را خواهم گفت. فقط در اینجا که اول کار است خواستم بگویم درسته که هر شکل نیاز به یک متریال دارد ولی دلیل نداره متریال اختصاصی داشته باشه. پس تا می توانید از متریال های اشتراکی استفاده کنید و در اشیای وسیع مثل چمن کاری یک زمین بزرگ نیایید صفحات متعدد بسازید بلکه یک صفحه می سازید با repeat تکسچر در دو بعد.

d7.jpg



اگر این دو نکته را رعایت کنید ابدا برنامه شما سنگین یا کند نمی شود حتی اگر وسعت آن huge یعنی خیلی بزرگ باشد.
 
آخرین ویرایش:

جدیدترین ارسال ها

بالا