آموزش Three.js

saalek110

Well-Known Member
تغییرات اعمال شده روی بازی 2 تا با کنترلهای جدید کار کند:
متغیرهای اول بازی:
JavaScript:
                         //---- control camera ----
                        var my_control=0;
                        var rotation=0;
                        var flag=0;
                        //-------------------------
اون flag برای اینه داخل تابع my_function کدها آبشاری اجرا نشوند و وقتی یک خط اجرا شد از تابع خارج شود. حرکت به جلو را من 5 سرعته کردم. یعنی با هر بار زدن دکمه جلو 20 تا سرعت اضافه می شود.

قسمتی که در تابع animate اضافه می شود:
JavaScript:
camera.rotation.y=rotation;
camera.position.x += Math.sin(rotation) * my_control;
camera.position.z += Math.cos(rotation) * my_control;

تابع ما:
JavaScript:
function myFunction(x) {
   if (x==1) {
        flag=0;
       if(my_control==0     && flag==0)    {   my_control=-20;    flag=1; }
       if(my_control==-20   && flag==0)    {   my_control=-40;    flag=1; }
       if(my_control==-40   && flag==0)    {   my_control=-60;    flag=1; }
       if(my_control==-60   && flag==0)    {   my_control=-80;    flag=1; }
       if(my_control==-80   && flag==0)    {   my_control=-100;    flag=1; }
   }//x=1

   if (x==2) { my_control=20; }
   if (x==3) { my_control=0; }

    if (x==4) {  rotation +=0.2618;   }
    if (x==5) { rotation -=0.2618;    }

}

و دکمه های بازی:
JavaScript:
        <img src="textures/buttons/left.png" height="90" size="90" alt="Img" onclick="myFunction('4')">
        <img src="textures/buttons/up.png" height="90" size="90" alt="Img" onclick="myFunction('1')">
        <img src="textures/buttons/stop.png" height="90" width="90" alt="Img" onclick="myFunction('3')">
        <img src="textures/buttons/down.png" height="90" size="90" alt="Img" onclick="myFunction('2')">
         <img src="textures/buttons/right.png" height="90" size="90" alt="Img" onclick="myFunction('5')">

بازی سوم با کنترل جدید بر دوربین:

دکمه رو به بالا حرکت رو به جلو 5 سرعته.(گاز)
دکمه رو به پایین حرکت به عقب تک سرعته.(دنده عقب)
دکمه سیاه توقف.(ترمز)
دکمه های چپ و راست چرخش به چپ و راست.(فرمان)
 
آخرین ویرایش:

saalek110

Well-Known Member
تنظیمات دکمه ها:

در بازی 3 دکمه های کیبورد را فراموش کرده بودم. درست کردم.
البته شاید این طرز کارکرد کیبورد و تاچ را شما نپسندید.این به بازی شما بستگی داره.
در بازی من الان دقت لازم نیست چون بازی چیزی ندارد که بازیکن بخواهد آروم راه برود. آدمک هم ندارد بازی. دوربین در خیلی بازیها دنبال player راه می رود. بخاطر این مسایل من فعلا ابن طوری تنظیم کردم. شما می توانید هر طور خواستید تنظیم کنید. من روش کار را پیاده کردم ولی قابل تغییر است.

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

saalek110

Well-Known Member
ساخت Run time اشیا:

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

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

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

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

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



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

خوب اگر داده های اشیای ساخته شده ثبت نشود بار بعدی که بازی اجرا میشه اثری از اونها نیست.
پس وقتی x,y,z ,a,b,c,mat که محل و سایز و متریال شی است جایی ثبت شد
وقتی بار بعد بازی اجرا میشه باید از این 7 صفت شی را بسازد.
ممکنه در ساخت یک ساختمان شما 20 آبجکت حین اجرا بسازید. پس 20 تا شی باید ذخیره شود. یعنی 20 تا از این 7 صفت جایی ذخیره میشه. تا در اجرای بعدی این اشیا ایجاد شوند.
می توانید برای نوع شکل هم یک کد در نظر بگیرید. مثلا کد 1 برای مکعب و کد 2 برای استوانه و کد 3 برای کره sphere.
برنامه موقع شروع با توجه به کدها با دستور سوییچ می تواند اشکال مورد نظر را بسازد.

فعلا کدهای اینها را نگذاشتم. ولی فکر کنم با همین شرحش بعضی بتوانند برنامه را پیاده کنند.

