ASSISTANT
Создание 3D баскетбольной игры на HTML и JavaScript — увлекательный проект, который поможет вам освоить веб-разработку и основы 3D-графики. В этой инструкции я расскажу, как создать простую 3D игру с использованием библиотеки Three.js для графики и Cannon.js для физики. Мы добавим систему очков, усложним физику, добавим визуальные эффекты и реализуем механику броска мяча по нажатию пробела.
## Требования
1. **Текстовый редактор** (например, VS Code).
2. **Веб-браузер** (Google Chrome, Firefox и т.д.).
3. **Локальный веб-сервер** (например, [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) для VS Code), поскольку некоторые функции требуют запуска через HTTP.
## Структура проекта
Создайте папку для вашего проекта, например, `basketball-game`, и внутри создайте следующие файлы и папки:
```
basketball-game/
├── index.html
├── js/
│ └── main.js
├── css/
│ └── styles.css
└── assets/
├── textures/
└── models/
```
- **index.html**: Главная HTML-страница.
- **js/main.js**: Основной JavaScript-файл с логикой игры.
- **css/styles.css**: Стили для страницы.
- **assets/**: Папка для текстур и моделей (можно добавить при необходимости).
## Шаг 1: Подключение библиотек
Мы будем использовать три основные библиотеки:
1. **Three.js** — для 3D-графики.
2. **Cannon.js** — для физики.
3. **dat.GUI** (опционально) — для отладки и настройки параметров игры.
Добавьте следующие ссылки в раздел `<head>` вашего `index.html`:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>3D Баскетбольная Игра</title>
<link rel="stylesheet" href="css/styles.css">
<!-- Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- Cannon.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
</head>
<body>
<div id="score">Очки: 0</div>
<script src="js/main.js"></script>
</body>
</html>
```
## Шаг 2: Создание базовой сцены
В `js/main.js` добавьте код для инициализации сцены, камеры и рендера.
```javascript
// Инициализация сцены
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb); // Небесно-голубой фон
// Камера
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(0, 5, 15);
// Рендерер
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Освещение
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(10, 20, 10);
scene.add(directionalLight);
// Обработка изменения размера окна
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
```
## Шаг 3: Настройка физического мира
Добавим физический мир с использованием Cannon.js.
```javascript
// Физический мир
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // Гравитация
// Материалы
const groundMaterial = new CANNON.Material("groundMaterial");
const sphereMaterial = new CANNON.Material("sphereMaterial");
// Контактные материалы
const contactMaterial = new CANNON.ContactMaterial(
groundMaterial,
sphereMaterial,
{
friction: 0.4,
restitution: 0.7
}
);
world.addContactMaterial(contactMaterial);
// Функция обновления физики
const fixedTimeStep = 1.0 / 60.0; // 60FPS
const maxSubSteps = 3;
function updatePhysics() {
world.step(fixedTimeStep, deltaTime, maxSubSteps);
}
```
## Шаг 4: Создание пола и корзины
Добавим пол и корзину в сцену.
```javascript
// Пол (земля)
const groundGeometry = new THREE.PlaneGeometry(50, 50);
const groundMaterialVisual = new THREE.MeshStandardMaterial({ color: 0x228B22 });
const groundMesh = new THREE.Mesh(groundGeometry, groundMaterialVisual);
groundMesh.rotation.x = - Math.PI / 2;
scene.add(groundMesh);
// Физическое тело пола
const groundBody = new CANNON.Body({
mass: 0, // Статическое тело
shape: new CANNON.Plane(),
material: groundMaterial
});
groundBody.quaternion.setFromEuler(- Math.PI / 2, 0, 0);
world.addBody(groundBody);
// Корзина
const hoopRadius = 1;
const hoopThickness = 0.1;
const hoopGeometry = new THREE.TorusGeometry(hoopRadius, hoopThickness, 16, 100);
const hoopMaterialVisual = new THREE.MeshStandardMaterial({ color: 0xFF0000 });
const hoopMesh = new THREE.Mesh(hoopGeometry, hoopMaterialVisual);
hoopMesh.position.set(0, 10, -20);
hoopMesh.rotation.x = Math.PI / 2;
scene.add(hoopMesh);
// Ограничения физики для корзины (опционально)
```
## Шаг 5: Создание мяча
Создадим мяч с физическими свойствами и добавим его на сцену.
```javascript
// Мяч
const ballRadius = 0.5;
const ballGeometry = new THREE.SphereGeometry(ballRadius, 32, 32);
const ballMaterialVisual = new THREE.MeshStandardMaterial({ color: 0xFFFF00 });
const ballMesh = new THREE.Mesh(ballGeometry, ballMaterialVisual);
ballMesh.position.set(0, 5, 0);
scene.add(ballMesh);
// Физическое тело мяча
const ballShape = new CANNON.Sphere(ballRadius);
const ballBody = new CANNON.Body({
mass: 1,
shape: ballShape,
material: sphereMaterial,
position: new CANNON.Vec3(0, 5, 0)
});
ballBody.velocity.set(-5, 0, 0); // Изначально движется влево
world.addBody(ballBody);
```
## Шаг 6: Реализация механики броска
Добавим обработку нажатия пробела для броска мяча.
```javascript
// Счёт
let score = 0;
const scoreElement = document.getElementById('score');
scoreElement.style.position = 'absolute';
scoreElement.style.top = '20px';
scoreElement.style.left = '20px';
scoreElement.style.fontSize = '24px';
scoreElement.style.color = '#000';
// Функция обновления счёта
function updateScore(points) {
score += points;
scoreElement.innerText = `Очки: ${score}`;
}
// Обработка нажатия пробела
window.addEventListener('keydown', (event) => {
if (event.code === 'Space') {
shootBall();
}
});
// Функция броска мяча
function shootBall() {
// Проверка, не летит ли уже мяч
if (ballBody.velocity.length() < 0.1) {
// Устанавливаем позицию мяча
ballBody.position.set(0, 5, 0);
ballBody.velocity.set(0, 0, 0);
// Добавляем импульс вверх и вперед
const force = new CANNON.Vec3(0, 10, -15);
ballBody.applyImpulse(force, ballBody.position);
}
}
```
## Шаг 7: Детектирование попадания мяча в корзину
Добавим проверку пересечения мяча с корзиной для начисления очков.
```javascript
// Порог попадания (расстояние между центрами объектов)
const hitThreshold = hoopRadius + ballRadius;
// Функция проверки попадания
function checkHit() {
const ballPos = ballBody.position;
const hoopPos = new CANNON.Vec3(hoopMesh.position.x, hoopMesh.position.y, hoopMesh.position.z);
const distance = ballPos.distanceTo(hoopPos);
// Проверяем по оси Z (направление к корзине) и высоте
if (
Math.abs(ballPos.z - hoopPos.z) < hoopThickness &&
Math.abs(ballPos.y - hoopPos.y) < ballRadius &&
ballPos.x > -hoopRadius && ballPos.x < hoopRadius
) {
updateScore(1);
resetBall();
}
}
// Функция сброса мяча
function resetBall() {
ballBody.position.set(0, 5, 0);
ballBody.velocity.set(-5, 0, 0); // Изначально движется влево
}
```
## Шаг 8: Визуальные эффекты и улучшение физики
Добавим визуальные эффекты и усовершенствуем физику для более реалистичного поведения.
```javascript
// Добавление теней
renderer.shadowMap.enabled = true;
groundMesh.receiveShadow = true;
hoopMesh.castShadow = true;
ballMesh.castShadow = true;
directionalLight.castShadow = true;
// Улучшение физики
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;
// Функция рендера и анимации
let lastTime;
function animate(time) {
requestAnimationFrame(animate);
if (lastTime !== undefined) {
const deltaTime = (time - lastTime) / 1000;
updatePhysics();
}
lastTime = time;
// Обновление позиции мяча
ballMesh.position.copy(ballBody.position);
ballMesh.quaternion.copy(ballBody.quaternion);
// Проверка попадания
checkHit();
renderer.render(scene, camera);
}
animate();
```
## Шаг 9: Запуск локального сервера
Для корректной работы некоторых функций, таких как загрузка текстур или моделей, рекомендуется запускать проект через локальный веб-сервер.
1. **VS Code**: Установите расширение [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
2. **Запуск**:
- Откройте проект в VS Code.
- Правой кнопкой на `index.html` и выберите "Open with Live Server".
- Игра откроется в вашем браузере.
## Полный код `main.js`
Для удобства, ниже приведён полный код `js/main.js`:
```javascript
// Инициализация сцены
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb); // Небесно-голубой фон
// Камера
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(0, 5, 15);
// Рендерер
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// Освещение
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(10, 20, 10);
directionalLight.castShadow = true;
scene.add(directionalLight);
// Обработка изменения размера окна
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
// Физический мир
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // Гравитация
// Материалы
const groundMaterial = new CANNON.Material("groundMaterial");
const sphereMaterial = new CANNON.Material("sphereMaterial");
// Контактные материалы
const contactMaterial = new CANNON.ContactMaterial(
groundMaterial,
sphereMaterial,
{
friction: 0.4,
restitution: 0.7
}
);
world.addContactMaterial(contactMaterial);
// Пол (земля)
const groundGeometry = new THREE.PlaneGeometry(50, 50);
const groundMaterialVisual = new THREE.MeshStandardMaterial({ color: 0x228B22 });
const groundMesh = new THREE.Mesh(groundGeometry, groundMaterialVisual);
groundMesh.rotation.x = - Math.PI / 2;
groundMesh.receiveShadow = true;
scene.add(groundMesh);
// Физическое тело пола
const groundBody = new CANNON.Body({
mass: 0, // Статическое тело
shape: new CANNON.Plane(),
material: groundMaterial
});
groundBody.quaternion.setFromEuler(- Math.PI / 2, 0, 0);
world.addBody(groundBody);
// Корзина
const hoopRadius = 1;
const hoopThickness = 0.1;
const hoopGeometry = new THREE.TorusGeometry(hoopRadius, hoopThickness, 16, 100);
const hoopMaterialVisual = new THREE.MeshStandardMaterial({ color: 0xFF0000 });
const hoopMesh = new THREE.Mesh(hoopGeometry, hoopMaterialVisual);
hoopMesh.position.set(0, 10, -20);
hoopMesh.rotation.x = Math.PI / 2;
hoopMesh.castShadow = true;
scene.add(hoopMesh);
// Мяч
const ballRadius = 0.5;
const ballGeometry = new THREE.SphereGeometry(ballRadius, 32, 32);
const ballMaterialVisual = new THREE.MeshStandardMaterial({ color: 0xFFFF00 });
const ballMesh = new THREE.Mesh(ballGeometry, ballMaterialVisual);
ballMesh.castShadow = true;
scene.add(ballMesh);
// Физическое тело мяча
const ballShape = new CANNON.Sphere(ballRadius);
const ballBody = new CANNON.Body({
mass: 1,
shape: ballShape,
material: sphereMaterial,
position: new CANNON.Vec3(0, 5, 0)
});
ballBody.velocity.set(-5, 0, 0); // Изначально движется влево
world.addBody(ballBody);
// Счёт
let score = 0;
const scoreElement = document.getElementById('score');
scoreElement.style.position = 'absolute';
scoreElement.style.top = '20px';
scoreElement.style.left = '20px';
scoreElement.style.fontSize = '24px';
scoreElement.style.color = '#000';
// Функция обновления счёта
function updateScore(points) {
score += points;
scoreElement.innerText = `Очки: ${score}`;
}
// Обработка нажатия пробела
window.addEventListener('keydown', (event) => {
if (event.code === 'Space') {
shootBall();
}
});
// Функция броска мяча
function shootBall() {
// Проверка, не летит ли уже мяч
if (ballBody.velocity.length() < 0.1) {
// Устанавливаем позицию мяча
ballBody.position.set(0, 5, 0);
ballBody.velocity.set(0, 0, 0);
ballBody.angularVelocity.setZero();
ballBody.quaternion.set(0, 0, 0, 1);
// Добавляем импульс вверх и вперед
const force = new CANNON.Vec3(0, 10, -15);
ballBody.applyImpulse(force, ballBody.position);
}
}
// Порог попадания (расстояние между центрами объектов)
const hitThreshold = hoopRadius + ballRadius;
// Функция проверки попадания
function checkHit() {
const ballPos = ballBody.position;
const hoopPos = new CANNON.Vec3(hoopMesh.position.x, hoopMesh.position.y, hoopMesh.position.z);
// Позиция корзины относительно мяча
const relativeZ = ballPos.z - hoopPos.z;
const relativeY = ballPos.y - hoopPos.y;
const relativeX = Math.abs(ballPos.x - hoopPos.x);
// Проверяем пересечение по оси Z, Y и X
if (
Math.abs(relativeZ) < hoopThickness &&
Math.abs(relativeY) < ballRadius &&
relativeX < hoopRadius
) {
updateScore(1);
resetBall();
}
}
// Функция сброса мяча
function resetBall() {
ballBody.position.set(0, 5, 0);
ballBody.velocity.set(-5, 0, 0); // Изначально движется влево
ballBody.angularVelocity.setZero();
ballBody.quaternion.set(0, 0, 0, 1);
}
// Функция обновления физики
let lastTime;
const fixedTimeStep = 1.0 / 60.0; // 60FPS
const maxSubSteps = 3;
function updatePhysics() {
world.step(fixedTimeStep);
}
// Функция рендера и анимации
function animate(time) {
requestAnimationFrame(animate);
if (lastTime !== undefined) {
const deltaTime = (time - lastTime) / 1000;
updatePhysics();
}
lastTime = time;
// Обновление позиции мяча
ballMesh.position.copy(ballBody.position);
ballMesh.quaternion.copy(ballBody.quaternion);
// Проверка попадания
checkHit();
renderer.render(scene, camera);
}
animate();
```
## Дополнительные улучшения
1. **Дополнительные уровни и препятствия**: Добавьте преграды или движущиеся цели для усложнения игры.
2. **Анимации**: Добавьте анимацию движения камеры или мяча.
3. **Звуковые эффекты**: Добавьте звуки броска и попадания.
4. **Меню и интерфейс**: Создайте стартовое меню и экран паузы.
5. **Улучшенная физика**: Используйте более точные настройки физики для реалистичного поведения мяча.
## Заключение
Этот базовый пример демонстрирует, как создать простую 3D баскетбольную игру с использованием HTML, JavaScript, Three.js и Cannon.js. Вы можете расширять и улучшать игру, добавляя новые функции и улучшая графику и физику. Экспериментируйте с различными настройками и создавайте уникальные игровые механики!