آموزش Three.js

saalek110 · Jun 9, 2021

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

و اگر بخواهید ثبت در دیتابیس داشته باشید مثلا ثبت امتیاز کاربر اونجا هم php به کار می آید. یکی از کاربردهای اصلی php کار با mysql در سایت هاست تا عمل ذخیره و بازخوانی و آپدیت اطلاعات در دیتابیس را انجام دهد.

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

saalek110 · Jun 9, 2021

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

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

این کد html است.
اول و آخرش تگ html داره.

HTML:

<!DOCTYPE html>
<html>

</html>

که اولی به معنای شروع html است و دومی به معنای اتمام html است. کدهای html در برگیرنده کدهای php و javascript است. پس خوبه تگ های html را بشناسید و اونها را با کدهای php یا javascript اشتباه نگیرید.

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

برای بدنه بهتره این صفحه را ببینید تا ببینید کار هر تگ چیه:

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

اگر می خواهید چیزی به سایت اضافه کنید باید در بدنه باشه. نه بیرون تگ body .

HTML:

<html>
<head>
</head>
<body>
اگر اول صفحه می خواهید اینجا درج کنید.
if ypu want in top write here.
    <script>
//javascript zone
    </script>
اگر آخر صفحه می خواهید اینجا درج کنید.
write html tags here
if you want write in end of page
   <p>Hi</p>
</body>
dont write here
    اینجا درج نکنید
</html>

در پست های قبلی دیدید من یک کلمه Hi به کدها اضافه کردم. من در قسمت html اضافه کردم چون کد html بود. و نبایستی اشتباهی در قسمت جاوا اسکریپت بنویسیم.

قسمت جاوا اسکریپت بین دو تگ script قرار می گیرد.

HTML:

<html>
<head>
</head>
<body>

    <script>
        // Our JavaScript will go here.
    </script>
</body>

saalek110 · Jun 9, 2021

HTML:

<html>
<head>
</head>
<body>


<?php
echo"hello";
?>

    <script>
//javascript zone
    </script>
 
</body>
</html>

در کد بالا من یک خط کد php اضافه کردم بین علامتهای شروع و اختتام php یعنی:

PHP:

<?php

?>

کد بالا در صفحه چاپ می کند hello.

برای نتیجه اجرا صفحه زیر را ببینید:

W3Schools online PHP editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

در سایت بالا می بینید داخل قسمت php تگهای html داخل echo استفاده شده:

HTML:

echo "<h2>PHP is Fun!</h2>";
echo "Hello world!<br>";

این عملی مجاز است. <br> و <h2> تگ های html است ولی تابع echo از زبان php برای فرم دهی درست مطالب چاپی اش از این تگ ها استفاده کرده.

saalek110 · Jun 9, 2021

تا اینجا مرزهای 3 زبان html و javascript و php را کمی مشخص کردیم. یادتان باشد وقتی میشه کد php نوشت که پسوند فایل php باشه. و اگر پسوند فایل php باشد همین طوری با کلیک بر فایل در هارد کامپیوتر شما اجرا نمیشه و نیاز به نرم افزارهای اجرای کدهای php را دارد مثل XAMPP

saalek110 · Jun 9, 2021

css
یک بحث هم css است. که داخل هدر یا یک فایل جدا قرار می گیرد.

HTML:

<html>
<head>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>

</body>
</html>

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

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

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

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

اومده رنگ پشت هدر و پاراگراف (همان p ) را قرمز و آبی کرده.
البته اینجا style حالت inline داره و اومده دقیقا جلوی اسم تگ. این طوری هم میشه. بالای صفحه هم میشه و در یک فایل جدا هم میشه.

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

saalek110 · Jun 9, 2021

برای من مهمه است بدانید که قسمت html کجاست و قسمت javascriptl کجاست و قسمت php کجاست و این 3 زون که لایه لایه در هم قاطی شدن را قاطی نکنید. ممکن است یک خط html بیاید وسط کدهای javascript و بعد دوباره javascript دوباره ادامه پیدا کند. باید آماده این در کنار هم بودن ها باشید ولی مرز این دو که همان کلمه script است را فراموش نکنید.

saalek110 · Jun 9, 2021

و تذکر یک نکته:
three js جزو جاوا اسکریپت نیست.
فکر نکنید کدهایی که ما کار کردیم javascript بود. javascript اصلا چنین قابلیت هایی ندارد. البته به زبان javascript بود ولی اگر اون فایل یک مگایی را کنار کدهاتون نگذارید هیچ کدی کار نمی کنه. یعنی شما دارید از توابع داخل اون فایل استفاده می کنید.

