نصب Three.js (CDN vs npm)

Three.js رو می‌تونی به دو روش اصلی استفاده کنی: CDN یا NPM. هر کدوم مزایا و کاربرد خودش رو داره.

۱️⃣ روش CDN

🔹 توضیح

با CDN می‌تونی بدون نصب، فایل Three.js رو مستقیم از اینترنت بارگذاری کنی و در پروژه استفاده کنی.
این روش برای نمونه‌های سریع، تست و پروژه‌های کوچک عالیه.

🔹 مثال

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three.js CDN Example</title>
    <!-- بارگذاری Three.js از CDN -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.min.js"></script>
  </head>
  <body>
    <script>
      // ساخت صحنه
      const scene = new THREE.Scene();

      // ساخت دوربین
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // ساخت رندرر
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // ساخت یک مکعب
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // حلقه انیمیشن
      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

📌 مزایا:

  • نیاز به نصب ندارید.

  • سریع و ساده برای تست یا نمونه اولیه.

📌 معایب:

  • وابسته به اینترنت و CDN

  • به‌روز‌رسانی نسخه‌ها کنترل کمتری داری

۲️⃣ روش NPM

🔹 توضیح

NPM (Node Package Manager) برای پروژه‌های بزرگ و حرفه‌ای توصیه میشه.
با NPM می‌تونی Three.js رو داخل پروژه نصب کنی و از ES Modules استفاده کنی.

🔹 مراحل نصب

# ایجاد پروژه جدید
mkdir my-threejs-project
cd my-threejs-project
npm init -y

# نصب Three.js
npm install three

🔹 مثال با ES Module

// index.js
import * as THREE from 'three';

// ساخت صحنه
const scene = new THREE.Scene();

// دوربین
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// رندرر
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// مکعب
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// انیمیشن
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

📌 مزایا:

  • مناسب پروژه‌های بزرگ و ماژولار

  • امکان استفاده از ابزارهای Build مثل Webpack, Vite, Parcel

  • کنترل کامل روی نسخه‌ها

📌 معایب:

  • نیاز به محیط Node.js

  • تنظیمات اولیه کمی پیچیده‌تر از CDN

✅ جمع‌بندی

روشمزایامعایب
CDNساده و سریعوابسته به اینترنت، کنترل نسخه کم
NPMمناسب پروژه بزرگ، کنترل نسخه، ماژولارنیاز به Node.js و ابزار build