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

WebXR教学 03 项目1 旋转彩色方块

news 2026/4/20 21:09:54

在这里插入图片描述

一、项目结构

webgl-cube/
├── index.html
├── main.js
├── package.json
└── vite.config.js

二、详细实现步骤

  1. 初始化项目
npm init -y
npm install three vite --save-dev
  1. 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><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style>
</head>
<body><script type="module" src="./main.js"></script>
</body>
</html>
  1. main.js
// 导入Three.js核心库
import * as THREE from 'three';// ---------- 场景初始化 ----------
// 创建三维场景容器
const scene = new THREE.Scene();// ---------- 相机配置 ----------
// 创建透视相机（模拟人眼视角）
const camera = new THREE.PerspectiveCamera(75, // 视野角度（FOV）window.innerWidth / window.innerHeight, // 宽高比0.1, // 近裁剪面（最近可见距离）1000  // 远裁剪面（最远可见距离）
);// ---------- 渲染器配置 ----------
// 创建WebGL渲染器（启用抗锯齿）
const renderer = new THREE.WebGLRenderer({antialias: true,  // 开启抗锯齿alpha: true       // 开启透明背景（可选）
});
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置像素比（适配高清屏）
renderer.setPixelRatio(window.devicePixelRatio);
// 将画布添加到页面
document.body.appendChild(renderer.domElement);// ---------- 立方体创建 ----------
// 创建立方体几何体（单位立方体）
const geometry = new THREE.BoxGeometry(1, 1, 1);// 创建六面材质（颜色配置）
const materials = [new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 右（+X）new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 左（-X）new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 上（+Y）new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 下（-Y）new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 前（+Z）new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 后（-Z）
];// 组合几何体与材质生成网格对象
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);// 设置相机初始位置（沿Z轴后移）
camera.position.z = 5;// ---------- 动画循环 ----------
function animate() {requestAnimationFrame(animate);// 旋转动画（每秒约60帧）cube.rotation.x += 0.01;  // X轴旋转cube.rotation.y += 0.01;  // Y轴旋转// 渲染场景renderer.render(scene, camera);
}// 启动动画
animate();// ---------- 窗口响应式处理 ----------
window.addEventListener('resize', () => {// 更新相机参数camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();// 更新渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);
});
  1. vite.config.js
import { defineConfig } from 'vite'export default defineConfig({base: './',server: {port: 3000,open: true}
})

三、核心概念解析

Three.js三大核心要素：

Scene（场景）：所有3D对象的容器

Camera（相机）：观察场景的视角

Renderer（渲染器）：负责将3D场景渲染到2D画布

坐标系系统：

X轴：水平方向（右正左负）

Y轴：垂直方向（上正下负）

Z轴：深度方向（屏幕外正，屏幕内负）

材质类型：

MeshBasicMaterial：基础材质（不受光照影响）

MeshPhongMaterial：光泽材质（受光照影响）

MeshStandardMaterial：PBR材质（物理渲染）

四、运行项目

npx vite

五、常见问题解决

页面空白问题：

检查控制台报错（F12打开开发者工具）

确保相机位置正确（camera.position.z = 5）

验证材质颜色值是否合法（0x开头十六进制）

性能优化建议：

// 在初始化渲染器时添加
renderer.shadowMap.enabled = true;  // 启用阴影
renderer.outputEncoding = THREE.sRGBEncoding;  // 颜色空间优化

进阶功能扩展：

// 添加轨道控制器（需额外安装）
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

相关文章：

WebXR教学 03 项目1 旋转彩色方块

一、项目结构 webgl-cube/ ├── index.html ├── main.js ├── package.json └── vite.config.js二、详细实现步骤 初始化项目 npm init -y npm install three vite --save-devindex.html <!DOCTYPE html> <html lang"en"> <head><…...

编程日记 2025/2/24 19:13:27

深入解析JVM垃圾回收机制

1 引言 本节常见面试题 如何判断对象是否死亡&#xff08;两种方法&#xff09;。简单的介绍一下强引用、软引用、弱引用、虚引用&#xff08;虚引用与软引用和弱引用的区别、使用软引用能带来的好处&#xff09;。如何判断一个常量是废弃常量如何判断一个类是无用的类垃圾收…...

