19
تشکر

راهنمایی مقدماتی در استفاده از three.js

threeJs Demo

threeJs Demo

اگر مطالب آپارنت را دنبال کرده باشید در مطلب “مروری سریع بر WebGL” با WebGL و کتابخانه threejs اندکی آشنا شدیم. در این مطلب با استفاده از کتابخانه three.js میخواهیم مدلهای سه بعدی که میسازیم را روی مرورگر نشان دهیم.

مشاهده دمو

منبع: teamtreehouse.com

در ادامه همراه ما باشید…

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

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

دانلود THREE.JS

در ابتدا باید به سایت threejs.org رفته و در سمت چپ این سایت روی دکمه Download کلیک کنید تا پکیج threejs که شامل کتابخانه به همراه نمونه ها و داکیومنت ها است دانلود شود.

ما در مثالی که قرار است در این مطلب بزنیم نیاز به کتابخانه OrbitControls.js هم داریم که پس از دانلود پکیج threejs در مسیر زیر قرار دارد.

threejs folder > examples > js > controls > OrbitControls.js

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

به یاد داشته باشید که برای کار کردن با WebGL در threejs باید روی سرور و یا روی localhost سیستمتان کار کنید. زیرا threejs بدلیل لود کردن فایلهای خارجی باید از روی سرور یا localhost سیستم اجرا شود.

ساخت اشیاء سه بعدی

همانطور که در تصویر ابتدای این مطلب مشاهده میکنید ما میخواهیم این مدل را در مروگر نمایش دهیم. اما ابتدا باید آن را درست کرد. خب ساخت اشیاء سه بعدی پیچیده آنهم با استفاده از کد کاری تقریبا غیر ممکن است. برای اینکار از نرم افزار Blender استفاده میکنیم. این نرم افزار مشابه نرم افزار 3D max است و محیطی Perspective را برای ساخت اشیاء سه بعدی در اختیار شما قرار میدهد.

میتوانید نرم افزار Blender را از سایت blender.org دانلود کنید.

پس از ساخت شی مورد نظر در Blender باید خروجی JavaScript مخصوص کتابخانه three.js را از آن بگیرید. برای اینکار ابتدا باید پلاگینی را روی نرم افزار Blender نصب کنید تا این خروجی را برای شما تولید کند. برای چگونگی نصب این پلاگین میتوانید از این مطلب استفاده کنید.

اما اگر فعلا نمیخواهید با نرم افزار Blender کار کنید و یا تخصصی در ساخت اشیاء سه بعدی ندارید (مانند من) فعلا نگران نباشید. در این مثال ما از یک نمونه از پیش ساخته شده استفاده میکنیم، که قبلا آن را به کد JavaScript تبدیل کرده ایم، که در فایلی که برای دانلود معرفی کردیم قرار دارد.

اگر فایل را دانلود کرده باشید، میبینید که شامل دو پوشه است. پوشه js شامل کتابخانه های three.js که نیاز داریم و پوشه Model که همان شی ساخته شده در نرم افزار Blender است.

خب حالا که همه چیز آماده است سراغ کد نویسی میرویم. ابتدا فایل HTML مورد نظر خود را ایجاد کنید. و کدهای زیر را درون آن قرار دهید.

<!doctype html>
<html>
<head>
  <title>three.js</title>
  <meta charset="utf-8">
  <style>
    *{margin: 0;padding: 0;}
  </style>
</head>
<body>
 
  <script src="js/three.min.js"></script>
  <script src="js/OrbitControls.js"></script>
 
  <script>
 
 
  </script>
 
</body>
</html>

فعلا چیز خاصی وجود ندارد. در ادامه هر کدی که مینویسیم درون تگ های script قرار میدهیم.

تعریف متغیرهای عمومی و توابع

در ابتدا متغیر های عمومی و توابع مورد نظر را تعریف و صدا میزنیم. که ساختمان توابع را در ادامه شرح میدهیم.

var scene, camera, renderer;
 
init();
animate();

ساخت صحنه (Scene)

