آموزش Three.js

[saalek110]

در سورس زیر با لمس و کشیدن در صحنه می رویم جلو:


سورس عکس زیر ،عنوانش map control است:




اگر دو انگشتی لمس کنیم می توانیم زاویه را هم تغییر دهیم.


کنترل جالبی است کلا.



حالا کلی سورس دیگه هم هست.

 

[saalek110]

3DC.io

3DC.io | Build Your Story

3dc.io

مدلهایی که با سایت بالا ساخته میشه گویا با three.js خوب سازگاره:



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

یک کلبه با نام مجیدآنلاین ، در همون سایت ساخت مدل ساختم. عکس:





در اون نرم افزار اندرویدی ۶۰ مگایی که در تاپیک قبلا معرفی کردم ، یک obj ساختم ولی در برنامه نتوانست لود بشود.

 

[saalek110]

یک سورس دیگر ، three.js دارد برای لود obj همراه فایل mtl که فکر کنم مخفف متریال باشه.

three.js/examples/webgl_loader_obj_mtl.html at master · mrdoob/three.js

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

github.com

من در بلندر ، شکل زیر را ساختم و در بلندر اکسپورت کردم به obj ، که به من علاوه بر فایل دارای پسوند obj فایل دارای پسوند mtl را هم داد.

در کد صفحه بالا ، بعد تنظیم مسیر three.js اول برنامه ، داخل کد مسیر و اسم فایلهای obj و mtl را می دهید.
کد کوتاهی هم داره ، خودتان در لینک بالا نگاه کنید.



پس علاوه بر شکل ، ظاهر را هم میشه منتقل کرد.

قسمتی از کد که اسم فایل را وارد می کنید ، اینه:

new MTLLoader()
                    .setPath( 'models/obj/male02/' )
                    .load( 'male02.mtl', function ( materials ) {

                        materials.preload();

                        new OBJLoader()
                            .setMaterials( materials )
                            .setPath( 'models/obj/male02/' )
                            .load( 'male02.obj', function ( object ) {

                                object.position.y = - 0.95;
                                object.scale.setScalar( 0.01 );
                                scene.add( object );

                            }, onProgress );

                    } );

 

[saalek110]

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

یک مقدار فعالیت من روی نرم افزارهای سازنده مدل ، چه کامپیوتری ، چه اندرویدی است
همچنین دانلود مدل ها از سایتها و تست اون.

چون حالا که میشه مدل ها را وارد محیط برنامه کرد ، باید روی ساخت و پیدا کردن مدل ها هم کار کنیم.

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

 

[saalek110]

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

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

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

یک روش دیگر اینه که محل قرارگیری و سایز همه آبجکتها را در دیتابیس وارد کنیم و با اسم هر آبجکت بشود دیتابیس را ادیت کرد. مثلا یک لیست از آبجکت ها بیاید. ولی اگر تعداد آبجکت ها خیلی زیاد باشه ، به یاد ماندن اسم اونها غیرممکن میشه. خود three.js برنامه تاچ آبجکت ها را دارد. با نگاه به اون سورس ها احتمالا روشهایی بشود پیاده کرد.

 

[saalek110]

    let object ;  let object2 ;

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

    // manager

                function loadModel() {

                    object.traverse( function ( child ) {

                        if ( child.isMesh ) child.material.map = texture;

                    } );

                    object.position.y =0.2;
                    object.position.z =-2;
                    object.position.x =-32;
                    object.scale.setScalar( 0.1 );
                    scene.add( object );

                    render();

                }

                const manager = new THREE.LoadingManager( loadModel );
                // texture
                const textureLoader = new THREE.TextureLoader( manager );
                const texture = textureLoader.load( 'textures/brick_diffuse.jpg', render );
                texture.colorSpace = THREE.SRGBColorSpace;
                // model
                function onProgress( xhr ) {}
                function onError() {}

                const loader = new OBJLoader( manager );
                loader.load( 'model/model4.obj', function ( obj ) {

                    object = obj;

                }, onProgress, onError );

  
  
  
  
  
  
function loadModel2() {

                    object2.traverse( function ( child ) {

                        if ( child.isMesh ) child.material.map = texture;

                    } );

                    object2.position.y =0.2;
                    object2.position.z =-2;
          object2.position.x =-52;
                    object2.scale.setScalar( 0.1 );
                    scene.add( object2 );

                    render();

                }

                const manager2 = new THREE.LoadingManager( loadModel2 );
                // texture
                const textureLoader2 = new THREE.TextureLoader( manager2 );
                const texture2 = textureLoader2.load( 'textures/brick_diffuse.jpg', render );
                texture2.colorSpace = THREE.SRGBColorSpace;
                // model
                function onProgress( xhr ) {}
                function onError() {}

                const loader2 = new OBJLoader( manager2 );
                loader2.load( 'model/model3.obj', function ( obj ) {

                    object2 = obj;

                }, onProgress, onError );

حالا دو کلبه در زمین خود داریم:




اشیا را وقتی تمامش را از یک تکسچر استفاده کنیم جالب نمیشه.میشه موقع ساخت مدل ، تکسچر هر قسمت را هم بهش داد.
و می توانید از فرمت های مدل دیگر هم استفاده کنید. فرمت های قوی تری هم وجود دارد. Three.js انواع لودر دارد.


نکته کد بالا اینه که اگر دو متغیر همنام داشته باشیم برنامه هنگ می کنه ، و من تمام متغیرهایی که لازم بود را یک ۲ جلویش گذاشتم. بالای برنامه هم object2 را معرفی کردم.
برای شکل سوم ، تمام این ۲ ها را باید ۳ کرد و برای شکل چهارم ، همه را باید ۴ کرد.
شاید هم بشه آرایه ای از این متغیرها تعریف کرد. فکر کنم بشه این کارو کرد و روش منطقی تری از روش بالاست.

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