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

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

news 来源：原创 2025/7/15 5:19:52

准备工作

自动创建 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/7/15 5:19:52

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

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

编程日记 2025/7/10 22:48:13

配电室安全用电漏电保护装置的安全用电措施

配电室作为电力分配与控制的关键场所，其安全用电装置的重要性不言而喻。防触电、防漏电、防火灾、安全防护、保障生命财产； 当用电设备发生短路、过载或漏电等异常时能迅速切断电源，精准定位问题。及时报警，防止触电在配电室中…...

编程日记 2025/7/10 1:25:59

数据库-基本概述和 SQL 语言

标题目录基本概述DB和DBMS关系数据库库与表的概念表库数据库在项目中的角色如何操作数据库 SQL 语言SQL 分类DDL 语言数据库操作创建数据库查看数据库删除数据库切换数据库表的操作创建表查看表修改表名删除表修改表结构 DML 语言插入数据修改数据删除数据基本概述 DB和DB…...

编程日记 2025/6/29 10:37:37

C语言中的递归1.0

一、递归函数概念引入简单来说就是自己调用自己递归函数满足的两个条件: 1.每次调用函数本身,必须一次又一次接近最终结果 2.必须有停止条件二、代码展示用递归求1到4的和代码如下三、代码分析首先进入main主函数入口 int sum getsum(4); 就这个具体题目来看我…...

编程日记 2025/6/29 12:07:47

解锁webpack：对html、css、js及图片资源的抽离打包处理

面试被问到webpack，可别只知道说 HtmlWebpackPlugin 了哇。前期准备安装依赖 npm init -y npm install webpack webpack-cli --save-dev配置打包命令 // package.json {"scripts": {// ... 其他配置信息"build": "webpack --mode pr…...

编程日记 2025/7/12 12:19:12

[特殊字符] 大模型对话风格微调项目实战——模型篇 [特殊字符]✨

📜 目录 🎯 背景介绍 🔍 这篇文章的任务 🤖 模型选型 📊 模型评测 ⚙️ 模型训练 🔄 模型转换 🧪 模型训练效果评估 🎉 总结 🎯 背景介绍本文是《大模型对话风…...

编程日记 2025/7/14 13:29:30

lerobot[act解析]

ACT是具身智能模仿学习中重要的一个算法，本文会先从这个算法是是什么，这个算法如何工作的，到这个算法为什么有效，也就是what->how->why的这么一个顺序来进行解析 ACT 是什么？（What） 核心…...

编程日记 2025/7/15 5:55:47

使用Python创建带边框样式的Word表格

引言在生成Word文档时，表格的边框样式是提升专业度的重要细节。本文将通过一个实例，展示如何使用python-docx库为表格添加上下边框加粗和内部边框隐藏的复杂样式。代码将实现以下效果： 表格位于页面底部表格首行和末行的上下边框加粗隐藏内…...

编程日记 2025/7/10 12:44:31

GPLT-2025年第十届团体程序设计天梯赛总决赛题解(共计266分)

今天偶然发现天梯赛的代码还保存着，于是决定写下这篇题解，也算是复盘一下了 L1本来是打算写的稳妥点，最后在L1-6又想省时间，又忘记了insert，replace这些方法怎么用，也不想花时间写一个文件测试&#xff0c…...

编程日记 2025/6/29 12:25:49

基于SpringBoot的课程管理系统

前言今天给大家分享一个基于SpringBoot的课程管理系统。 1 系统介绍课程管理系统是一种专门为学校设计的软件系统，旨在帮助学校高效地管理和组织各类课程信息。该系统通常包括学生、教师和管理员三大角色。他们可以通过系统进行选课、查看课程表、考试、进…...

编程日记 2025/6/29 11:32:33

新品发布 | 6 秒全谱成像，VIX-N320 内置推扫式高光谱相机重磅发布

深圳市中达瑞和科技有限公司正式发布全新一代VIX-N320内置推扫式可见光近红外高光谱相机，一款集高速成像、高精度光谱分析与便携性于一体的革命性产品。以突破性技术重新定义光谱成像效率与精度，开启智能感知新纪元。作为国内唯一同时掌握凝采式、推扫式…...

编程日记 2025/7/9 1:33:39

手写深拷贝函数

