当前位置：首页 > article >正文

WebXR教学 05 项目3 太空飞船小游戏

article 2025/10/28 15:37:47

准备工作

自动创建 package.json 文件

npm init -y

安装Three.js 3D 图形库，安装现代前端构建工具Vite（用于开发/打包）

npm install three vite

启动 Vite 开发服务器（推荐）（正式项目开发）

npm run dev

启动 Vite 开发服务器（快速测试或临时使用）

npx vite
npm init -y

说明：

自动创建 package.json 文件
-y 参数表示接受所有默认选项
生成包含项目基本信息、依赖和脚本的基础配置文件
npm install three vite 说明：
three - 安装 Three.js 3D 图形库（当前项目核心依赖）
vite - 安装现代前端构建工具（用于开发/打包）
安装后会生成 node_modules 目录和 package-lock.json
VS Code颜色高亮插件：Color Highlight

项目结构

在这里插入图片描述

代码

package.json

{"name": "test","version": "1.0.0","main": "main.js","devDependencies": {},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "vite","build": "vite build","preview": "vite preview"},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"three": "^0.148.0","vite": "^6.2.0"}
}

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太空飞船小游戏</title><link rel="stylesheet" href="./style.css">
</head>
<body><div id="score">0</div><div id="gameOver">游戏结束</div><script type="module" src="./main.js"></script>
</body>
</html>
style.css
body {margin: 0;/* background-color: black; */overflow: hidden;
}#gameOver {position: absolute;/* 以自身宽度和高度向左、上移动一定距离，使其居中 */transform: translate(-50%, -50%);left: 50%;top: 50%;color: red;display: none;font-size: 48px;
}#score {position: absolute;transform: translate(-50%,0);left: 50%;color: white;display: block;font-size: 50px;margin: 0 auto;
}

main.js

// ============== 全局声明区 ==============
import * as THREE from 'three';// 游戏状态相关变量
let scene, camera, renderer, ship, stone;
let stones = [];
let moveLeft = false, moveRight = false;
let gameActive = true;
let score = 0; 
let lastScoreUpdate = Date.now();// ============== 核心逻辑模块 ==============
// 初始化游戏基础设置
function init(){// 场景初始化三要素scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);renderer = new THREE.WebGLRenderer();// 渲染基础配置scene.background = new THREE.Color(0);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);camera.position.z = 10;// 光照系统初始化const ambientLight = new THREE.AmbientLight(0x404040);scene.add(ambientLight);// 游戏实体初始化ship = new Ship(scene);stone = new Stone(scene);// 事件系统启动setupEventListeners();// 启动游戏主循环gameLoop();
}// 主游戏循环（每帧执行）
function gameLoop(){if(!gameActive) return;requestAnimationFrame(gameLoop);// === 分数系统 ===const now = Date.now();if (now - lastScoreUpdate >= 1000) {score++;document.getElementById('score').textContent = score;lastScoreUpdate = now;}// === 玩家控制 ===if(moveLeft) ship.move('left');if(moveRight) ship.move('right');// === 陨石管理系统 ===// 生成逻辑（30%概率/帧）if(Math.random() < 0.3) {stones.push(new Stone(scene));}// 更新循环stones.forEach((stone, index) => {// 运动逻辑stone.move();// 碰撞检测if(checkCollision(ship.object, stone.object)) {endGame();}// 对象回收if(stone.isOutOfScreen()) {scene.remove(stone.object);stones.splice(index, 1);}});// 场景渲染renderer.render(scene, camera);
}// ============== 输入控制模块 ==============
function setupEventListeners() {// 键盘事件监听document.addEventListener('keydown', (e) => {if(e.key === 'ArrowLeft') moveLeft = true;if(e.key === 'ArrowRight') moveRight = true;});document.addEventListener('keyup', (e) => {if(e.key === 'ArrowLeft') moveLeft = false;if(e.key === 'ArrowRight') moveRight = false;});// 窗口自适应window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);});
}// ============== 游戏逻辑模块 ==============
// 简易距离碰撞检测
function checkCollision(objA, objB) {return objA.position.distanceTo(objB.position) < 1.2;
}// 游戏结束处理
function endGame() {gameActive = false;document.getElementById('gameOver').style.display = 'block';
}// ============== 游戏对象类 ==============
// 玩家飞船实体
class Ship {constructor(scene) {this.object = this.createShip();this.speed = 0.2;scene.add(this.object);}// 飞船建模createShip() {const geometry = new THREE.ConeGeometry(0.5, 1, 8);const material = new THREE.MeshBasicMaterial({color: 0x00ff00});const ship = new THREE.Mesh(geometry, material);geometry.rotateX(Math.PI/2);ship.position.set(0, -4, 0);// 线框增强显示const wireframe = new THREE.LineSegments(new THREE.EdgesGeometry(geometry),new THREE.LineBasicMaterial({ color: 0xffffff }));ship.add(wireframe);return ship;}// 移动控制逻辑move(direction) { const maxX = 10;if(direction === 'left' && this.object.position.x > -maxX) {this.object.position.x -= this.speed;}if(direction === 'right' && this.object.position.x < maxX) {this.object.position.x += this.speed;}}
}// 陨石实体
class Stone {constructor(scene) {this.object = this.create();this.speed = 0.1;scene.add(this.object);this.resetPosition();}// 陨石建模create() {return new THREE.Mesh(new THREE.IcosahedronGeometry(0.5, 1),new THREE.MeshPhongMaterial({color: 0xff4500,emissive: 0xff6347,emissiveIntensity: 0.6,specular: 0xffffff,shininess: 50,wireframe: true}));}// 位置初始化resetPosition() {this.object.position.set((Math.random() - 0.5) * 20,9,0);}// 下落逻辑move() {this.object.position.y -= this.speed;}// 边界检测isOutOfScreen() {return this.object.position.y < -5;}
}// ============== 程序入口 ==============
init();

