Three.js’da protseduraviy, animatsiyali hayvonlar yaratish

three.js Procedural Animals nima?

three.js Procedural Animals — three.js uchun ish vaqtida generatsiya qilinadigan 24 ta hayvonni o‘z ichiga olgan kutubxona. Modellar, teksturalar, riglar yoki animatsiya kliplarini yuklab olish o‘rniga, createAnimal() ni chaqirasiz va kutubxona kod orqali to‘liq animatsiyalangan hayvonni yaratadi.

Har bir hayvon signed distance field’lar asosida shakllantiriladi, meshga aylantiriladi, riglanadi, skin qilinadi, jun, pat yoki tangachalar bilan qoplanadi hamda inverse kinematics yurishlari va harakatlari orqali animatsiyalanadi. Mavjud tana tuzilmalari panjali hayvonlar, tuyoqli hayvonlar, qushlar, suvda suzuvchilar, ilonlar, o‘rgimchaklar va sakrovchilarni o‘z ichiga oladi.

Har bir tur, variant, harakat va debug ko‘rinishini jonli namoyishda ko‘rishingiz yoki manba kodini GitHub repozitoriysi orqali tekshirishingiz mumkin.

Asosiy imkoniyatlar

• 24 tur: Bo‘rilar, mushuklar, otlar va quyonlardan tortib qushlar, baliqlar, ilonlar va o‘rgimchaklargacha bo‘lgan variantlar mavjud.
• Seed orqali yaratiladigan individlar: Seed qiymati, agar ularni alohida o‘zgartirmasangiz, o‘lcham, proporsiyalar, qoplama, jins, yosh va variant tanlovlarini takrorlanadigan tarzda belgilaydi.
• Ish vaqtida animatsiya: Hayvonlar mos yurish usullarini avtomatik tanlaydi va o‘tirish, uxlash, yeyish, hujum qilish hamda sakrash kabi harakatlarni taqdim etadi.
• Beshta sifat darajasi: hero, high, medium, low va crowd darajalaridan birini tanlang.
• Worker asosidagi yaratish: Yaratish jarayonlari sukut bo‘yicha module Web Worker’larda bajariladi, zarur bo‘lsa chaqiruvchi oqimga o‘tiladi.
• Oflayn tayyorlash: Individni .animal fayli sifatida oldindan yarating va uni taxminan 20 millisekundda yuklang.
• O‘yinlarga yo‘naltirilgan boshqaruv: Hayvonlarni boshqaring, ularni manzillarga yuboring, fizika jismlarini kuzattiring, nishonlarni kuzating, harakatlarni ishga tushiring va o‘yin hodisalarini qabul qiling.
• TypeScript qo‘llab-quvvatlashi: Paket ES modullaridan foydalanadi va TypeScript deklaratsiyalarini o‘z ichiga oladi.

O‘rnatish

Kutubxona yagona peer dependency sifatida three.js r160 yoki undan keyingi versiyasini talab qiladi. Paket va three.js ni npm orqali o‘rnating:

npm install procedural-animals three

Agar paket hali npm’da mavjud bo‘lmasa, uni to‘g‘ridan-to‘g‘ri GitHub’dan o‘rnating:

npm install github:majidmanzarpour/threejs-procedural-animals three

Birinchi hayvoningizni yarating

Avval three.js va createAnimal ni import qiling. Mesh, rig, qoplamalar va tegishli ma’lumotlarni yaratish vaqt talab qilgani uchun funksiya asinxrondir.

import * as THREE from 'three';
import { createAnimal } from 'procedural-animals';

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

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xa9c1e0);

const camera = new THREE.PerspectiveCamera(
  40,
  innerWidth / innerHeight,
  0.1,
  500
);
camera.position.set(6, 3, 8);

const sun = new THREE.DirectionalLight(0xfff3e4, 2.7);
sun.position.set(6, 10, 4);
sun.castShadow = true;

scene.add(
  sun,
  new THREE.HemisphereLight(0xdde6f2, 0x5f5a52, 1.15)
);

const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(200, 200).rotateX(-Math.PI / 2),
  new THREE.MeshStandardMaterial({ color: 0x77736a })
);
floor.receiveShadow = true;
scene.add(floor);