اگر نمی دونید تابع چیه تابع مقداری کد است که با یک نام و علامتهای شروع و اختتام مشخص می شود.
در ادامه ساخت تابع در javascript را خواهم گفت. ولی چون من بدون مقدمه وارد three js شدم شاید بعضی به این اشتباه بیافتند که three js قسمتی از javascript است. فعلا یک شرحی در مورد three js خودتون در وب فارسی پیدا کنید و بخوانید.

خلاصش اینکه: توسط javascript یک چیزی اختراع شده به نام three js. ولی three js جزو javascript نیست.

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

saalek110 · Jun 9, 2021

تابع در جاوا اسکریپت:

JavaScript:

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

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

مثلا فرض کنید کار یک تابع ضرب دو عدد است. دو عدد را با ورودی بهش می فرستیم.

JavaScript:

function zarb(a, b) {
  return p1 * p2;  
}
var hasel=zarb(3,4);

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

saalek110 · Jun 9, 2021

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

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

کد:

HTML:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

</body>
</html>

توجه کنید که قسمت جاوا اسکریپت بین دو علامت اسکریپت محصور است ولی چاپ در یک پاراگراف html با id به نام demo صورت گرفته.

کلمه id را بخاطر داشته باشید. برای عناصر html شناسه id حکم کد ملی برای کدهای جاوا اسکریپت است. توسط id کدهای جاوا اسکریپت با عناصر html ارتباط برقرار می کنند.
مثلا سازمان آب برای هر خانه ای پلاک آب تعیین کرده. و اداره برق برای هر خانه پلاک برق و الی اخر.

در html از شناسه name هم استفاده می شود. بعدا اگر برخورد داشتیم شرح می دهیم.

Is referenced in JS with getElementsByName()
Is referenced in JS with getElementById()
این دو خط را از سایت:
HTML input - name vs. id
نوشتم تا کمی با این شناسه ها آشنا شوید.

حالا برگردیم به کدمون. حاصل که ریخته شد در متغیر x
با خط:

JavaScript:

document.getElementById("demo").innerHTML = x;

روی پاراگرافی با نام demo نوشته شد.

پس از قسمت javascript چیزی در قسمت html نوشتیم با استفاده از شناسه id.

saalek110 · Jun 9, 2021

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

JavaScript:

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

تابعی ساخته شده و صدا زده شده.

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

saalek110 · Jun 9, 2021

یک مقدار نقل قول بکنیم:

Three.js یک کتابخانه جاوا اسکریپت می باشد که بر پایه WebGL بنا شده و با استفاده از آن می توان احجام سه بعدی را به راحتی در صفحات وب لود نمود و بدین ترتیب تجربه ای متفاوت را به کاربر منتقل کرد.

فرادرس

faradars.org

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

آموزش مصورسازی های 3 بعدی وب با Three.js

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

git.ir

سلام

THREE.JS یک کتابخانه JavaScript برای ایجاد و کار با اشیائ سه بعدی ( 3D ) هست این کتابخانه بسیار غنی ای هست، بر اساس WebGL و Canvas و SVG کار میکنه. یعنی شما میتونید نوع رندرتون رو مشخص کنید که بر اساس کدوم یک از اینها باشه.
WebGL امکانات بسیاری برای کارهای گرافیکی سه بعدی داره و بسیار بهینه عمل میکنه چون تمامی پردازشهای 3D که بر بستر WebGL انجام میشه به عهده GPU هست.

three.js چیست ؟؟؟

سلام بر همگی دوستان عزیز مجید انلاین کسی از دوستان در رابطه با تکنولوژی three.js اطلاعاتی داره در اختیار من هم بزاره ؟؟؟؟

forum.majidonline.com

saalek110 · Jun 9, 2021

کد زیر:

HTML:

  <img src="up.jpg" height="120" size="120" alt="Img" onclick="myFunction('1')">

یک عکس است که به کلیک واکنش نشان می دهد و یک تابع جاوا اسکریپت را صدا می زند و عدد 1 را به تابع ارسال می کند.

پس داریم با html به قسمت جاوا اسکریپت دست اندازی می کنیم تا بتوانیم به عناصر سه بعدی دست بیابیم و یک بازی بسازیم.
در حقیقت کد بالا دکمه up بازی ماست. که مثلا باعث می شود یک شی یا دوربین به سمت بالا یا به سمت جلو حرکت کند.

