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

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

news 2026/2/11 1:46:47

在这里插入图片描述

一、项目结构

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

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/10 22:48:02

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2026/2/8 20:43:05

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2026/1/10 10:16:16

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2026/1/11 6:22:16

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/2/9 7:06:29

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

编程新知 2026/2/6 6:05:52

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...

编程新知 2026/2/10 3:55:32

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2026/2/7 9:52:39