async function main() {
  const wolf = await createAnimal('wolf', {
    seed: 3,
    quality: 'high'
  });

  scene.add(wolf.object);

  let last = performance.now();

  renderer.setAnimationLoop((now) => {
    const dt = (now - last) / 1000;
    last = now;

    wolf.move({
      speed: wolf.gears.walk,
      heading: now / 1000 * 0.3
    });

    wolf.update(dt);
    camera.lookAt(wolf.position);
    renderer.render(scene, camera);
  });
}

main();

Ushbu misolda bir nechta muhim qoida mavjud:

1. Hayvonni async funksiya ichida yarating va natijani await qiling.
2. animal.object ni sahnaga qo‘shing, ammo ushbu obyekt transformatsiyasini identity holatida qoldiring. Hayvon o‘z harakatini mustaqil boshqaradi.
3. Uni boshqarish uchun move(), moveTo() yoki follow() kabi metodlardan foydalaning.
4. Har bir kadrda update(dt) ni aynan bir marta chaqiring; dt soniyalarda o‘lchanadi.
5. animal.gears dagi tezliklardan foydalaning, chunki mavjud gear nomlari turga qarab farq qilishi mumkin.

Entry modulida top-level await ishlatishdan saqlaning. Loyiha hujjatlariga ko‘ra, bu Vite production build jarayonini deadlock holatiga olib kelishi mumkin.

Harakat va navigatsiya

To‘g‘ridan-to‘g‘ri boshqarish

move() metodi tezlikni metr/soniyada va yo‘nalishni radianda qabul qiladi. 0 yo‘nalishi musbat Z o‘qiga qaragan holatni bildiradi.

wolf.move({
  speed: wolf.gears.walk,
  heading: Math.PI / 2
});

Hayvon harakatlanishini to‘xtatishi kerak bo‘lganda stop() ni chaqiring:

wolf.stop();

Manzilga harakatlanish

Hayvonni dunyo koordinatalaridagi nuqta tomon yuborish uchun moveTo() dan foydalaning. Manzilga yetib borgach, u arrive hodisasini yuzaga keltiradi.

wolf.moveTo(
  new THREE.Vector3(10, 0, 4),
  { speed: 3 }
);

wolf.on('arrive', () => {
  console.log('The wolf arrived.');
});

Fizika jismini kuzatish

Agar boshqa tizim jismni boshqarsa, har bir kadrda uning joriy holati va tezligini follow() ga uzating:

wolf.follow(body.position, body.velocity);

Nishonni kuzatish

lookAt() yordamida hayvon boshini nishon tomon buriting. Kuzatishni to‘xtatish uchun null uzating.

wolf.lookAt(player.position);

// Keyin:
wolf.lookAt(null);

Harakatlarni ijro etish

Har bir tur umumiy jump, sit, lie, sleep, eat, drink, attack, hit, death va stand harakatlarini qo‘llab-quvvatlaydi. Turlar maxsus harakatlarni ham taqdim etishi mumkin. Masalan, ilonlar o‘ralib, hujum qila oladi, qushlar havoga ko‘tarilib, qo‘na oladi, quyonlar esa sakrab, oyoqlari bilan yer tepishi mumkin.

play() metodi natijasi done, interrupted, stopped yoki refused bo‘lishi mumkin bo‘lgan Promise qaytaradi.

const result = await wolf.play('attack');
console.log(result);

Tur maxsus harakatni qo‘llab-quvvatlaydi deb taxmin qilish o‘rniga, animal.actions ni tekshiring. Nomlangan harakatni stopAction() bilan to‘xtatishingiz mumkin:

wolf.stopAction('attack');

Hayvon hodisalariga javob berish

Hodisalar API’si o‘yin tizimlariga animatsiya va harakatga munosabat bildirish imkonini beradi. Mavjud hodisalarga footstep, attackHit, actionStart, actionEnd, arrive, takeoff, land, death, vocalize va wingbeat kiradi.

const onFootstep = (event) => {
  sfx.play('step', event.position, event.strength);
};

wolf.on('footstep', onFootstep);

wolf.on('attackHit', (event) => {
  damage(event.position, event.direction);
});

// Kerak bo‘lmay qolganda tinglovchini olib tashlang.
wolf.off('footstep', onFootstep);

Relyef va suvni sozlash

ground opsiyasi X va Z koordinatalari uchun relyef balandligini qaytaradigan funksiyadir. Uning koordinatalari animal.object.parent fazosida bo‘lishi, qaytarilgan balandlik esa sahnada ko‘rsatilgan relyefga mos kelishi kerak.