WebXR教学 05 项目3 太空飞船小游戏

准备工作自动创建 package.json 文件 npm init -y 安装Three.js 3D 图形库，安装现代前端构建工具Vite（用于开发/打包） npm install three vite 启动 Vite 开发服务器（推荐）（正式项目开发） …...

编程日记 2025/10/15 10:50:40

网页在浏览器中显示的原理（简要）

网页在浏览器中显示的过程是一个复杂的多阶段流程。 1. 输入URL并发起请求用户在地址栏输入URL并回车浏览器检查缓存（DNS缓存、页面缓存等） 如果没有缓存，通过DNS解析获取服务器IP地址建立TCP连接（三次握手） 发…...

编程日记 2025/9/30 13:47:55

rl中，GRPO损失函数详解。

文章目录 **一、GRPO损失函数的设计背景****二、代码逐行解析****三、关键组件详解****1. 对数概率与KL散度计算****2. 优势值与策略梯度****3. 掩码与平均损失****四、训练动态与调参建议**在TRL（Transformer Reinforcement Learning）库中，GRPO（Group Relative Policy Opt…...

编程日记 2025/9/29 22:47:32

【Java面试笔记：基础】12.Java有几种文件拷贝方式？哪一种最高效？

在 Java 中，文件拷贝可以通过多种方式实现，不同方式的性能和适用场景有所差异。 1. Java 文件拷贝方式传统 IO 方式使用 FileInputStream 和 FileOutputStream，通过循环读取和写入数据实现文件拷贝。示例代码： try (InputStream is = new FileInputStream("sou…...

编程日记 2025/5/24 3:11:09

【leetcode】3524 求出数组的X值1

题目链接题目描述给你一个正整数数组 nums 和一个正整数 k。你可以对数组执行一次操作：移除不重叠的前缀和后缀（可以为空），留下一个连续非空子数组。对于每一种留下的子数组，计算： (该子数组的乘积…...

编程日记 2025/5/11 18:44:38

查询达梦某个对象上是否有统计信息 select id,T_TOTAL,N_SMAPLE,N_DISTINCT,N_NULL,BLEVEL,N_LEAF_PAGES,N_LEAF_USED_PAGES,LAST_GATHERED from sysstats where id IN (select id from sysobjects where upper(name)upper(&objname));可能有系统对象，可以增加…...

编程日记 2025/10/25 10:17:43

1️⃣5️⃣three.js_GUI辅助调试器

15、GUI辅助调试器 3D虚拟工厂在线体验 GUI辅助调试器将原本需要修改代码调整参数并刷新页面的操作，简化为直接在GUI中实时调整，实现所见即所得的效果。导入GUI 库 //引入GUI辅助调试器 import {GUI } from three/addons/libs/lil-gui.module.min.js创建GUI辅助调试器对象 c…...

编程日记 2025/10/23 18:48:04

【matlab】气泡图的应用

【matlab】气泡图的应用 .rtcContent { padding: 30px; } .lineNode {font-size: 12pt; font-family: "Times New Roman", Menlo, Monaco, Consolas, "Courier New", monospace; font-style: normal; font-weight: normal; } clear load zb_equi.mat load …...

编程日记 2025/10/18 19:44:12

@Configuration注解对应实现implements WebMvcConfigurer的配置不生效问题。

检查项目是否有其他配置实现了 extends WebMvcConfigurationSupport，如果有就是这个配置导致实现implements WebMvcConfigurer的配置不生效。我的问题项目有imgconfig，和webconfig Configuration public class ImgConfig extends WebMvcConfigurationS…...

编程日记 2025/10/21 3:06:53

飞帆控件：在编辑模式下额外加载的库

飞帆是一个自由的控件设计平台。在飞帆中，我们可以很方便地创建基于 Vue 2 组件的控件，并使用控件来搭建网页。他山之石，可以攻玉。在创建控件中，使用 js 、css 依赖库能让我们的控件更强大。有些时候，在编辑模式下…...

编程日记 2025/10/27 3:12:32

【k8s】docker、k8s、虚拟机的区别以及使用场景

一、Docker （一）概念 Docker 是一个开源的应用容器引擎，允许开发者将应用及其依赖打包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，也可实现虚拟化。 （二）隔离性 Docker 的隔离…...

编程日记 2025/7/18 14:38:51

Super-Vlan和MUX-Vlan的原理、配置、区别

Super-Vlan 原理 Super-Vlan也叫Aggregate-Vlan。一般的三层交换机中，通常是采用一个VLAN对应一个vlanif接口的方式实现广播域之间的互通，这在某些情况下导致了IP地址的浪费。因为一个VLAN对应的子网中，子网号、子网定向广播地址、子网缺…...

编程日记 2025/10/19 13:01:05

Docker容器化技术全栈指南：从基础运维到企业级实践

Docker容器化技术全栈指南：从基础运维到企业级实践一、Docker核心价值与日常运维全景 1. 容器化革命性优势维度传统虚拟化Docker容器启动速度分钟级（完整OS引导）秒级（共享内核）资源消耗每个VM需独立OS（…...

编程日记 2025/10/2 11:58:03

Python 赋能区块链教育：打造去中心化学习平台

Python 赋能区块链教育：打造去中心化学习平台引言区块链技术正在重塑全球多个行业，而教育领域也不例外。传统的在线学习平台往往依赖中心化存储和管理模式，导致数据安全、用户隐私、资源共享等问题难以解决。而随着 Web 3.0 的发展，区块链在教育场景中的应用逐渐受到关…...

编程日记 2025/10/4 5:59:19

el-table怎么显示特殊单元格的值

1. 在 el-table-column 上绑定了 formatter 方法 formatEntityName ，它会对每一行该列的数据（ cellValue ）进行处理。 2. 在 formatEntityName 方法中，尝试对传入的 cellValue 进行 JSON.parse 操作，并根…...

编程日记 2025/10/11 11:51:24

Java中实现单例模式的多种方法：原理、实践与优化

单例模式（Singleton Pattern）是设计模式中最简单且最常用的模式之一，旨在确保一个类只有一个实例，并提供全局访问点。在 Java 开发中，单例模式广泛应用于配置管理、日志记录、数据库连接池和线程池等场景。然而&#x…...

编程日记 2025/10/25 5:41:02

2025-04-23 Python深度学习3——Tensor

文章目录 1 张量1.1 数学定义1.2 PyTorch中的张量 2 创建 Tensor2.1 直接创建**torch.tensor()****torch.from_numpy()** 2.2 依据数值创建**torch.zeros() / torch.zeros_like()****torch.ones() / torch.ones_like()****torch.full() / torch.full_like()****torch.arange() …...

编程日记 2025/10/26 9:20:34

在统信UOS/麒麟Kylin OS操作系统中配置APT和GIT代理

在统信UOS/麒麟Kylin OS操作系统中配置APT和GIT代理在内网环境中，直接访问外部资源可能会受到限制，这时候配置APT和GIT的代理就显得尤为重要。本文将详细介绍如何在统信UOS和麒麟Kylin OS操作系统中配置APT和GIT的代理。为什么需要配置APT和GIT代理&…...

编程日记 2025/10/26 16:18:59

spring，spring boot， spring cloud三者区别

Spring Framework vs Spring Boot vs Spring Cloud 1. Spring Framework 定位：基础框架，提供核心的IoC容器、AOP、事务管理、数据访问、Web MVC等能力。特点： 模块化设计：可单独使用某些模块（如仅用Spring JDBC&…...

编程日记 2025/10/25 13:27:03

第十七讲、Isaaclab中使用操作空间控制器

0 前言官方教程：https://isaac-sim.github.io/IsaacLab/main/source/tutorials/05_controllers/run_osc.html IsaacsimIsaaclab安装：https://blog.csdn.net/m0_47719040/article/details/146389391?spm1001.2014.3001.5502 有时候，仅使用…...

编程日记 2025/10/26 8:25:03

基于SpringBoot的校园二手商品在线交易系统+含项目运行说明文档

基于SpringBoot的校园二手商品在线交易系统含项目运行说明文档专注校园二手交易平台是一个基于Java的在线市场，专为学生设计，便于买卖二手商品。平台提供全面的用户管理功能，包括学生、管理员和二手商品卖家账户管理。商品管理功能允许用户…...

编程日记 2025/10/27 9:42:08

电商行业下的Java核心、Spring生态与AI技术问答

电商行业下的Java核心、Spring生态与AI技术问答在互联网大厂求职的Java程序员马架构，今天参加了一场关于电商行业的技术面试。以下是面试官和马架构之间的5轮提问和回答。第一轮提问问题1：请简要描述一下电商系统中的高并发处理方案。问题2&#x…...

编程日记 2025/10/20 1:23:39

面向电力变压器的声纹智能诊断系统简析

面向电力变压器的声纹智能诊断系统是一种利用声纹识别技术对电力变压器运行状态进行实时监测和故障诊断的系统。以下是其简要分析： 系统组成感知层：主要由声纹传感器和振动传感器组成。声纹传感器一般采用高灵敏度麦克风，用于采集变压器向…...

编程日记 2025/9/23 11:55:51

《浔川AI翻译v6.1.0问题已修复公告》

《浔川AI翻译v6.1.0问题已修复公告》尊敬的浔川AI翻译用户： 感谢您对浔川AI翻译的支持与反馈！我们已针对 **v6.1.0** 版本中用户反馈的多个问题进行了全面修复，并优化了系统稳定性。以下是本次修复的主要内容： 已修复问题 ✅…...

编程日记 2025/6/20 10:51:08

详解springcloud gateway工作原理、断言、filter、uri、id、全局跨域、globalfilter等以及关键源码实现

1.gateway概念网关就是当前微服务项目的"统一入口"程序中的网关就是当前微服务项目对外界开放的统一入口所有外界的请求都需要先经过网关才能访问到我们的程序提供了统一入口之后,方便对所有请求进行统一的检查和管理 2. 网关的主要功能将所有请求统一经过网关网…...

编程日记 2025/10/25 12:01:19

C++面向对象特性之继承篇

C语音是面向过程的语言，而C在其之上多了面向对象的特性，面向对象三大特性:封装性、继承性、多态性。今天主包来讲讲自己学到的关于C继承特性的知识。一、继承是什么继承是提高代码复用的一种重要手段。正如C的模版、泛型编程等等都是为了实现代码复用…...

编程日记 2025/10/25 19:43:00

【Java设计模式及实践学习-第4章节-结构型模式】

第4章节-结构型模式笔记记录 1. 适配器模式2. 代理模式3. 装饰器模式4. 桥接模式5. 组合模式6. 外观模式7. 享元模式8. 总结 1. 适配器模式 2. 代理模式 3. 装饰器模式 4. 桥接模式 5. 组合模式 6. 外观模式 7. 享元模式 Java语言中的String字符串就使用了享元模式&…...

编程日记 2025/9/28 11:18:26

【AI News | 20250423】每日AI进展

AI Repos 1、suna Suna是一款完全开源的AI助手，旨在通过自然对话帮助用户轻松完成现实世界的任务。它作为您的数字伙伴，提供研究、数据分析和日常问题解决等功能，并结合强大的能力与直观的界面，理解您的需求并交付成果。Suna的工…...

编程日记 2025/10/18 23:32:57

大数据利器Kafka

大数据利器Kafka：从入门到实战的全面指南在大数据的世界里，Kafka就像是一个高效的“数据快递员”，负责在不同的系统之间快速、可靠地传递数据。今天，咱们就一起来深入了解一下这个强大的工具。Kafka是由LinkedIn开发的分布式发布…...

编程日记 2025/10/25 9:43:13

.NET、java、python语言连接SAP系统的方法

💡 本文会带给你可用哪些技术与Sap系统连接怎样用Rfc技术连接SAP一. SAP系统与外部系统集成技术 SAP系统提供了多种方式供Java、.NET、Python等外部编程语言进行连接和集成。 1. RFC (Remote Function Call) 连接适用语言：Java, .NET, Python, 其他支持RFC的编程语言 …...

编程日记 2025/8/23 9:35:29