在 JavaScript 中，深拷贝是指创建一个对象或数组的完全独立副本，包括其嵌套的对象或数组。这意味着修改副本不会影响原始对象。以下是手写一个通用的深拷贝函数的实现： 深拷贝函数实现 function deepClone(target, map new WeakMap()) {//…...

编程日记 2025/7/9 21:38:31

智能电网第3期 | 配电房巡检机器人通信升级方案

随着电力系统智能化发展，配电房巡检机器人是保障电力设备安全稳定运行的重要工具，其通信稳定性关乎巡检效率与质量。配电房巡检智能化升级面临着多项挑战： 电磁干扰大：配电房电气设备密集，电磁干扰强，易造成…...

编程日记 2025/7/13 5:27:07

阿里云 AI 搜索开放平台：RAG智能化工作流助力 AI 搜索

——已获知乎作者【小小将】授权转载最近AI圈的变化可谓是日新月异，随着大模型的技术突飞猛进，大模型的能力日益增强。这些都驱动着我们的搜索技术快速演进到了下一代，也就是 AI 搜索的技术。大模型的快速发展不仅重塑了搜索技术的基础&…...

编程日记 2025/7/15 8:39:05

同z科技面经

同z科技-2025-4-23 1.自我介绍个人信息校园经历实习经历项目经历个人技能掌握目前学习技术 2.封装缓存工具类怎么封装的先介绍使用缓存的问题解决的逻辑封装的逻辑应用缓存穿透： 缓存雪崩： 缓存击穿： https://www…...

编程日记 2025/7/15 1:37:24

制作一款打飞机游戏19：碰撞检测

在这一章中，我们致力于解决碰撞检测问题，但它并不如我们所愿工作。碰撞检测问题今天我想解决的是碰撞检测问题，这个令人畏惧的碰撞检测。我理解，这里有很多复杂的if语句，但我们可以做到。不过，在此之…...

编程日记 2025/7/12 23:39:17

python后端程序部署到服务器 Ubuntu并配合 Vue 前端页面运行

将 PyCharm 研发的 Web 后端系统程序部署到 Ubuntu 24.04 服务器并配合 Vue 前端页面运行，可按以下步骤操作： 1. 服务器环境准备在开始部署之前，需要在 Ubuntu 24.04 服务器上安装必要的软件。 # 更新系统软件包 sudo apt update sudo ap…...

编程日记 2025/7/15 8:36:31

9N60-ASEMI无人机专用功率器件9N60

编辑：LL 9N60-ASEMI无人机专用功率器件9N60 型号：9N60 品牌：ASEMI 封装：TO-220F 最大漏源电流：9A 漏源击穿电压：600V 批号：最新 RDS（ON）Max：1.00Ω …...

编程日记 2025/7/10 18:11:58

Java单例模式详解：实现线程安全的全局访问点

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取一、什么是单例模式？ 单例模式（Singleton Pattern）是一种创建型设计模式，它保证一个类仅有一个实例&#xff…...

编程日记 2025/7/10 22:32:30

【无人机】无人机光流模块Optical Flow设置（三），光流测距一体传感器的配置。凌启科技的光流测距一体模块的测试。

目录 1、光流测距一体模块的配置，详细步骤 1.1、连接 1.2、上位机使用 1.3、切换为PX4协议 2、适配PX4飞控，QGC上参数配置 2.0、安装连接 2.1、串口配置： 2.2、启用光流辅助功能 2.3、启用测距辅助功能 2.4、高度参考设置 2.5、重…...

编程日记 2025/7/14 5:55:56

电路中的DGND、GROUND、GROUND_REF的区别，VREF、VCC、VDD、VEE和VSS的区别？

目录 1 DGND、GROUND、GROUND_REF的区别 1.1 DGND（Digital Ground） 1.2 GROUND（Ground） 1.3 GROUND_REF（Ground Reference） 1.4 区别 2 VREF、VCC、VDD、VEE和VSS的区别 2.1 VREF（Refere…...

编程日记 2025/7/15 8:36:44

VSFTPD+虚拟用户+SSL/TLS部署安装全过程（踩坑全通）

Author : Spinach | GHB Link : http://blog.csdn.net/bocai8058文章目录前言准备配置虚拟用户1.创建虚拟用户列表文件2.生成数据库文件3.设置虚拟用户独立访问权限配置PAM认证1.创建PAM配置文件2.测试PAM认证创建虚拟用户映射的系统用户生成SSL/TLS证书配置VSFTPD服务1…...

编程日记 2025/7/15 8:33:04

Java-File类详解（一篇讲透）

一：File类的实例化及常用方法 1.1 定义 1.2 构造器 （1）File(String pathname) 文件的路径表示方式测试： （2）File(String parent,String child) 在父路径下创建子文件（没后缀是目录&#xff0c…...

编程日记 2025/7/10 18:27:32

Representation Flow for Action Recognition论文笔记

原文笔记： What： 在本文中，我们提出了一种受光流算法启发的CNN层，用于学习动作识别的运动表示，而无需计算光流。我们的表示流层是一个完全可微分的层，旨在捕获模型中任何表示通道的“流”。其迭代流量优化…...

编程日记 2025/7/14 12:50:56

云计算领域需掌握的核心技术

云计算作为现代信息技术的核心基础设施，涵盖从基础资源管理到上层应用开发的完整技术栈。它依靠强大的计算能力，使得成千上万的终端用户不担心所使用的计算技术和接入的方式等都能够进行有效的依靠网络连接起来的硬件平台的计算能力来实施多种应用。一、…...

编程日记 2025/6/29 9:30:23

Android仿今日头条Kotlin版本

软件信息 gradle-8.0Sdk信息 //编译版本 compileSdk33 //最小版本 minSdk24 //目标版本 targetSdk31Android Studio Giraffe | 2022.3.1 Patch 2（建议版本不要太低）MVVMAndroid Jetpack 项目注意没有服务器，用的是Apifox模拟服务器返回&a…...

编程日记 2025/6/29 12:19:57

Javashop新零售电商系统：构建智能零售生态的终极解决方案

JavaShop Javashop新零售电商系统：构建智能零售生态的终极解决方案引言：数字化转型浪潮中的零售业变革Javashop新零售系统核心优势1. 全渠道融合：打破线上线下壁垒2. 智能化门店管理：赋能传统零售3. 智慧营销与会员运营系统功能模…...

编程日记 2025/7/10 18:42:17

vscode如何多行同时编辑，vscode快速选中多行快捷键

目录 vscode如何多行同时编辑，vscode快速选中多行快捷键一、实践情景二、不同多选情景的操作方案 1、使用 Alt 鼠标点击选择任意行的任意位置 2、使用快捷键 Shift Alt 鼠标拖动 3、使用快捷键添加多行光标 4、结合正则表达式批量编辑 5、使用扩展插件&…...

编程日记 2025/7/12 13:21:00

珈和科技助力“农险提效200%”！“遥感+”技术创新融合省级示范项目荣登《湖北卫视》！

近日，湖北卫视《湖北十分》栏目报道了珈和科技遥感赋能农业保险创新，典型项目入选十大省级卫星应用示范标杆事迹，系统展示了珈和科技在卫星遥感与农业保险融合领域的创新成果。作为空天农业领域的领军企业，珈和科技依托创新构建…...

编程日记 2025/7/11 5:42:08

UIAutomator 与 Playwright 在 AI 自动化中的界面修改对比

UIAutomator 与 Playwright 在 AI 自动化中的界面修改对比在 AI 驱动的 UI 自动化中，Playwright（主要用于 Web）和 UIAutomator（用于 Android）的设计定位不同，对界面修改的支持也截然不同。下面从界面修改能力、API 设计、替代方案和实践建议等方面进行分析，对比两者在…...

编程日记 2025/6/29 9:54:36

Redisson Watchdog实现原理与源码解析：分布式锁的自动续期机制

引言在分布式系统中，Redis分布式锁是解决资源竞争问题的常用方案。然而，当持有锁的客户端因GC、网络延迟或处理时间过长导致锁过期时，可能引发数据一致性问题。Redisson的Watchdog（看门狗）机制通过自动续期解决了这一…...

编程日记 2025/7/11 9:12:57

在C#串口通信中，一发一收的场景，如何处理不同功能码的帧数据比较合理，代码结构好

在 C# 串口通信的一发一收场景里，处理不同功能码的帧数据可采用以下合理的代码结构，它能让代码更具可读性、可维护性和可扩展性。实现思路定义帧结构：创建一个类来表示通信帧，其中包含功能码、数据等信息。功能码处理逻辑&…...

编程日记 2025/7/12 6:48:19

easypoi 实现word模板导出

特此非常致谢：easypoi实现word模板基础的可以参考上文； 但是我的需求有一点点不一样。这是我的模板：就是我的t.imgs 是个list 但是很难过的是easy poi 我弄了一天，我都没有弄出来嵌套list循环怎么输出显示，更难过…...

编程日记 2025/7/13 20:00:34

集结号海螺捕鱼服务器调度与房间分配机制详解：六

本篇围绕服务器调度核心逻辑进行剖析，重点讲解用户连接过程、房间分配机制、服务端并发策略及常见性能瓶颈优化。适用于具备中高级 C 后端开发经验的读者，覆盖网络会话池、逻辑服调度器与房间生命周期管理等关键模块。一、服务器结构概览整体系统采用…...

编程日记 2025/6/29 9:30:22

opencv--图像滤波

图像滤波含义方法噪声是怎么产生的线性滤波概念利用窗口对图像中的像素进行加权求和的滤波方式。图像来源于小虎教程。图像的滤波是二维滤波的过程。滤波器窗口： 滤波器窗口（也称为卷积核或模板）是一个小的矩阵（通常为…...

编程日记 2025/6/29 9:31:11

uniapp返回上一页接口数据更新了，页面未更新

注意：不是组件套组件可以不使用setTimeout延时返回上一页一般会走onshow，但是接口更新了页面未更新 onShow(() > {// 切换城市后重新调用数据if (areaId.value) {const timer setTimeout(async () > {timer && clearTimeout(timer);…...

编程日记 2025/6/29 9:30:20

redis 使用 Docker 部署简单的Redis 集群（包括哨兵机制）

目录环境准备步骤 1：创建 Docker Compose 配置文件步骤 2：创建配置文件主节点配置文件 (redis.conf) 从节点配置文件 (slave.conf) 哨兵配置文件 (sentinel.conf) 步骤 3：启动 Redis 集群步骤 4：验证集群状态 1. 检…...

编程日记 2025/7/11 1:16:40

私有知识库 Coco AI 实战（三）：摄入 Elasticsearch 官方文档

相信经常使用 Elasticsearch 的小伙伴，难免要到 ES 官网查找资料，文档内容多难以查找不说，还有很多个版本，加上各种生态工具如 Filebeat、Logstash 头就更大了。今天我来介绍如何使用 Coco AI 快速搜索 Elasticsearch 官方文档。在…...

编程日记 2025/7/11 19:03:43

12-DevOps-Gitlab托管Jenkinsfile

前面通过执行脚本的方式，完成了pipline流水线的构建。脚本是保存在Jenkins中的，这种方式不利于迁移，也不利于查找脚本的历史变更信息。通过把脚本放到GitLab中，然后在Jenkins中引用的方式来解决上述的问题。创建Jenkinsfile文件…...

编程日记 2025/6/29 11:02:10

CSS3 基础（边框效果）

一、边框效果属性功能示例值说明border-radius创建圆角border-radius: 20px;设置元素的圆角半径，支持像素（px）或百分比（%）。值为 50% 时可变为圆形。box-shadow添加阴影box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5)…...

编程日记 2025/7/15 5:19:27

使用 VSCode 编写 Markdown 文件

目录一、安装 Markdown 插件二、新建 Markdown 文档三、Markdown 基本语法目录和标题文本样式列表图片链接代码表格注脚与注释符号表情四、将 Markdown 文档导出为 PDF 一、安装 Markdown 插件参考文章：【[Markdown] 使用vscode开始Markdown写作之旅】打开 VSco…...

编程日记 2025/7/10 19:28:57

搭建 Stable Diffusion 图像生成系统并通过 Ngrok 暴露到公网（实现本地系统网络访问）——项目记录

目录 📚 背景与需求 📝 需求明确 🔑 核心功能 🌍 网络优化 🛠️ 方案确认 ⚙️ 技术栈 📈 实现流程（Flask端口Ngrok注册authtoken） 🎯 优化目标 🔍 实…...

编程日记 2025/7/11 15:25:51

伺服器用什么语言开发呢？做什么用什么？

最近因为要评估帮合作对象做连接我们工具的语言翻译器，所以顺便做了一个小范围的调查，看看那些语言是应该在我们优先制作翻译器的部分，当然，各种语言在伺服器开发中其实各有拥护者，而选择也很常受到应用场景、产业特性…...

编程日记 2025/7/11 4:08:55

实现SpringBoot底层机制【Tomcat启动分析+Spring容器初始化+Tomcat 如何关联 Spring容器】

下载地址： https://download.csdn.net/download/2401_83418369/90675207 一、搭建环境创建新项目在pom.xml文件中导入依赖 （一定要刷新Maven）排除内嵌的Tomcat，引入自己指定的Tomcat <?xml version"1.0" enco…...

编程日记 2025/6/29 10:21:57