three.js قوی ترین کتابخانه رندر سه بعدی و WEBGL در مرورگر است.

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

این کتابخانه امکانات و ویژگی های بسیار زیادی دارد. برای یادگیری کامل طراحی سایت های سه بعدی میتوانید دوره آموزش کامل و فارسی THREE.JS را تهیه کنید.

 

دانلود کتابخانه three.js

ورژن: 153 نسخه Minify

حجم: 624KB

دانلود three.min.js

<script src="three.min.js"></script>

دانلود نسخه module

ورژن: 153 Minify

حجم: 624KB

دانلود three.module.min.js

<script src="three.module.min.js" type="module"></script>

 

همچنین میتوان نسخه module را بطور مستقیم در فایل جاوااسکریپت اضافه کرد.

 

import * as THREE from 'three.module.min.js';

 

گاها میبینیم که threejs به این صورت در فایل js اضافه شده است:

import * as THREE from ‘three’;

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

برای آنکه از آدرس کامل کتابخانه استفاده نکنیم میبایست از importmap استفاده کنیم.

برای این منظور کافیست این کد را در html صفحه اضافه کنیم و آدرس کامل کتابخانه threeJs را بنویسم.

<script type="importmap">
    {
        "imports": {
            "three": "https://academy.webgl.studio/wp-content/themes/websima/assets/js/three151.module.js"
        }<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
    }
</script>

 

نصب Threejs در ری اکت (React)

npm install three

 <span class="bash">or</span>

yarn add three

نحوه استفاده از three.js در react

مثال:

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
const ThreeScene = () => {
  const sceneRef = useRef(null);
  useEffect(() => {
    // Set up your Three.js scene here
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    sceneRef.current.appendChild(renderer.domElement);
    // Add your Three.js objects, lights, etc. to the scene
    const animate = () => {
      requestAnimationFrame(animate);
      // Update your scene or perform animations here
      renderer.render(scene, camera);
    };
    animate();
    // Clean up the scene when the component is unmounted
    return () => {
      sceneRef.current.removeChild(renderer.domElement);
      // Dispose or remove any other resources as needed
    };
  }, []);

  return <div ref={sceneRef}></div>;
};
export default ThreeScene;