Three.js nədir

Three.js WebGL (və yeni WebGPU) üzərində işləyən kitabxanadır. Saf WebGL-də shader, bufer və matrisləri əllə yazmaq lazımdır. Three.js bunu obyektlərin arxasında gizlədir: Scene, Camera, Mesh, Light. Siz 3D dünyanı təsvir edirsiniz, renderer isə onu <canvas>-a çəkir.

Quraşdırma: npm install three, sonra lazım olanı import edin. Əlavələr (idarəetmə, yükləyicilər) three/addons/ qovluğundadır.

javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

💡 Bundler olmadan eyni adları HTML-də importmap ilə qoşmaq olar: o, CDN-ə və ya node_modules-dakı surətə yönəlir.

Koordinatlar: y yuxarı, z sizə doğrudur, bütün bucaqlar radianla verilir (Math.PI 180 dərəcədir).

Scene, camera, renderer

İstənilən Three.js kodu üç obyektlə başlayır.

Səhnə və kamera renderer-ə verilir, renderer canvas-a şəkil çəkir
Səhnə və kamera renderer-ə verilir, renderer canvas-a şəkil çəkir
javascript
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  60, innerWidth / innerHeight, 0.1, 100
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);