Jenga Wanyama wa Kitaratibu na Wanaohuishwa katika Three.js

three.js Procedural Animals ni Nini?

three.js Procedural Animals ni maktaba yenye wanyama 24 wanaozalishwa wakati wa utekelezaji kwa ajili ya three.js. Badala ya kupakua modeli, maumbo ya uso, mifumo ya mifupa, au vipande vya uhuishaji, unaita createAnimal() na maktaba huunda mnyama kamili aliyehuishwa kwa kutumia msimbo.

Kila mnyama huchongwa kutoka kwenye signed distance fields, hubadilishwa kuwa mesh, huwekewa mfumo wa mifupa na ngozi, hufunikwa kwa manyoya, mabawa, au magamba, na hupewa uhuishaji kwa mienendo na vitendo vinavyotumia inverse kinematics. Miundo ya miili inayopatikana inajumuisha wanyama wenye makucha, wanyama wenye kwato, ndege, waogeleaji, nyoka, buibui, na wanyama wanaoruka kwa miruko.

Unaweza kuchunguza kila spishi, aina, kitendo, na mwonekano wa utatuzi katika onyesho la moja kwa moja, au kukagua chanzo katika hazina ya GitHub.

Vipengele Muhimu

• Spishi 24: Chaguo zinaanzia mbwa mwitu, paka, farasi, na sungura hadi ndege, samaki, nyoka, na buibui.
• Wanyama wenye mbegu: Mbegu huzalisha ukubwa, uwiano wa mwili, manyoya, jinsia, umri, na chaguo za aina zinazoweza kurudiwa, isipokuwa uzibadilishe.
• Uhuishaji wakati wa utekelezaji: Wanyama huchagua kiotomatiki mienendo inayofaa na hutoa vitendo kama kuketi, kulala, kula, kushambulia, na kuruka.
• Viwango vitano vya ubora: Chagua kutoka hero, high, medium, low, na crowd.
• Uundaji unaotumia Worker: Ujenzi hufanyika kwa chaguo-msingi katika Module Web Workers, pamoja na njia mbadala ya kutumia uzi unaoita.
• Uundaji wa nje ya mtandao: Jenga mapema mnyama mmoja kama faili la .animal kwa ajili ya kupakia ndani ya takribani milisekunde 20.
• Vidhibiti vinavyolenga michezo: Waongoze wanyama, wasogeze hadi maeneo lengwa, wafuate miili ya fizikia, wafuatilie walengwa, chezesha vitendo, na upokee matukio ya uchezaji.
• Msaada wa TypeScript: Kifurushi hutumia ES modules na kinajumuisha matamko ya TypeScript.

Usakinishaji

Maktaba hii inahitaji three.js r160 au toleo la baadaye kama utegemezi wake pekee wa rika. Sakinisha kifurushi na three.js kwa kutumia npm:

npm install procedural-animals three

Ikiwa kifurushi bado hakipatikani kwenye npm, kisakinishe moja kwa moja kutoka GitHub:

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

Unda Mnyama Wako wa Kwanza

Anza kwa kuleta three.js na createAnimal. Chaguo hili ni la kusubiri kwa sababu kujenga mesh, mfumo wa mifupa, vifuniko, na data inayohusiana huchukua muda.

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();

Kuna kanuni kadhaa muhimu katika mfano huu:

1. Unda mnyama ndani ya chaguo la async na usubiri matokeo.
2. Ongeza animal.object kwenye tukio, lakini acha mgeuko wa kitu hicho uwe identity. Mnyama husimamia harakati zake mwenyewe.
3. Tumia mbinu kama move(), moveTo(), au follow() kumwongoza.
4. Uite update(dt) mara moja tu kwa kila fremu, huku dt ikipimwa kwa sekunde.
5. Tumia kasi kutoka animal.gears kwa sababu majina ya gia yanayopatikana yanaweza kutofautiana kulingana na spishi.

Epuka await ya kiwango cha juu katika moduli ya kuingizia. Kulingana na nyaraka za mradi, inaweza kusababisha ujenzi wa Vite wa uzalishaji kukwama.

Harakati na Uelekezaji

Uendeshaji wa Moja kwa Moja

Mbinu ya move() hupokea kasi kwa mita kwa sekunde na mwelekeo kwa radiani. Mwelekeo wa 0 hutazama mhimili chanya wa Z.

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