در شکل زیر 4 مکعب از قالب ساخته شده:

g7.jpg


دکمه خلق:
creat.jpg
 
آخرین ویرایش:

saalek110

Well-Known Member
کدهای ساخت Run time اشیا:

برای کمک به خوانندگان قسمتهایی از کد را ارسال می کنم:
PHP:
 function maker(x ) {
                var obj_shape = new THREE.BoxBufferGeometry(  200, 200, 200 );
                obj = new THREE.Mesh( obj_shape, mat );


    obj.position.x = marker.position.x;
    obj.position.y =marker.position.y;
    obj.position.z =marker.position.z;
scene.add( obj );

}//f2

کد بالا تابعی است که از شی قالب یا شی مارکر کپی می گیرد.
البته در کد بالا شی ساخته شده ابعادش از روی ماکر کپی نشده و 200, 200, 200 در نظر گرفته شده.
قبلا یادتونه با دکمه های ساختگی خودمون این گونه تابع ها را صدا می زدیم.برای کار روی دوربین منظورمه.
PHP:
 <img src="textures/my_buttons/create.jpg" height="60" size="60" alt="Img" onclick="maker('15')">
اون عدد 15 که به تابع ارسال شده هیچ کاری انجام نمی دهد و اضافه است و میشه حذف کرد.

متغیر mat در بالای برنامه تعریف شده تا در تابع ها در دسترس باشد.

PHP:
 var mat;

و در جایی از برنامه متریال مورد نظر را در mat می ریزیم:
PHP:
mat= material_marker;

شی قالب هم یک شی معمولی است که قبلا از این شی ها ساختیم.

حالا دیگه اکثر کد را دارید و بقیه اش را هم می توانید راحت با سرچ پیدا کنید.
 
آخرین ویرایش:

saalek110

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

مثلا می توانید اشیا ساخته شده را در دیتابیس ذخیره کنید
و بعد با کوئری های مختلف ظهورهای متنوعی از این اشیا ایجاد کنید.

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

همچنین بعدا که در theee js چیزهای بیشتری یاد گرفتید خلق اشیا در حالت اجرا را با تکنولوژی جدیدتر انجام خواهید داد.
 
آخرین ویرایش:

saalek110

Well-Known Member
اینکه گفتم شی قالب را می آوریم به محل دوربین
کدش این میشه که مختصات دوربین را در مختصات اون می ریزیم. همون x و z را.

البته جالب درنمیاد چون دقیقا می افتد روی دوربین و دیده نمیشه و باید جای دوربین را عوض کرد تا اون را دید.

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

saalek110

Well-Known Member
الان اوایل تیر ۱۴۰۰ است. ممکنه چند هفته یا چند ماه نباشم.

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

saalek110

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

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

saalek110

Well-Known Member
Three js می دونید ماژول های زیادی داره که در سمپل های سایتش قابل مشاهده است.

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

saalek110

Well-Known Member
در کامپیوتر از کلیدهای کیبورد میشه برای ارسال دستور استفاده کرد
ولی در موبایل چون کیبورد نداریم(البته در دستگاه های جدید میشه کیبورد وصل کرد) مجبوریم برای هر کار یک دکمه تعین کنیم
پس بهرحال در موبایل محدودیت بیشتری داریم.

بنابراین شاید لازم باشه تقسیم کار کرد و کارهایی را در کامپیوتر انجام داد.
البته این یک اجبار ۱۰۰ درصد نیست و میشه یک رابط کاربری قوی در موبایل ایجاد کرد ولی خوب هم هزینه داره و هم اینکه شاید در نهایت اونی که باید بشه نشود.
و در فاز اول شاید مجبور بشویم مدتی تقسیم کار کنیم و....

( ولی اگر بتوانیم آبجکت ها را تاچ کنیم قضیه مقداری فرق می کنه. )

و مثل خیلی جاهای دیگر ، تولید محتوا را در کامپیوتر و استفاده را در موبایل تقسیم کرد.
خیلی نرم افزارها ورژن موبایلی ندارند و شاید اصلا نیازی به این کار نیست.
 
آخرین ویرایش:

saalek110

Well-Known Member
صدا:
JavaScript:
// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );

// create a global audio source
const sound = new THREE.Audio( listener );

// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/358232_j_s_song.ogg', function( buffer ) {
    sound.setBuffer( buffer );
    sound.setLoop( true );
    sound.setVolume( 0.5 );
    sound.play();
});

منبع:

تست شد.
 

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

بالا