Animimi i kubit 3D me Three.js

Prezantimi

Në botën e sotme dixhitale, teknologjia e internetit është bërë tepër e fuqishme. Kemi arritur në një pikë ku mund të përjetoni grafika magjepsëse 3D pikërisht në shfletuesin tuaj të internetit. Imagjinoni këtë - nuk ka nevojë për shtojca ose mjete të jashtme; është e gjitha brenda sferës së përmbajtjes së pastër të internetit. Dhe me mend se çfarë e nxit këtë ndryshim emocionues? Është WebGL, një teknologji fantastike që bën të mundur paraqitjen e grafikëve 2D dhe 3D. Por hej, le të jemi të vërtetë - mund të duket pak e ndërlikuar, veçanërisht për ata që fillojnë. Këtu hyn Three.js si superhero! Three.js është si ndihmësi juaj i besueshëm — ai thjeshton pjesët komplekse dhe ofron një rrugë shumë më miqësore për në botën magjepsëse të grafikëve 3D në ueb. Në këtë artikull, le të fillojmë një udhëtim për të eksploruar bazat e jetësimit të grafikave 3D duke përdorur WebGL dhe fuqitë magjike të Three.js.

WebGL dhe Three.js: Një ndeshje e përsosur

WebGL është një API komplekse e nivelit të ulët. Ndërsa ofron fuqi dhe fleksibilitet të jashtëzakonshëm, ai gjithashtu vjen me një kurbë të pjerrët të të mësuarit. Nga ana tjetër, Three.js ofron një abstraksion të nivelit më të lartë, duke u mundësuar zhvilluesve të krijojnë skena 3D pa u thelluar në ndërlikimet e WebGL.

Fillimi i thjeshtë: Një kub rrotullues

Le të animojmë një kub 3D duke përdorur Three.js për të ilustruar se sa e lehtë është të fillosh.

1. Konfigurimi

Së pari, përfshini bibliotekën Three.js në projektin tuaj:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

2. Krijo një skenë të thjeshtë

Ne kemi nevojë për tre komponentë kryesorë: një skenë, një aparat fotografik dhe një renderer.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. Shtoni Kubin me teksturë

Për të shfaqur një kub, do të na duhet një gjeometri e kutisë dhe një material për ta mbuluar atë.

const geometry = new THREE.BoxGeometry();
  const textureLoader = new THREE.TextureLoader();
  const materials = [
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') })
  ];
  const cube = new THREE.Mesh(geometry, materials);
  scene.add(cube);

4. Animoni Kubin

Ne do të krijojmë një lak animacioni që rrotullon kubin.

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

5. Vendosni kamerën

Së fundi, ne duhet ta pozicionojmë kamerën pak jashtë në mënyrë që të mund të shikojë kubin:

camera.position.z = 5;

Tani, do të shihni një kub që rrotullohet në një kanavacë të zbrazët. Lehtësia e vendosjes së kësaj skene demonstron fuqinë e Three.js.

konkluzioni

Me vetëm disa rreshta kodi, ne kemi hyrë në botën e grafikëve 3D në ueb. Kombinimi i WebGL për rendering power dhe Three.js për abstraksion e bën atë të arritshëm për zhvilluesit që të krijojnë përmbajtje vizuale mahnitëse direkt brenda shfletuesit. Ndërsa hulumtoni më thellë në këtë fushë, do të zbuloni se mundësitë - nga botët e ndërlikuara të lojërave deri te simulimet e detajuara - janë pothuajse të pakufishme. Gëzuar kodimin!

Lidhu me mua

• "LinkedIn"
• "GitHub"