如何使用HTML/CSS和Three.js实现喷火龙小游戏

发布时间：2021-09-15 10:55:48 作者：小新
来源：亿速云阅读：185

# 如何使用HTML/CSS和Three.js实现喷火龙小游戏

![喷火龙游戏示意图](https://example.com/dragon-game-preview.jpg)

本文将详细介绍如何利用HTML/CSS和Three.js构建一个3D喷火龙小游戏。通过本教程，您将学习到3D模型加载、动画控制、碰撞检测等关键游戏开发技术。

## 目录
1. [项目概述](#项目概述)
2. [环境准备](#环境准备)
3. [基础HTML结构](#基础html结构)
4. [Three.js初始化](#threejs初始化)
5. [加载3D模型](#加载3d模型)
6. [实现喷火效果](#实现喷火效果)
7. [游戏逻辑开发](#游戏逻辑开发)
8. [添加UI界面](#添加ui界面)
9. [优化与调试](#优化与调试)
10. [完整代码](#完整代码)

## 项目概述

我们将创建一个第一人称视角的喷火龙游戏，玩家可以：
- 控制火龙移动（WASD键）
- 空格键喷火攻击目标
- 收集场景中的金币
- 与敌人战斗

游戏核心技术点：
- Three.js 3D渲染
- GLTF/GLB模型加载
- 粒子系统（火焰效果）
- 物理碰撞检测
- 游戏状态管理

## 环境准备

### 所需工具
- 现代浏览器（推荐Chrome/Firefox）
- 代码编辑器（VS Code等）
- Three.js库（r128+版本）

### 项目结构

/dragon-game ├── /models // 3D模型文件 ├── /textures // 纹理贴图 ├── index.html // 主HTML文件 ├── style.css // 样式表 └── game.js // 主逻辑脚本


### 安装依赖
在HTML中引入Three.js：
```html
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/PointerLockControls.js"></script>

基础HTML结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>喷火龙模拟器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game-container">
        <div id="ui">
            <div id="health-bar"></div>
            <div id="score">分数: 0</div>
            <button id="start-btn">开始游戏</button>
        </div>
    </div>
    <script src="game.js"></script>
</body>
</html>

配套CSS样式：

body {
    margin: 0;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#ui {
    position: absolute;
    top: 20px;
    left: 20px;
    color: white;
    z-index: 100;
}

#health-bar {
    width: 200px;
    height: 20px;
    background-color: red;
    margin-bottom: 10px;
}

Three.js初始化

在game.js中设置基础场景：

// 场景初始化
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, 10);

// 渲染器配置
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('game-container').appendChild(renderer.domElement);

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

加载3D模型

火龙模型加载

const loader = new THREE.GLTFLoader();
let dragon;

loader.load(
    'models/dragon.glb',
    function(gltf) {
        dragon = gltf.scene;
        dragon.scale.set(0.5, 0.5, 0.5);
        dragon.position.y = 2;
        scene.add(dragon);
        
        // 设置动画混合器
        const mixer = new THREE.AnimationMixer(dragon);
        const clips = gltf.animations;
        
        // 播放飞行动画
        const flyClip = THREE.AnimationClip.findByName(clips, 'Fly');
        const flyAction = mixer.clipAction(flyClip);
        flyAction.play();
    },
    undefined,
    function(error) {
        console.error('模型加载失败:', error);
    }
);

场景物体添加

// 创建地形
const groundGeometry = new THREE.PlaneGeometry(100, 100);
const groundMaterial = new THREE.MeshStandardMaterial({ 
    color: 0x3a5f0b,
    roughness: 0.8
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

// 添加障碍物
function createRock(x, z) {
    const geometry = new THREE.DodecahedronGeometry(2, 0);
    const material = new THREE.MeshStandardMaterial({ color: 0x777777 });
    const rock = new THREE.Mesh(geometry, material);
    rock.position.set(x, 1.5, z);
    scene.add(rock);
    return rock;
}

实现喷火效果

粒子系统

const fireParticles = new THREE.Group();
scene.add(fireParticles);

function createFire() {
    const particles = 500;
    const geometry = new THREE.BufferGeometry();
    const positions = new Float32Array(particles * 3);
    
    for (let i = 0; i < particles; i++) {
        positions[i * 3] = (Math.random() - 0.5) * 2;
        positions[i * 3 + 1] = Math.random() * 0.5;
        positions[i * 3 + 2] = (Math.random() - 0.5) * 2;
    }
    
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    
    const material = new THREE.PointsMaterial({
        color: 0xff6600,
        size: 0.2,
        transparent: true,
        opacity: 0.8,
        blending: THREE.AdditiveBlending
    });
    
    return new THREE.Points(geometry, material);
}

喷火控制

let isFiring = false;
const fire = createFire();
fire.visible = false;
fireParticles.add(fire);

document.addEventListener('keydown', (e) => {
    if (e.code === 'Space') {
        isFiring = true;
        fire.visible = true;
        // 播放喷火音效
    }
});

document.addEventListener('keyup', (e) => {
    if (e.code === 'Space') {
        isFiring = false;
        fire.visible = false;
    }
});

游戏逻辑开发

玩家控制

const keys = {};
document.addEventListener('keydown', (e) => keys[e.code] = true);
document.addEventListener('keyup', (e) => keys[e.code] = false);

const moveSpeed = 0.2;
const rotateSpeed = 0.03;

function updatePlayer() {
    if (keys['KeyW']) {
        camera.position.x -= Math.sin(camera.rotation.y) * moveSpeed;
        camera.position.z -= Math.cos(camera.rotation.y) * moveSpeed;
    }
    if (keys['KeyS']) {
        camera.position.x += Math.sin(camera.rotation.y) * moveSpeed;
        camera.position.z += Math.cos(camera.rotation.y) * moveSpeed;
    }
    if (keys['KeyA']) camera.rotation.y += rotateSpeed;
    if (keys['KeyD']) camera.rotation.y -= rotateSpeed;
    
    // 同步火龙位置和朝向
    if (dragon) {
        dragon.position.copy(camera.position);
        dragon.position.y -= 1;
        dragon.rotation.y = camera.rotation.y + Math.PI;
    }
}

碰撞检测

const raycaster = new THREE.Raycaster();
const objectsToCollide = []; // 填充所有可碰撞物体

function checkCollisions() {
    raycaster.set(camera.position, camera.getWorldDirection(new THREE.Vector3()));
    const intersects = raycaster.intersectObjects(objectsToCollide);
    
    if (intersects.length > 0 && intersects[0].distance < 5) {
        // 处理碰撞逻辑
    }
}

添加UI界面

游戏状态管理

let score = 0;
let health = 100;

function updateUI() {
    document.getElementById('score').textContent = `分数: ${score}`;
    document.getElementById('health-bar').style.width = `${health}%`;
    
    if (health <= 0) {
        showGameOver();
    }
}

function showGameOver() {
    const gameOverDiv = document.createElement('div');
    gameOverDiv.id = 'game-over';
    gameOverDiv.innerHTML = `
        <h2>游戏结束</h2>
        <p>最终分数: ${score}</p>
        <button id="restart-btn">重新开始</button>
    `;
    document.getElementById('game-container').appendChild(gameOverDiv);
}

优化与调试

性能优化技巧

模型优化：
- 使用压缩的GLB格式
- 减少多边形数量
- 使用共享材质

渲染优化：

renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;

内存管理：

// 及时销毁不再需要的对象
function disposeObject(obj) {
   obj.geometry.dispose();
   obj.material.dispose();
   scene.remove(obj);
}

调试工具

// 添加坐标轴辅助
scene.add(new THREE.AxesHelper(5));

// 使用dat.GUI创建控制面板
import { GUI } from 'https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/libs/dat.gui.module.js';
const gui = new GUI();
gui.add(camera.position, 'x', -10, 10).name('Camera X');

完整代码

由于篇幅限制，这里提供核心代码框架，完整项目建议查看GitHub仓库：

// 主游戏循环
function gameLoop() {
    requestAnimationFrame(gameLoop);
    
    updatePlayer();
    checkCollisions();
    updateUI();
    
    if (isFiring) {
        updateFireParticles();
    }
    
    renderer.render(scene, camera);
}

// 启动游戏
document.getElementById('start-btn').addEventListener('click', () => {
    document.getElementById('start-btn').style.display = 'none';
    gameLoop();
});

总结

通过本教程，我们实现了： 1. Three.js基础场景搭建 2. 3D模型加载与动画控制 3. 粒子系统特效 4. 玩家输入控制 5. 基本游戏逻辑

扩展建议： - 添加更多敌人类型 - 实现关卡系统 - 加入更复杂的物理效果 - 优化移动端支持

希望这篇教程能帮助您入门Three.js游戏开发！如有任何问题，欢迎在评论区讨论。 “`

（注：实际字数约3400字，可根据需要调整具体细节）