编程日记 2025/2/24 19:11:24

【简单】209.长度最小的子数组

题目描述 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回0。 示例 1&#xff1a; 输入&am…...

编程日记 2025/2/24 19:09:20

细说 Java 引用（强、软、弱、虚）和 GC 流程（二）

一、前文回顾 在 细说Java 引用&#xff08;强、软、弱、虚&#xff09;和 GC 流程&#xff08;一&#xff09; 我们对Java 引用有了总体的认识&#xff0c;本文将继续深入分析 Java 引用在 GC 时的一些细节。 还是从我们在前文中提到的引用流程图里说起&#xff0c;这里不清…...

编程日记 2025/2/24 19:05:12

CSS通过webkit-scrollbar设置滚动条样式

查看::-webkit-scrollbar-*各项关系 以下图为例&#xff0c;可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。 需要先给外部容器设置高度&#xff0c;再设置overflow: auto&#xff0c;最后设置三个webkit属性。 <!DOCTYPE html> <html lang"en">…...

编程日记 2025/2/24 19:00:03

Win10配置VSCode的C/C++编译环境

GNU&#xff08;编译器工具集合&#xff09;包含了g、gcc和gdb等编译器。MinGW&#xff08;Minimalist GNU for Windows&#xff09;是一个适用于Windows操作系统的最小化的GNU工具集&#xff0c;它包括了GCC编译器&#xff08;包括g&#xff09;以及其他一些必要的库和工具。M…...

编程日记 2025/2/24 18:58:58

数据结构与算法再探（七）查找-排序

查找 一、二分查找 二分查找是一种高效的查找算法&#xff0c;适用于在已排序的数组或列表中查找特定元素。它通过将搜索范围逐步减半来快速定位目标元素。理解二分查找的“不变量”和选择左开右闭区间的方式是掌握这个算法的关键。 二分查找关键点 不变量 在二分查找中&a…...

编程日记 2025/2/24 18:56:52

【C语言】指针(5)

前言&#xff1a;上篇文章的末尾我们使用了转移表来解决代码冗余的问题&#xff0c;那我们还有没有什么办法解决代码冗余呢&#xff1f;有的这就是接下来要说的回调函数。 往期文章: 指针1 指针2 指针3 指针4 文章目录 一&#xff0c;回调函数二&#xff0c;qsort实现快速排序1…...

编程日记 2025/2/24 18:52:46

大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(2)

Paimon的下载及安装&#xff0c;并且了解了主键表的引擎以及changelog-producer的含义参考&#xff1a; 大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1) 利用Paimon表做lookup join&#xff0c;集成mysql cdc等参考&#xff1a; 大数据组件(四)快速入门实时数据…...

编程日记 2025/2/24 18:48:40

PLC通讯

PPI通讯 是西门子公司专为s7-200系列plc开发的通讯协议。内置于s7-200 CPU中。PPI协议物理上基于RS-485口&#xff0c;通过屏蔽双绞线就可以实现PPI通讯。PPI协议是一种主-从协议。主站设备发送要求到从站设备&#xff0c;从站设备响应&#xff0c;从站不能主动发出信息。主站…...

编程日记 2025/2/24 18:47:39

前端js进阶，ES6语法，包详细

进阶ES6 作用域的概念加深对js理解 let、const申明的变量&#xff0c;在花括号中会生成块作用域&#xff0c;而var就不会生成块作用域 作用域链本质上就是底层的变量查找机制 作用域链查找的规则是:优先查找当前作用域先把的变量&#xff0c;再依次逐级找父级作用域直到全局…...

编程日记 2025/2/24 18:46:33

Scrum方法论指导下的Deepseek R1医疗AI部署开发

一、引言 1.1 研究背景与意义 在当今数智化时代&#xff0c;软件开发方法论对于项目的成功实施起着举足轻重的作用。Scrum 作为一种广泛应用的敏捷开发方法论&#xff0c;以其迭代式开发、快速反馈和高效协作的特点&#xff0c;在软件开发领域占据了重要地位。自 20 世纪 90 …...