Iite stop() mnyama anapotakiwa kuacha kusogea:

wolf.stop();

Sogea hadi Mahali Lengwa

Tumia moveTo() kumtuma mnyama kuelekea nukta ya ulimwengu. Hutoa tukio la arrive baada ya kufika mahali lengwa.

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

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

Fuata Mwili wa Fizikia

Ikiwa mfumo mwingine unasimamia mwili, pitisha nafasi na kasi yake ya sasa kwenye follow() kila fremu:

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

Fuatilia Mlengwa

Mfanye mnyama ageuze kichwa chake kuelekea mlengwa kwa kutumia lookAt(). Pitisha null ili kuacha ufuatiliaji.

wolf.lookAt(player.position);

// Later:
wolf.lookAt(null);

Vitendo vya Kucheza

Kila spishi inaunga mkono vitendo vya kawaida jump, sit, lie, sleep, eat, drink, attack, hit, death, na stand. Spishi pia zinaweza kutoa vitendo maalum. Kwa mfano, nyoka wanaweza kujikunja na kushambulia, ndege wanaweza kuruka na kutua, na sungura wanaweza kurukaruka na kugonga ardhi kwa miguu.

Mbinu ya play() hurejesha Promise ambayo matokeo yake yanaweza kuwa done, interrupted, stopped, au refused.

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

Kagua animal.actions badala ya kudhani kuwa spishi inaunga mkono kitendo maalum. Unaweza kusitisha kitendo kilichotajwa kwa kutumia stopAction():

wolf.stopAction('attack');

Jibu Matukio ya Wanyama

API ya matukio huruhusu mifumo ya mchezo kuitikia uhuishaji na mwendo. Matukio yanayopatikana ni pamoja na footstep, attackHit, actionStart, actionEnd, arrive, takeoff, land, death, vocalize, na wingbeat.

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

wolf.on('footstep', onFootstep);

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

// Remove a listener when it is no longer needed.
wolf.off('footstep', onFootstep);

Sanidi Mandhari na Maji

Chaguo la ground ni fungsi inayorejesha urefu wa mandhari kwa koordinati za X na Z. Koordinati zake lazima ziwe katika nafasi ya animal.object.parent, na urefu unaorejeshwa lazima ulingane na mandhari iliyoonyeshwa katika eneo.

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

Wanyama wa majini wanahitaji fungsi ya water na nafasi ya kuanzia iliyo chini ya uso wa maji. Fungi hiyo hurejesha urefu wa uso wa maji au null mahali ambapo hakuna maji.

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

scene.add(fish.object);

Wanyama wa nchi kavu wanaweza pia kutumia ufafanuzi wa maji kwa kunywa na kuingia majini. Ndege wanaweza kupewa safu ya perches iliyo na pointi za THREE.Vector3 wanazoweza kurukia.

Chagua Spishi, Aina na Wanyama Binafsi

Maktaba hii inajumuisha mbwa mwitu, mbwa, mbweha, paka, simba, duma, dubu, panya, sungura, farasi, kulungu, ng'ombe, nguruwe, kondoo, mbuzi, ngiri, vyura, kuku, kunguru, tai, samaki, papa, nyoka, na buibui.

Tumia seed kuunda mnyama binafsi anayeweza kurudiwa. Unaweza pia kuchagua wazi aina, jinsia, au umri wake:

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

Vitambulisho vya spishi vya maandishi hupakiwa inapohitajika. Ikiwa programu inahitaji spishi moja pekee, ingiza spishi hiyo moja kwa moja ili kuweka kifurushi kikiwa mahususi:

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

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

Chagua Kiwango Sahihi cha Ubora

• hero: Takriban vertexi 110,000 hadi 130,000 kwa picha za karibu za kiwango cha sinema.
• high: Takriban vertexi 65,000 hadi 80,000 kwa mnyama wa mchezaji. Hiki ndicho chaguo-msingi.
• medium: Takriban vertexi 25,000 hadi 32,000 kwa mitazamo ya umbali wa kati na simu.
• low: Takriban vertexi 11,000 hadi 15,000 kwa makundi ya wanyama takriban 10 hadi 20.
• crowd: Takriban vertexi 5,000 hadi 8,000 kwa makundi ya karibu wanyama 100, kwa draw call moja.

