95 lines
3.6 KiB
JavaScript
95 lines
3.6 KiB
JavaScript
|
|
import * as THREE from 'three';
|
|
|
|
export class Field {
|
|
constructor(scene) {
|
|
this.scene = scene;
|
|
this.createField();
|
|
this.createLines();
|
|
this.createGoals();
|
|
}
|
|
|
|
createField() {
|
|
const fieldGeometry = new THREE.PlaneGeometry(60, 100);
|
|
const fieldMaterial = new THREE.MeshStandardMaterial({ color: 0x008000 }); // Green grass
|
|
const field = new THREE.Mesh(fieldGeometry, fieldMaterial);
|
|
field.rotation.x = -Math.PI / 2;
|
|
field.receiveShadow = true;
|
|
this.scene.add(field);
|
|
}
|
|
|
|
createLines() {
|
|
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
|
|
|
|
// Outer boundary
|
|
const boundary = new THREE.BufferGeometry().setFromPoints([
|
|
new THREE.Vector3(-30, 0.01, -50),
|
|
new THREE.Vector3(30, 0.01, -50),
|
|
new THREE.Vector3(30, 0.01, 50),
|
|
new THREE.Vector3(-30, 0.01, 50),
|
|
new THREE.Vector3(-30, 0.01, -50)
|
|
]);
|
|
const boundaryLine = new THREE.Line(boundary, lineMaterial);
|
|
this.scene.add(boundaryLine);
|
|
|
|
// Center line
|
|
const centerLineGeo = new THREE.BufferGeometry().setFromPoints([
|
|
new THREE.Vector3(-30, 0.01, 0),
|
|
new THREE.Vector3(30, 0.01, 0)
|
|
]);
|
|
const centerLine = new THREE.Line(centerLineGeo, lineMaterial);
|
|
this.scene.add(centerLine);
|
|
|
|
// Center circle
|
|
const centerCirclePoints = [];
|
|
const centerCircleRadius = 8;
|
|
for (let i = 0; i <= 64; i++) {
|
|
const theta = (i / 64) * Math.PI * 2;
|
|
centerCirclePoints.push(new THREE.Vector3(Math.cos(theta) * centerCircleRadius, 0.01, Math.sin(theta) * centerCircleRadius));
|
|
}
|
|
const centerCircleGeo = new THREE.BufferGeometry().setFromPoints(centerCirclePoints);
|
|
const centerCircleLine = new THREE.Line(centerCircleGeo, lineMaterial);
|
|
this.scene.add(centerCircleLine);
|
|
|
|
// Penalty Boxes
|
|
const penaltyBox1Geo = new THREE.BufferGeometry().setFromPoints([
|
|
new THREE.Vector3(15, 0.01, -50),
|
|
new THREE.Vector3(15, 0.01, -35),
|
|
new THREE.Vector3(-15, 0.01, -35),
|
|
new THREE.Vector3(-15, 0.01, -50),
|
|
new THREE.Vector3(15, 0.01, -50)
|
|
]);
|
|
const penaltyBox1 = new THREE.Line(penaltyBox1Geo, lineMaterial);
|
|
this.scene.add(penaltyBox1);
|
|
|
|
const penaltyBox2Geo = new THREE.BufferGeometry().setFromPoints([
|
|
new THREE.Vector3(15, 0.01, 50),
|
|
new THREE.Vector3(15, 0.01, 35),
|
|
new THREE.Vector3(-15, 0.01, 35),
|
|
new THREE.Vector3(-15, 0.01, 50),
|
|
new THREE.Vector3(15, 0.01, 50)
|
|
]);
|
|
const penaltyBox2 = new THREE.Line(penaltyBox2Geo, lineMaterial);
|
|
this.scene.add(penaltyBox2);
|
|
}
|
|
|
|
createGoals() {
|
|
const goalMaterial = new THREE.MeshStandardMaterial({ color: 0xCCCCCC, metalness: 0.8, roughness: 0.2 });
|
|
|
|
const goal1 = new THREE.Group();
|
|
const post1_1 = new THREE.Mesh(new THREE.BoxGeometry(1, 5, 1), goalMaterial);
|
|
post1_1.position.set(-10, 2.5, 0);
|
|
const post1_2 = new THREE.Mesh(new THREE.BoxGeometry(1, 5, 1), goalMaterial);
|
|
post1_2.position.set(10, 2.5, 0);
|
|
const crossbar1 = new THREE.Mesh(new THREE.BoxGeometry(21, 1, 1), goalMaterial);
|
|
crossbar1.position.set(0, 5, 0);
|
|
goal1.add(post1_1, post1_2, crossbar1);
|
|
goal1.position.z = -50;
|
|
this.scene.add(goal1);
|
|
|
|
const goal2 = goal1.clone();
|
|
goal2.position.z = 50;
|
|
this.scene.add(goal2);
|
|
}
|
|
}
|