saalek110 · Jun 9, 2021

تابع myfunction من چنین است:

JavaScript:

function myFunction(x) {
   if (x==1) {my_control_z=20;    my_control_x=0;    rotation=0; }
   if (x==2) {my_control_z=-20;    rotation=3.14159; }
   if (x==3) {my_control_z=0;  my_control_x=0;   }
   if (x==9) {my_control_z=-20;   my_control_x=0;  rotation=0;    }
}

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

saalek110 · Jun 9, 2021

کد زیر را درون تابع animate می ریزیم:

JavaScript:

camera.rotation.y=rotation;
camera.position.x =camera.position.x -  my_control_x;
camera.position.z =camera.position.z -  my_control_z;

متغیرهای مذکور بالای برنامه قبلا ایجاد شده بود:

JavaScript:

                         //---- control camera ----
                        var my_control_x=0;
                        var my_control_z=0;
                        var rotation=0;
                        //-------------------------

پس کل برنامه شامل یک عکس شد که تابع جاوا اسکریپت دست ساز ما را صدا بزند
تا اون تابع متغیرهایی را دستکاری کند و در داخل تابع animate اون متغیرها به دوربین نسبت داده بشه(یا هر شی دیگر)
اول برنامه هم باید متغیرها تعریف بشوند.

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

saalek110 · Jun 9, 2021

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

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

saalek110 · Jun 9, 2021

اما برویم بحث تکسچر:

saalek110 · Jun 9, 2021

JavaScript:

                var geometry_stone = new THREE.BoxBufferGeometry(  200, 200, 200 );
                var texture_stone = new THREE.TextureLoader().load(   'textures/stone.jpg' );  
                var material_stone = new THREE.MeshBasicMaterial( { map: texture_stone } );
                mesh_stone = new THREE.Mesh( geometry_stone, material_stone );
         
    mesh_stone.position.x = -650;
    mesh_stone.position.y = -100;
    mesh_stone.position.z = 5500;
    scene.add( mesh_stone );

کد بالا با استفاده از تصویر stone.jpg یک مکعب با تکسچر سنگی می سازد.

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

کد بالا جایگزین این قسمت در برنامه اول می شود:

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 );

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

saalek110 · Jun 9, 2021

این هم کد skybox.

JavaScript:

var skyGeo = new THREE.SphereGeometry(3000, 25, 25);
//First the geometry. I wanted it big and made it big
             var texture_x = new THREE.TextureLoader().load(  'nx.jpg' );   
                var material_sky = new THREE.MeshBasicMaterial( { map: texture_x } );
//Set everything together and add it to the scene here.

    var sky = new THREE.Mesh(skyGeo, material_sky);
    sky.material.side = THREE.BackSide;
    scene.add(sky);

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

حالا وقتشه افق دید را هم بگویم. در خط کد:

JavaScript:

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );

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

saalek110 · Jun 9, 2021

کد تکرار تکسچر:

JavaScript:

var loader = new THREE.TextureLoader();
var texture = loader.load( 'brick_diffuse.jpg', function ( texture ) {
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.offset.set( 0, 0 );
    texture.repeat.set( 10, 1 );
    // your code
} );
var material_zz = new THREE.MeshBasicMaterial( { map: texture } );

var geometry_x = new THREE.BoxBufferGeometry(  30, 300, 5000 );
                mesh_x = new THREE.Mesh( geometry_x, material_zz );
    mesh_x.position.x = 450;
    mesh_x.position.y = 0;
    mesh_x.position.z = 3000;
    scene.add( mesh_x );

خط کد :

JavaScript:

 texture.repeat.set( 10, 1 );

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

saalek110 · Jun 9, 2021

JavaScript:

document.addEventListener('keydown',onKeyDown,false);
function onKeyDown(event){//onKeyDown
      var delta =20;

                              //event = event || window.event;
             var keycode = event.keyCode;
     switch(keycode){
     case 37 : //left arrow

       break;
     case 38 : // up arrow
     //
camera.position.z = camera.position.z - delta;
camera.updateProjectionMatrix();
      break;
     case 39 : // right arrow

     break;
    case 40 : //down arrow
camera.position.z = camera.position.z + delta ;
camera.updateProjectionMatrix();
    break;
                 }
}//onKeyDown

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