Unaweza kubadilisha maelezo ya manyoya kwenye mesh iliyopo kwa kutumia setQuality(). Kwa makundi makubwa, changanya kiwango cha crowd na setLod(2) ili kupunguza maelezo ya mwendo:

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

sheep.setLod(2);

Matokeo ya ujenzi huhifadhiwa kwa kuzingatia spishi, seed, ubora, na aina. Kwa hivyo, kundi la wanyama 100 linalotumia seed sita linahitaji miundo sita tofauti pekee. Gharama ya CPU iliyoandikwa ni takriban milisekunde 0.1 kwa mnyama kwa kila fremu.

Sanidi Web Workers

Ujenzi wa wanyama huchukua takriban sekunde 0.4 hadi 6. Kwa chaguo-msingi, ujenzi huendeshwa katika Web Workers za moduli. Ikiwa Worker haipatikani, maktaba hurudi kwenye thread inayoiita.

Usanidi wa Vite

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

webpack 5 na Parcel 2 hazihitaji usanidi wa ziada wa worker.

Vifungashaji Vingine

Kwa kifungashaji kingine, funga worker wewe mwenyewe:

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

Kisha sajili kiunda kinachounda worker:

import { setWorkerFactory } from 'procedural-animals';

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

Unaweza kuzima ujenzi wa worker kwa mnyama fulani, lakini kufanya hivyo huzuia thread inayoiita kwa muda wote wa ujenzi:

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

Andaa Wanyama kwa Upakiaji wa Haraka

Kwa mnyama anayejulikana, mtengeneze mapema kuwa faili la .animal. Hii hubadilisha ucheleweshaji wa uundaji wakati wa utekelezaji na kuwa upakiaji ambao README inakadiria kuwa takriban milisekunde 20.

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

Pakia faili lililotengenezwa kama ArrayBuffer na ulipitishe kupitia chaguo la baked:

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

Mnyama aliyotengenezwa mapema anapaswa kuendana na spishi na usanidi uliotayarishwa na amri hiyo.

Vidokezo vya Juu

Tumia Hali ya Mwendo ya Kusoma Pekee

Soma position, heading, speed, velocity, na state ili kuratibu kamera, uchezaji, au violesura. Usidhibiti kitu cha mzizi cha mnyama ili kuzalisha mwendo.

Ambatisha Vitu kwenye Pointi Zenye Majina

Mkusanyiko wa attachments hutoa pointi kama mouth, head, na back. Ndege pia hutoa viambatisho vya miguu, huku farasi wakitoa pointi zinazohusiana na upandaji, zikiwemo seat, mikanyagio, na vipande vya hatamu. Weka vitu vya ziada kuwa watoto wa vitu hivi vya viambatisho badala ya kukadiria mwenyewe nafasi zao zinazopewa uhai.

Tumia Vidhibiti vya Utatuzi na Vifuniko

API ya mnyama inajumuisha setDebug(mode, on) yenye hali albedo, weights, material, na bare. Tumia setCoverings(on) kuwasha au kuzima maganda ya manyoya.

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

Hesabu Mwelekeo Kuelekea Pointi

Kwa kuwa mwelekeo sifuri unaelekea Z chanya, tumia Math.atan2(dx, dz) unapohesabu mwelekeo kuelekea lengwa:

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
});

Safisha Rasilimali

เรียก dispose() mnyama anapoondolewa kabisa. Hii huachilia rasilimali zake za GPU na kumuondoa kwenye mandhari.

wolf.dispose();

Uhamishaji na Nyaraka Muhimu

Kifurushi kikuu pia huhamisha listSpecies, loadSpecies, setWorkerFactory, clearBuildCache, na QUALITY:

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

Kwa kila chaguo, data ya tukio, sehemu ya hali, na kichocheo, soma marejeleo kamili ya hazina na matamko ya TypeScript.

Hitimisho

three.js Procedural Animals hutoa njia inayotanguliza msimbo ya kuongeza wanyamapori wa aina mbalimbali, wenye mifupa ya uhuishaji, na waliohuishwa kwenye programu ya three.js. Anza na createAnimal(), ongeza kitu kinachorejeshwa kwenye mandhari, kiongoze kupitia API ya mnyama, na ukisasasishe mara moja kwa kila fremu. Workers, utengenezaji wa mapema, akiba iliyo na mbegu, na viwango vingi vya ubora huwezesha mtiririko huo huo kusaidia picha za karibu zenye maelezo mengi na makundi makubwa.