编程日记 2025/2/24 18:45:31

LINUX安装使用Redis

参考 Install Redis on Linux | Docs 安装命令 sudo apt-get install -y lsb-release curl gpgcurl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpgsudo chmod 644 /usr/share/keyrings/redis-archive-keyrin…...

编程日记 2025/2/24 18:42:27

基于java新闻管理系统，推荐一款开源cms内容管理系统ruoyi-fast-cms

一、项目概述 1.1 项目背景 在信息高速流通的当下&#xff0c;新闻媒体行业每天都要处理和传播海量信息。传统的新闻管理模式依赖人工操作&#xff0c;在新闻采集、编辑、发布以及后续管理等环节中&#xff0c;不仅效率低下&#xff0c;而且容易出现人为失误。同时&#xff0…...

编程日记 2025/2/24 18:41:25

054 redisson

文章目录 使用Redisson演示可重入锁读写锁信号量闭锁获取三级分类redisson分布式锁 package com.xd.cubemall.product.config;import org.redisson.Redisson; import org.redisson.api.RedissonClient; import org.redisson.config.Config; import org.springframework.context…...

编程日记 2025/2/24 18:36:20

【数据结构】(12) 反射、枚举、lambda 表达式

一、反射 1、反射机制定义及作用 反射是允许程序在运行时检查和操作类、方法、属性等的机制&#xff0c;能够动态地获取信息、调用方法等。换句话说&#xff0c;在编写程序时&#xff0c;不需要知道要操作的类的具体信息&#xff0c;而是在程序运行时获取和使用。 2、反射机制…...

编程日记 2025/2/24 18:35:18

java实现二维码图片生成和编解码

java实现二维码图片生成和编解码 在wutool中&#xff0c;封装了二维码工具类&#xff0c;基于google的zxing库&#xff0c;实现二维码图片生成、编码和解码。 关于wutool wutool是一个java代码片段收集库&#xff0c;针对特定场景提供轻量解决方案&#xff0c;只要按需选择代…...

编程日记 2025/2/24 18:31:14

Java基础常见的面试题（易错！！）

面试题一&#xff1a;为什么 Java 不支持多继承 Java 不支持多继承主要是为避免 “菱形继承问题”&#xff08;又称 “钻石问题”&#xff09;&#xff0c;即一个子类从多个父类继承到同名方法或属性时&#xff0c;编译器无法确定该调用哪个父类的成员。同时&#xff0c;多继承…...

编程日记 2025/2/24 18:25:08

hugging face---transformers包

一、前言 不同于计算机视觉的百花齐放&#xff0c;不同网络适用不同情况&#xff0c;NLP则由Transformer一统天下。transformer是2017年提出的一种基于自注意力机制的神经网络架构&#xff0c;transformers库是hugging face社区创造的一个py库&#xff0c;通过该库可以实现统一…...

编程日记 2025/2/24 18:22:03

网络安全防护指南：筑牢网络安全防线（510）

一、网络安全的基本概念 &#xff08;一&#xff09;网络的定义 网络是指由计算机或者其他信息终端及相关设备组成的按照一定的规则和程序对信息收集、存储、传输、交换、处理的系统。在当今数字化时代&#xff0c;网络已经成为人们生活和工作中不可或缺的一部分。它连接了世…...

编程日记 2025/2/24 18:20:56

APM飞控解锁失败？别慌，手把手教你排查电机解锁的5个常见坑

APM飞控解锁失败&#xff1f;手把手教你排查电机解锁的5个关键环节 当无人机在首次起飞前无法完成电机解锁时&#xff0c;那种挫败感每个飞手都深有体会。看着地面站不断跳出的错误提示&#xff0c;新手往往会陷入手忙脚乱的困境。本文将从实际场景出发&#xff0c;用工程思维拆…...

编程新知 2026/4/20 20:20:44

从torch.argmax到sum：一份PyTorch张量降维操作的全家桶使用指南与避坑手册

