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

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

news 2025/9/17 8:08:17

在这里插入图片描述

一、项目结构

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/9/17 5:23:24

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/8/10 5:27:29

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/9/6 15:44:23

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/23 18:46:38

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/12 10:25:58

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/9/7 8:51:45

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/9/7 15:02:04

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/9/7 8:49:20

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2025/9/2 16:50:38