WebXR教学 03 项目1 旋转彩色方块
一、项目结构
webgl-cube/
├── index.html
├── main.js
├── package.json
└── vite.config.js
二、详细实现步骤
- 初始化项目
npm init -y
npm install three vite --save-dev
- 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>
- 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);
});
- 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><…...
深入解析JVM垃圾回收机制
1 引言 本节常见面试题 如何判断对象是否死亡（两种方法）。简单的介绍一下强引用、软引用、弱引用、虚引用（虚引用与软引用和弱引用的区别、使用软引用能带来的好处）。如何判断一个常量是废弃常量如何判断一个类是无用的类垃圾收…...
【简单】209.长度最小的子数组
题目描述 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, …, numsr-1, numsr] ，并返回其长度。如果不存在符合条件的子数组，返回0。 示例 1： 输入&am…...
细说 Java 引用（强、软、弱、虚）和 GC 流程（二）
一、前文回顾 在 细说Java 引用（强、软、弱、虚）和 GC 流程（一） 我们对Java 引用有了总体的认识，本文将继续深入分析 Java 引用在 GC 时的一些细节。 还是从我们在前文中提到的引用流程图里说起，这里不清…...
CSS通过webkit-scrollbar设置滚动条样式
查看::-webkit-scrollbar-*各项关系 以下图为例，可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。 需要先给外部容器设置高度，再设置overflow: auto，最后设置三个webkit属性。 <!DOCTYPE html> <html lang"en">…...
Win10配置VSCode的C/C++编译环境
GNU（编译器工具集合）包含了g、gcc和gdb等编译器。MinGW（Minimalist GNU for Windows）是一个适用于Windows操作系统的最小化的GNU工具集，它包括了GCC编译器（包括g）以及其他一些必要的库和工具。M…...
数据结构与算法再探（七）查找-排序
查找 一、二分查找 二分查找是一种高效的查找算法，适用于在已排序的数组或列表中查找特定元素。它通过将搜索范围逐步减半来快速定位目标元素。理解二分查找的“不变量”和选择左开右闭区间的方式是掌握这个算法的关键。 二分查找关键点 不变量 在二分查找中&a…...
【C语言】指针(5)
前言：上篇文章的末尾我们使用了转移表来解决代码冗余的问题，那我们还有没有什么办法解决代码冗余呢？有的这就是接下来要说的回调函数。 往期文章: 指针1 指针2 指针3 指针4 文章目录 一，回调函数二，qsort实现快速排序1…...
大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(2)
Paimon的下载及安装，并且了解了主键表的引擎以及changelog-producer的含义参考： 大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1) 利用Paimon表做lookup join，集成mysql cdc等参考： 大数据组件(四)快速入门实时数据…...
PLC通讯
PPI通讯 是西门子公司专为s7-200系列plc开发的通讯协议。内置于s7-200 CPU中。PPI协议物理上基于RS-485口，通过屏蔽双绞线就可以实现PPI通讯。PPI协议是一种主-从协议。主站设备发送要求到从站设备，从站设备响应，从站不能主动发出信息。主站…...
前端js进阶，ES6语法，包详细
进阶ES6 作用域的概念加深对js理解 let、const申明的变量，在花括号中会生成块作用域，而var就不会生成块作用域 作用域链本质上就是底层的变量查找机制 作用域链查找的规则是:优先查找当前作用域先把的变量，再依次逐级找父级作用域直到全局…...
Scrum方法论指导下的Deepseek R1医疗AI部署开发
一、引言 1.1 研究背景与意义 在当今数智化时代，软件开发方法论对于项目的成功实施起着举足轻重的作用。Scrum 作为一种广泛应用的敏捷开发方法论，以其迭代式开发、快速反馈和高效协作的特点，在软件开发领域占据了重要地位。自 20 世纪 90 …...
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…...
基于java新闻管理系统，推荐一款开源cms内容管理系统ruoyi-fast-cms
一、项目概述 1.1 项目背景 在信息高速流通的当下，新闻媒体行业每天都要处理和传播海量信息。传统的新闻管理模式依赖人工操作，在新闻采集、编辑、发布以及后续管理等环节中，不仅效率低下，而且容易出现人为失误。同时࿰…...
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…...
【数据结构】(12) 反射、枚举、lambda 表达式
一、反射 1、反射机制定义及作用 反射是允许程序在运行时检查和操作类、方法、属性等的机制，能够动态地获取信息、调用方法等。换句话说，在编写程序时，不需要知道要操作的类的具体信息，而是在程序运行时获取和使用。 2、反射机制…...
java实现二维码图片生成和编解码
java实现二维码图片生成和编解码 在wutool中，封装了二维码工具类，基于google的zxing库，实现二维码图片生成、编码和解码。 关于wutool wutool是一个java代码片段收集库，针对特定场景提供轻量解决方案，只要按需选择代…...
Java基础常见的面试题（易错！！）
面试题一：为什么 Java 不支持多继承 Java 不支持多继承主要是为避免 “菱形继承问题”（又称 “钻石问题”），即一个子类从多个父类继承到同名方法或属性时，编译器无法确定该调用哪个父类的成员。同时，多继承…...
hugging face---transformers包
一、前言 不同于计算机视觉的百花齐放，不同网络适用不同情况，NLP则由Transformer一统天下。transformer是2017年提出的一种基于自注意力机制的神经网络架构，transformers库是hugging face社区创造的一个py库，通过该库可以实现统一…...
网络安全防护指南：筑牢网络安全防线（510）
一、网络安全的基本概念 （一）网络的定义 网络是指由计算机或者其他信息终端及相关设备组成的按照一定的规则和程序对信息收集、存储、传输、交换、处理的系统。在当今数字化时代，网络已经成为人们生活和工作中不可或缺的一部分。它连接了世…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
计算机基础知识解析：从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域：无处不在的数字助手 2、 计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...
深入理解Optional：处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
的打车小程序)
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...
从零开始了解数据采集（二十八）——制造业数字孪生
近年来，我国的工业领域正经历一场前所未有的数字化变革，从“双碳目标”到工业互联网平台的推广，国家政策和市场需求共同推动了制造业的升级。在这场变革中，数字孪生技术成为备受关注的关键工具，它不仅让企业“看见”设…...