آموزش Three.js

saalek110 · Jun 8, 2021

آموزش Three.js

بحث های قبلی:
در:

opengl در مجیدآنلاین

پستهای صفحه سوم webgl بود که به تاپیک مجزایی منتقل شد: https://forum.majidonline.com/threads/webgl.240860

forum.majidonline.com

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

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

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

Free Website Hosting

Completely free website hosting with PHP, MySQL and no ads on your site!

infinityfree.net

می توانید استفاده کنید.

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

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

عکس و تکسچر برای بازیهای 3 بعدی

عکس و تکسچر برای بازیهای 3 بعدی

عکس و تکسچر برای بازیهای 3 بعدی در این تاپیک عکسها و دیگر ریسورس لازم برای محیط های 3 بعدی را ارسال می کنیم.

forum.majidonline.com

saalek110 · Jun 8, 2021

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

Three.js Fundamentals

Your first Three.js lesson starting with the fundamentals

threejsfundamentals.org

saalek110 · Jun 8, 2021

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

saalek110 · Jun 8, 2021

اولین برنامه از:

three.js Tutorial => Hello world!

Learn three.js - Hello world!

riptutorial.com

در کد زیر:

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 · Jun 8, 2021

نتیجه اجرا:

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

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

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

saalek110 · Jun 8, 2021

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

saalek110 · Jun 8, 2021

شرح کد: شاید کد بالا کد مینیمم برای ساخت یک شکل در 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();

saalek110 · Jun 8, 2021

توصیه: اگر جاوا اسکریپت هیچی بلد نیستید یک نگاهی بکنید تا کدهای جاوا اسکریپت برایتان آشناتر باشد.
چون در این تاپیک قصد آموزش Html و جاوا اسکریپت را نداریم. آموزشهای زیادی در این مورد هست.
اگر انگلیسی راحت هستید این سایت را ببینید:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

خوبیش اینه که تمرین آنلاین هم داره و کار شما راحت تره. آموزش Html هم داره.
ولی لازم نیست در این دو مبحث تا آخر بروید. مقداری را که نیاز است فقط نگاه کنید.

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

saalek110 · Jun 8, 2021

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

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

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

saalek110 · Jun 8, 2021

زیبایی و قدرت three js را در این نمونه ها مشاهده کنید:

three.js examples

threejs.org

دانلود:

https://github.com/mrdoob/three.js/archive/master.zip

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

saalek110 · Jun 8, 2021

برنامه با مکعب چرخش دار:

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>

منبع:

Three.js introductory study notes 01: create a simple cube scene - Programmer Sought

Three.js introductory study notes 01: create a simple cube scene, Programmer Sought, the best programmer technical posts sharing site.

www.programmersought.com

ادیت 3 سال بعد:
برنامه اجرا نشد. بعد body مثل برنامه قبل من اینو گذاشتم و اجرا شد:

JavaScript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>

البته گفته بود برنامه دوم نیاز داره فایل three.js کنارش باشه ولی فایل را که نگفتی از کجا دانلود کنیم. آهان دو پست بعد گفته. ولی باید اینجا می گفت دو پست بعد میگم.

saalek110 · Jun 8, 2021

توجه کنید در تابع animate به مکعب در دو جهت چرخش داده:

JavaScript:

       cube.rotation.x += 0.01;
       cube.rotation.y += 0.01;

saalek110 · Jun 9, 2021

به این خط نگاه کنید:

HTML:

<script type="text/javascript" src="js/three.js"></script>

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

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

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

saalek110 · Jun 9, 2021

ولی نگاه کنید به این سه خط:

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 خط دارند یک چیز را می سازند.
من برنامه را اجرا کردم. یک مکعب سبز در حال چرخش است که با توجه به جهت نور واکنش دارد. شکل زیر:

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

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

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

saalek110 · Jun 9, 2021

و توجه کنید به انتهای کد یعنی:

JavaScript:

        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        scene.add( spotLight );

می بیند که یک نور تعریف شده و به scene افزوده شده.

saalek110 · Jun 9, 2021

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

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

saalek110 · Jun 9, 2021

تفاوت زبانهای سمت کلاینت و زبانهای سمت سرور:

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

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

saalek110 · Jun 9, 2021

شما می توانید به سایت زیر بروید:

GitHub - mrdoob/three.js: JavaScript 3D Library.

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

github.com

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

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

saalek110 · Jun 9, 2021

Drawing lines:

three.js docs

threejs.org

saalek110 · Jun 9, 2021

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

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

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

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