const deer = await createAnimal('deer', {
  ground: (x, z) => terrainHeightAt(x, z),
  position: new THREE.Vector3(4, 0, 8),
  heading: Math.PI
});

Suvda suzuvchi hayvonlar uchun water funksiyasi va suv sathidan pastdagi boshlang‘ich holat talab qilinadi. Funksiya suv sathi balandligini yoki suv bo‘lmagan joylarda null qiymatini qaytaradi.

const fish = await createAnimal('fish', {
  water: (x, z) => 2,
  position: new THREE.Vector3(0, 1, 0)
});

scene.add(fish.object);

Quruqlik hayvonlari ichish va sayoz suvda yurish uchun suv ta’rifidan ham foydalanishi mumkin. Qushlarga ular uchib borishi mumkin bo‘lgan THREE.Vector3 nuqtalaridan iborat perches massivi berilishi mumkin.

Tur, variant va individlarni tanlash

Kutubxonaga bo‘rilar, itlar, tulkilar, mushuklar, sherlar, gepardlar, ayiqlar, kalamushlar, quyonlar, otlar, bug‘ular, sigirlar, cho‘chqalar, qo‘ylar, echkilar, yovvoyi cho‘chqalar, qurbaqalar, tovuqlar, qarg‘alar, burgutlar, baliqlar, akulalar, ilonlar va o‘rgimchaklar kiradi.

Takrorlanuvchi individ yaratish uchun seed dan foydalaning. Shuningdek, uning variantini, jinsini yoki yoshini aniq tanlashingiz mumkin:

const cat = await createAnimal('cat', {
  seed: 12,
  quality: 'high',
  variant: 'tuxedo',
  sex: 'female',
  age: 'adult'
});

Satr ko‘rinishidagi tur identifikatorlari kerak bo‘lganda yuklanadi. Agar ilovaga faqat bitta tur kerak bo‘lsa, bundle’ni ixcham saqlash uchun shu turni bevosita import qiling:

import wolfSpecies from 'procedural-animals/species/wolf';
import { createAnimal } from 'procedural-animals';

const wolf = await createAnimal(wolfSpecies, {
  seed: 3
});

Tegishli sifat darajasini tanlash

• hero: Kinematik yaqin tasvirlar uchun taxminan 110 000–130 000 ta vertex.
• high: O‘yinchi hayvoni uchun taxminan 65 000–80 000 ta vertex. Bu standart qiymat.
• medium: O‘rta masofadagi tasvirlar va telefonlar uchun taxminan 25 000–32 000 ta vertex.
• low: Taxminan 10–20 ta hayvondan iborat podalar uchun taxminan 11 000–15 000 ta vertex.
• crowd: Bitta draw call bilan taxminan 100 ta hayvondan iborat guruhlar uchun taxminan 5 000–8 000 ta vertex.

Mavjud meshdagi jun yoki teri tafsilotlarini setQuality() bilan o‘zgartirishingiz mumkin. Katta guruhlar uchun harakat tafsilotlarini kamaytirish maqsadida crowd darajasini setLod(2) bilan birga ishlating:

const sheep = await createAnimal('sheep', {
  seed: 5,
  quality: 'crowd'
});

sheep.setLod(2);

Build natijalari tur, seed, sifat va variant bo‘yicha keshlanadi. Shuning uchun oltita seed ishlatilgan 100 ta hayvondan iborat poda atigi oltita alohida buildni talab qiladi. Hujjatlarda ko‘rsatilgan protsessor sarfi har bir hayvon va kadr uchun taxminan 0,1 millisekundni tashkil etadi.

Web Worker’larni sozlash

Hayvonlarni yaratish taxminan 0,4–6 soniya davom etadi. Standart holatda yaratish jarayoni modul Web Worker’larida bajariladi. Agar Worker mavjud bo‘lmasa, kutubxona chaqiruvchi oqimga qaytadi.

Vite konfiguratsiyasi

// vite.config.js
export default {
  worker: { format: 'es' },
  build: { target: 'es2022' },
  optimizeDeps: {
    exclude: ['procedural-animals']
  }
};

webpack 5 va Parcel 2 uchun qo‘shimcha worker konfiguratsiyasi talab qilinmaydi.

Boshqa bundlerlar

Boshqa bundler uchun worker’ni qo‘lda bundle qiling:

npx esbuild node_modules/procedural-animals/src/worker.js --bundle --format=iife --minify --outfile=public/animal-worker.js

