Three.js ile tarayıcıda ilk tarla

Tarayıcı oyunlarında ilk sahne, oyuncunun “bu oyun hızlı” diye karar verdiği yerdir. Bu yazıda Three.js ile düşük poligonlu bir tarla kurup parsellere tıklanabilir hale getireceğiz.

Sahne, kamera, ışık

Çiftlik oyunlarında genellikle yukarıdan, hafif eğik bakan bir kamera kullanılır. Ortografik kamera, uzaklığa göre küçülme olmadığı için tahtayı bir masa oyunu gibi gösterir.

import * as THREE from 'three';

const scene = new THREE.Scene();
const aspect = innerWidth / innerHeight;
const camera = new THREE.OrthographicCamera(-10 * aspect, 10 * aspect, 10, -10, 0.1, 100);
camera.position.set(12, 14, 12);
camera.lookAt(0, 0, 0);

scene.add(new THREE.HemisphereLight(0xffffff, 0x6b8f5a, 1.1));
const sun = new THREE.DirectionalLight(0xfff1d6, 1.4);
sun.position.set(6, 10, 4);
scene.add(sun);

Parselleri dizmek

Her parsel ince bir kutu. Aynı geometriyi yüzlerce kez çizeceksek InstancedMesh kullanmak çizim çağrısını tek bir çağrıya indirir.

const plot = new THREE.BoxGeometry(1.8, 0.2, 1.8);
const soil = new THREE.MeshLambertMaterial({ color: 0x8a5a3b });
const field = new THREE.InstancedMesh(plot, soil, 9);
const m = new THREE.Matrix4();
for (let i = 0; i < 9; i++) {
  m.setPosition((i % 3) * 2 - 2, 0, Math.floor(i / 3) * 2 - 2);
  field.setMatrixAt(i, m);
}
scene.add(field);

Tıklama: hangi parsel?

Raycaster, ekrandaki bir noktadan sahneye ışın gönderir. InstancedMesh ile kesişimde instanceId bize parselin numarasını verir.

const ray = new THREE.Raycaster();
addEventListener('pointerdown', (e) => {
  const p = new THREE.Vector2((e.clientX / innerWidth) * 2 - 1, -(e.clientY / innerHeight) * 2 + 1);
  ray.setFromCamera(p, camera);
  const hit = ray.intersectObject(field)[0];
  if (hit) selectPlot(hit.instanceId);
});

Performans için üç kural

• Aynı nesneyi tekrar tekrar çiziyorsan instancing kullan.
• Gölgeleri yalnızca gereken ışıkta aç; mobilde en pahalı ayar odur.
• Dokuları sıkıştır ve sahneyi, sayfanın geri kalanı açıldıktan sonra yükle.

Bu adımlar bir oyunun iskeletidir. Döngü, görevler ve ekonomi bunun üstüne kurulur. Canlı bir örnek görmek istersen Farmie’yi açabilirsin.