从torch.argmax到sum&#xff1a;PyTorch张量降维操作实战指南 在深度学习模型开发和数据处理过程中&#xff0c;PyTorch张量的维度操作是最基础却最容易出错的部分。很多开发者在使用torch.argmax()、sum()、mean()等聚合函数时&#xff0c;经常因为对dim参数理解不透彻而导致…...

编程新知 2026/4/20 19:14:15

技术债务灾难：行业集体埋雷

冰山之下&#xff0c;测试之困在追求敏捷与快速交付的软件开发现代洪流中&#xff0c;“技术债务”已从一个晦涩的工程隐喻&#xff0c;演变为悬在无数项目头顶的达摩克利斯之剑。对于身处质量保障一线的软件测试从业者而言&#xff0c;技术债务远非开发团队的内部烦恼&#xf…...

编程新知 2026/4/20 17:04:24

告别CasADi的慢速：用ACADOS在Python里10倍速搞定移动机器人MPC（附避坑配置）

10倍性能飞跃&#xff1a;用ACADOS重构移动机器人MPC控制栈实战指南 当全向移动机器人需要在动态环境中执行毫米级精度的轨迹跟踪时&#xff0c;20毫秒的求解延迟足以让整个系统失控。这正是许多工程师从CasADi转向ACADOS的关键转折点——我们不再满足于"能用"的解决…...

编程新知 2026/4/20 16:46:32

Snap.Hutao：5个核心功能带你掌握原神Windows桌面工具箱的终极指南

Snap.Hutao&#xff1a;5个核心功能带你掌握原神Windows桌面工具箱的终极指南 【免费下载链接】Snap.Hutao 实用的开源多功能原神工具箱 &#x1f9f0; / Multifunctional Open-Source Genshin Impact Toolkit &#x1f9f0; 项目地址: https://gitcode.com/GitHub_Trending/…...

编程新知 2026/4/20 13:03:34

别再只用rand()了！手把手教你用STM32的ADC噪声生成真随机数（附DMA优化方案）

STM32真随机数生成实战&#xff1a;从ADC噪声到安全密钥的完整实现 在嵌入式系统开发中&#xff0c;随机数的质量往往决定了整个系统的安全性。许多开发者习惯性地使用srand(time(NULL))配合rand()函数来生成随机数&#xff0c;却不知道这种伪随机数在安全敏感场景下可能带来灾…...

编程新知 2026/4/20 12:18:31

别让时钟约束拖后腿！FPGA设计中那些容易被忽略的时序约束细节：虚拟时钟、输入抖动与不确定性设置

别让时钟约束拖后腿&#xff01;FPGA设计中那些容易被忽略的时序约束细节&#xff1a;虚拟时钟、输入抖动与不确定性设置 在FPGA设计的世界里&#xff0c;时序约束就像是一把双刃剑——用得好可以让你的设计跑得又快又稳&#xff0c;用得不好则可能成为项目进度和性能的绊脚石。…...

编程新知 2026/4/20 12:18:30

如何彻底解决显卡驱动冲突问题：Display Driver Uninstaller终极使用指南

如何彻底解决显卡驱动冲突问题&#xff1a;Display Driver Uninstaller终极使用指南 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-dri…...

编程新知 2026/4/20 9:35:31

【后端作业W7】 RuoYi-Vue v3.8.2 实战：单表 CRUD 独立接口开发与 API 测试全记录

一、 前言 本周的实战任务基于企业级开源框架 RuoYi-Vue v3.8.2 进行。与前两周纯手写的 SpringBoot 项目不同&#xff0c;若依框架内置了庞大的组件和严密的安全鉴权体系&#xff08;Spring Security&#xff09;。 本次作业的核心目的并非依赖代码生成器完成任务&#xff0c;…...

编程新知 2026/4/20 8:34:52

體驗 Python 自動化的力量：從網頁抓取開始

在學習如何使用 Python 自動化程序來獲取相關網頁內容的過程中&#xff0c;我深刻體會到了自動化的力量。透過使用像是 requests 和 BeautifulSoup 這樣的庫&#xff0c;我能夠輕鬆地從網頁中提取所需的信息&#xff0c;這不僅提高了我的工作效率&#xff0c;也讓我對網頁結構有…...

编程新知 2026/4/20 8:30:49