So‘ng worker yaratadigan factory’ni ro‘yxatdan o‘tkazing:

import { setWorkerFactory } from 'procedural-animals';

setWorkerFactory(
  () => new Worker('/animal-worker.js')
);

Muayyan hayvon uchun worker orqali yaratishni o‘chirib qo‘yishingiz mumkin, ammo bu build davomida chaqiruvchi oqimni bloklaydi:

const wolf = await createAnimal('wolf', {
  worker: false
});

Tez yuklash uchun hayvonlarni oldindan tayyorlash

Muayyan individ uchun uni oldindan .animal fayliga pishirib qo‘ying. Bu ishga tushirish paytidagi yaratish kechikishini README taxminan 20 millisekund deb ko‘rsatgan yuklash jarayoniga almashtiradi.

npx procedural-animals-bake wolf --seed 3 --quality high -o public/wolf-3.animal

Yaratilgan faylni ArrayBuffer sifatida oling va uni baked opsiyasi orqali uzating:

const wolf = await createAnimal('wolf', {
  baked: fetch('/wolf-3.animal')
    .then((response) => response.arrayBuffer())
});

Oldindan pishirilgan individ buyruq orqali tayyorlangan tur va konfiguratsiyaga mos kelishi kerak.

Ilg‘or maslahatlar

Faqat o‘qiladigan harakat holatidan foydalaning

Kameralar, o‘yin jarayoni yoki interfeyslarni muvofiqlashtirish uchun position, heading, speed, velocity va state qiymatlarini o‘qing. Harakat hosil qilish uchun hayvonning asosiy obyektini o‘zgartirmang.

Aksessuarlarni nomlangan nuqtalarga biriktiring

attachments to‘plami mouth, head va back kabi nuqtalarni taqdim etadi. Qushlarda oyoq biriktirish nuqtalari, otlarda esa seat, uzangilar va tishlag‘ich kabi chavandozlikka oid nuqtalar ham mavjud. Aksessuarlarni animatsiyalangan joylashuvini qo‘lda taxmin qilish o‘rniga shu biriktirish obyektlariga ota-obyekt sifatida biriktiring.

Nosozliklarni tuzatish va qoplama boshqaruvlaridan foydalaning

Hayvon API’si albedo, weights, material va bare rejimlariga ega setDebug(mode, on) metodini o‘z ichiga oladi. Mo‘yna qobiqlarini yoqish yoki o‘chirish uchun setCoverings(on) dan foydalaning.

wolf.setDebug('weights', true);
wolf.setCoverings(false);

Nuqta tomon yo‘nalishni hisoblang

Yo‘nalishning nol qiymati musbat Z tomonga qaraganligi sababli, nishon tomon yo‘nalishni hisoblashda Math.atan2(dx, dz) dan foydalaning:

const dx = target.x - wolf.position.x;
const dz = target.z - wolf.position.z;
const heading = Math.atan2(dx, dz);

wolf.move({
  speed: wolf.gears.walk,
  heading
});

Resurslarni tozalang

Hayvon butunlay olib tashlanganda dispose() ni chaqiring. Bu uning GPU resurslarini bo‘shatadi va uni sahnadan olib tashlaydi.

wolf.dispose();

Foydali eksportlar va hujjatlar

Asosiy paket shuningdek listSpecies, loadSpecies, setWorkerFactory, clearBuildCache va QUALITY ni eksport qiladi:

import {
  createAnimal,
  listSpecies,
  loadSpecies,
  setWorkerFactory,
  clearBuildCache,
  QUALITY
} from 'procedural-animals';

Har bir opsiya, hodisa ma’lumotlari, holat maydoni va retsept haqida batafsil ma’lumot uchun repozitoriyning to‘liq ma’lumotnomasi va TypeScript deklaratsiyalari bilan tanishing.

Xulosa

three.js Procedural Animals three.js ilovasiga xilma-xil, skeletlangan va animatsiyalangan yovvoyi hayvonlarni qo‘shishning kodga asoslangan usulini taqdim etadi. createAnimal() dan boshlang, qaytarilgan obyektni sahnaga qo‘shing, hayvon API’si orqali uni boshqaring va har kadrda bir marta yangilang. Worker’lar, oldindan pishirish, seed asosidagi keshlash va bir nechta sifat darajalari bir xil ish jarayonidan ham batafsil yaqin tasvirlarda, ham katta to‘dalarda foydalanish imkonini beradi.