همانطور که میدانید در گرافیک سه بعدی ما با ابزارهایی مانند اشیاء سه بعدی (geometry)، دوربین ها (camera) و نورها (lights) و غیره کار میکنیم، و تمام این ابزار ها باید در محیطی به نام صحنه (Scene) قرار بگیرند. برای ایجاد صحنه مانند کد زیر عمل میکنیم که درون تابع init اینکار را انجام میدهیم.

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

function init() {
 
    scene = new THREE.Scene();
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;
  
}

ساخت Renderer

اگر کمی توجه کرده باشید ما در کد HTMLیی که قرار دادیم هیچ عنصری که با آن بتوانیم گرافیک سه بعدی را نمایش دهیم قرار ندادیم. در مطلب گذشته گفتیم که برای اینکار از عنصر canvas استفاده میکنیم. این عنصر canvas در واقع همان renderکننده ما است.

توسط کدهای زیر عنصر Canvas را ایجاد و عرض و طول آن را تنظیم میکنیم. کدهای زیر ادامه کدهای داخل تابع init است.

function init() {
 
    // Code from previous steps goes here...
 
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(WIDTH, HEIGHT);
    document.body.appendChild(renderer.domElement);
 
    // More code goes here next...
 
  }

ساخت دوربین (Camera)

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

function init() {
 
    // Code from previous steps goes here...
 
    camera = new THREE.PerspectiveCamera(20, WIDTH / HEIGHT, 0.1, 20000);
    camera.position.set(10, 10, 10);
    scene.add(camera);
  
}

ساخت نور (Light)

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

  function init() {
 
    // Code from previous steps goes here...
 
    renderer.setClearColor(0x000000, 1);
 
    var light = new THREE.PointLight(0xffffff);
    light.position.set(-100, 200, 100);
    scene.add(light);
  
}

اضافه کردن اشیاء سه بعدی به صحنه (Geometry)

توسط تابع JSONLoader میتوانیم یک فایل خارجی را برای اضافه کردن به صحنه لود کنیم. درون این تابع میتوانیم Materialیی را به شی مورد نظر وصل کنیم. که در این مثال ما رنگ را به عنوان متریال اضافه میکنیم.

function init() {
 
    // Code from previous steps goes here...
 
    var loader = new THREE.JSONLoader();
    loader.load( "Models/Ring.js", function(geometry){
      var material = new THREE.MeshLambertMaterial({color: 0xffffff});
      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    });
  
}

اضافه کردن کنترل

توسط کد زیر ما امکان کنترل دوربین را به کاربر میدهیم، که کاربر میتواند با استفاده از اسکرول و ماوس دوربین را تغییر دهد. این امکان توسط کتابخانه OrbitControls.js پیاده سازی میشود.

function init() {
 
    // Code from previous steps goes here...
 
    controls = new THREE.OrbitControls(camera, renderer.domElement);
 
}

Render صحنه

خب حالا که همه چیز آماده است. تابع animate را جهت Render صحنه مینویسیم.

function init() {
  // Code from previous steps goes here...
}
 
function animate() {
 
  requestAnimationFrame(animate);
 
  renderer.render(scene, camera);
  controls.update();
 
}

حالا میتوانید نتیجه کار را مشاهده کنید.

همانطور که مشاهده کردید کار کردن با تکنولوژی WebGL توسط کتابخانه three.js و نرم افزار Blender کار خیلی راحتی شده است. شما میتوانید هر چیزی که میخواهید را با نرم افزار Blender ساخته و درون مروگر نمایش دهید.

مشاهده دمو

دانلود کامل مثال

منبع: teamtreehouse.com

  • شیرین می‌گه:

    عالی بود ممنون من خیلی وقت نیست طراحی صفحات وب رو دارم یاد میگیرم ولی واقعا three .js ,برام جذاب و جالبه

  • محمود می‌گه:

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

    الان این تکنولوژی توی تمامی سرچ های گوگل اعمال میشه و اگه چیزی مثل اینو سرچ کنید واکنش گوگل رو میبینید
    Link


  • نظرات این مطلب بسته است.