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

17. Threejs案例-Three.js创建多个立方体

news 2026/4/1 15:40:14

17. Threejs案例-Three.js创建多个立方体

实现效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是 Three.js 中用于渲染 WebGL 场景的核心类。它负责将场景中的对象渲染到画布上。

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置渲染器。常用参数包括：`antialias`（抗锯齿）、`alpha`（透明背景）等。

方法

setSize(width, height): 设置渲染器输出的尺寸。
setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。

Scene (场景)

Scene 是 Three.js 中用于存储和管理所有可见对象的容器。

构造器

new THREE.Scene()

方法

add(object): 向场景中添加对象。
remove(object): 从场景中移除对象。

PerspectiveCamera (透视相机)

PerspectiveCamera 是 Three.js 中用于模拟人眼视角的相机类。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	视野角度，单位为度。
aspect	Number	相机的宽高比。
near	Number	近裁剪面距离。
far	Number	远裁剪面距离。

方法

position.set(x, y, z): 设置相机的位置。
lookAt(vector): 设置相机的朝向目标点。

BoxGeometry (立方体几何体)

BoxGeometry 是 Three.js 中用于创建立方体几何体的类。

构造器

new THREE.BoxGeometry(width, height, depth)

参数	类型	描述
width	Number	立方体的宽度。
height	Number	立方体的高度。
depth	Number	立方体的深度。

方法

translateX(amount): 沿 X 轴移动几何体。
translateY(amount): 沿 Y 轴移动几何体。
translateZ(amount): 沿 Z 轴移动几何体。

MeshNormalMaterial (网格法线材质)

MeshNormalMaterial 是 Three.js 中用于显示网格法线的材质。

构造器

new THREE.MeshNormalMaterial(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置材质。

方法

color.set(color): 设置材质的颜色。

Mesh (网格对象)

Mesh 是 Three.js 中用于组合几何体和材质的对象。

构造器

new THREE.Mesh(geometry, material)

参数	类型	描述
geometry	Geometry	几何体对象。
material	Material	材质对象。

方法

translateX(amount): 沿 X 轴移动网格对象。
translateY(amount): 沿 Y 轴移动网格对象。
translateZ(amount): 沿 Z 轴移动网格对象。

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>// 创建渲染器var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);myRenderer.setClearColor('white', 1.0);$("#myContainer").append(myRenderer.domElement);// 创建场景var myScene = new THREE.Scene();// 创建透视相机var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);myCamera.position.set(40.06, 20.92, 42.68);myCamera.lookAt(new THREE.Vector3(0, 0, 0));// 创建第一个立方体var myGeometry1 = new THREE.BoxGeometry(16, 16, 16);var myMaterial1 = new THREE.MeshNormalMaterial();var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);myMesh1.translateX(-40);myScene.add(myMesh1);// 创建第二个立方体var myGeometry2 = new THREE.BoxGeometry(16, 16, 16);var myMaterial2 = new THREE.MeshNormalMaterial();var myMesh2 = new THREE.Mesh(myGeometry2, myMaterial2);myMesh2.translateX(-10);myScene.add(myMesh2);// 创建第三个立方体var myGeometry3 = new THREE.BoxGeometry(16, 16, 16);var myMaterial3 = new THREE.MeshNormalMaterial();var myMesh3 = new THREE.Mesh(myGeometry3, myMaterial3);myMesh3.translateX(20);myScene.add(myMesh3);// 渲染三个相同大小的立方体图形myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接

17. Threejs案例-Three.js创建多个立方体

17. Threejs案例-Three.js创建多个立方体实现效果知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 WebGL 场景的核心类。它负责将场景中的对象渲染到画布上。构造器 new THREE.WebGLRenderer(parameters) 参数类型描述parametersObject可选…...

编程日记 2024/12/7 4:14:08

RK3568 Android14 打开蓝牙时默认同意

1、最近给一个项目做了一款基础功能的自动测试，在打开蓝牙时，有一个是否同意的提示框要去掉，即默认同意打开蓝牙。 2、路径： packages/apps/Settings/src/com/android/settings/bluetooth/RequestPermissionActivity.java// Sho…...

编程日记 2024/12/7 4:13:03

多模态视频大模型Aria在Docker部署

多模态视频大模型Aria在Docker部署契机 ⚙ 闲逛HuggingFace的时候发现一个25.3B的多模态大模型，支持图片和视频。刚好我有H20的GPU所以部署来看看效果，因为我的宿主机是cuda-12.1所以为了防止环境污染采用docker部署，通过一系列的披荆斩棘…...

编程日记 2024/12/7 4:12:01

Ant-Design-Vue 全屏下拉日期框无法显示，能显示后小屏又位置错乱

问题1：在全屏后日期选择器的下拉框无法显示。解决：在Ant-Design-Vue的文档中，很多含下拉框的组件都有一个属性 getPopupContainer可以用来指定弹出层的挂载节点。在该组件上加上 getPopupContainer 属性,给挂载到最外层盒子上。 <temp…...

编程日记 2024/12/7 4:09:58

AMR移动机器人赋能制造业仓储自动化升级

在当今制造业的激烈竞争中，智能化、数字化已成为企业转型升级的关键路径。一家制造业巨头，凭借其庞大的生产体系和多个仓库资源，正以前所未有的决心和行动力，在制造业智能化浪潮中勇立潮头，开启了降本增效的新篇章。这…...

编程日记 2024/12/7 4:08:57

【PHP项目实战】活动报名系统

目录项目介绍开发语言后端前端项目截图（部分） 首页列表详情个人中心后台管理项目演示项目介绍本项目是一款基于手机浏览器的活动报名系统。它提供了一个方便快捷的活动报名解决方案，无需下载和安装任何APP&#xff0c…...

编程日记 2024/12/7 4:07:55

【HarmonyOS】Component组件引入报错 does not meet UI component syntax.

【HarmonyOS】Component组件引入报错一、问题背景有时会碰到引入组件时，无法import引入组件，导致引入的组件报错。或者提示does not meet UI component syntax. （不符合UI组件语法。） 如下图所示，在引入组件时&a…...

编程日记 2024/12/7 4:05:53

vue3项目最新eslint9+prettier+husky+stylelint+vscode配置

一、eslint9和prettier通用配置安装必装插件 ESlint9.x pnpm add eslintlatest -DESlint配置 vue 规则 , typescript解析器 pnpm add eslint-plugin-vue typescript-eslint -DESlint配置 JavaScript 规则 pnpm add eslint/js -D配置所有全局变量 globals pnpm add globa…...

编程日记 2024/12/7 4:02:50

备赛蓝桥杯--算法题目(3)

1. 2的幂 231. 2 的幂 - 力扣（LeetCode） class Solution { public:bool isPowerOfTwo(int n) {return n>0&&n(n&(-n));} }; 2. 3的幂 326. 3 的幂 - 力扣（LeetCode） class Solution { public:bool isPowerOfT…...

编程日记 2024/12/7 4:00:48

CSS中要注意的样式效果

1. 应用过渡效果 transition: var(--aa); 2.告诉浏览器元素可能会发生变换，从而优化性能。 will-change: transform; 3.使元素不响应鼠标事件。 pointer-events: none; 4.隐藏水平方向上的溢出内容 overflow-x: hidden; 5.定义一个元素的宽度和高度之间的比…...

编程日记 2024/12/7 3:58:46

【NIPS2024】Unique3D：从单张图像高效生成高质量的3D网格

背景（现有方法的不足）： 基于Score Distillation Sampling （SDS）的方法：从大型二维扩散模型中提取3D知识，生成多样化的3D结果，但存在每个案例长时间优化问题/不一致问题。目前通过微…...

编程日记 2024/12/7 3:56:44

使用Kubernetes部署Spring Boot项目

目录前提条件新建Spring Boot项目并编写一个接口新建Maven工程导入 Spring Boot 相关的依赖启动项目编写Controller 测试接口构建镜像打jar包新建Dockerfile文件 Linux目录准备上传Dockerfile和target目录到Linux 制作镜像查看镜像测试镜像上传镜…...

编程日记 2024/12/7 3:55:43

基于VTX356语音识别合成芯片的智能语音交互闹钟方案

一、方案概述本方案旨在利用VTX356语音识别合成芯片强大的语音处理能力，结合蓝牙功能、APP或小程序，打造一款功能全面且智能化程度高的闹钟产品。除了基本的时钟显示和闹钟提醒功能外，还拥有正计时、倒计时、日程安排、重要日提醒以及番茄钟…...

编程日记 2024/12/7 3:53:41

git将一个项目的文件放到另一个项目的文件夹下

现有productA与productB项目，现将productA、productB放到productC下的mall-web文件下，目前只能实现保留productA的提交记录，暂不能实现保留两个的提交记录一.克隆最新的productC的库，这里指mall-web 二.将productA复制到mall-we…...

编程日记 2024/12/7 3:49:36

Cannon.js 从入门到精通

开发领域：前端开发 | AI 应用 | Web3D | 元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go 经验经验：6 年前端开发经验，专注于图形渲染和 AI 技术开源项目：智简未来、数字孪生引擎 github 大家好！我…...

编程日记 2024/12/7 3:45:30

深入理解 TCP 标志位（TCP Flags）

深入理解 TCP 标志位（TCP Flags） 1. 简介在网络安全和网络分析领域，TCP标志位（TCP Flags）是理解网络行为和流量模式的关键概念。特别是在使用工具如Nmap进行端口扫描时，理解这些标志位的意义和用法至关重…...

编程日记 2024/12/7 3:44:29

K8S，StatefulSet

有状态应用 Deployment实际上并不足以覆盖所有的应用编排问题？ 分布式应用，它的多个实例之间，往往有依赖关系，比如：主从关系、主备关系。还有就是数据存储类应用，它的多个实例，往往都会在本地…...

编程日记 2024/12/7 3:41:25

JavaScript动态网络爬取：深入解析与实践指南

引言随着互联网技术的发展，越来越多的网站采用动态加载技术来提供丰富的用户体验。这些动态内容的加载依赖于JavaScript，给传统的网络爬虫带来了挑战。JavaScript动态网络爬取技术应运而生，它允许开发者模拟用户行为，获取动态加…...

编程日记 2024/12/7 3:39:22

MySql：Centos7安装MySql

目录安装之前，清除MySql残留文件下载MySql的官方yum源安装MySql 服务 MySql配置常见问题本次安装基于Centos7，平台为云服务器，由XShell软件演示。注意，请将用户切换为Root用户。安装之前，清除MySql残留文…...

编程日记 2024/12/7 3:37:19

Vector软件CANdb++的信号起始位Bug

问题现象前几天导入DBC文件发现不对劲，怎么生成代码的起始地址都怪怪的，检查下工程里面的配置，还真的是这样，一路查到输入文件——DBC文件，发现是DBC文件就有错误：一些CAN报文之后8字节长度，也…...

编程日记 2024/12/7 3:36:18

3大场景×5项优化：ComfyUI视频合成VHS_VideoCombine节点全场景应用指南

3大场景5项优化：ComfyUI视频合成VHS_VideoCombine节点全场景应用指南【免费下载链接】ComfyUI-VideoHelperSuite Nodes related to video workflows 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-VideoHelperSuite 一、基础认知：视频合…...

编程新知 2026/4/1 15:09:38

MySQL--Day02

约束约束是作用于表中字段上的规则，用于限制存储在表中的数据为了保证数据库中数据的正确性、有效性、完整性非空约束 NOT NULL唯一约束 UNIQUE主键约束 PRIMARY KEY默认约束 DEFAULT检查约束 CHECK CREATE TABLE user(id int primary key auto_increm…...

编程新知 2026/4/1 14:28:29

GitHub加速完全指南：从卡顿到飞一般体验的实战方案

GitHub加速完全指南：从卡顿到飞一般体验的实战方案【免费下载链接】gh-proxy github release、archive以及项目文件的加速项目项目地址: https://gitcode.com/gh_mirrors/gh/gh-proxy 问题诊断：你的GitHub访问为何如此缓慢？ 网络延…...

编程新知 2026/4/1 13:59:42

春联生成模型快速上手：输入‘幸福‘、‘平安‘等关键词，自动生成对仗工联

春联生成模型快速上手：输入幸福、平安等关键词，自动生成对仗工联 1. 春联生成器简介春节贴春联是中国人延续千年的传统习俗，但创作一副对仗工整、寓意吉祥的春联并不容易。现在，借助AI技术，任何人都能轻松生成专业水…...

编程新知 2026/4/1 13:49:21

告别重复劳动：用快马AI智能生成OpenCode风格的高效工具函数

最近在开发一个需要大量表单验证的项目时，我发现每次都要重复写类似的验证逻辑，既浪费时间又容易出错。于是我开始寻找更高效的解决方案，最终在InsCode(快马)平台上找到了理想的工具。需求分析表单验证是每个Web项目都绕不开的基础功能。常…...

编程新知 2026/4/1 13:28:58

手把手教你用AT32F403A实现串口空闲中断接收完整数据帧

深入解析AT32F403A串口空闲中断实现高效数据帧接收在嵌入式系统开发中，串口通信是最基础也最常用的外设接口之一。面对实际应用中常见的不定长数据帧接收需求，传统轮询方式不仅效率低下，还容易丢失数据。而国产MCU雅特力AT32F403A提供的**串…...

编程新知 2026/4/1 12:08:08

AI算力网络抉择：深度剖析RoCE与InfiniBand的实战选型指南

1. 为什么AI算力网络需要RDMA技术？ 当你看到大模型训练任务卡在99%进度条时，那种焦灼感我深有体会。去年我们团队在调试千卡集群时就遇到过这种情况——原本预计72小时完成的训练任务，因为网络延迟问题硬是拖了整整一周。这就是为什么现在所…...

编程新知 2026/4/1 12:04:03

磁盘 I/O 性能优化

磁盘 I/O 性能优化是一个从硬件、系统内核、文件系统、应用程序到I/O 模式的全链路优化过程，核心目标是减少磁盘访问次数、降低延迟、提升吞吐量与 IOPS。硬件层面 1. 存储介质升级HDD → SATA SSD → NVMe SSD：随机读写性能提升 10–100 倍，…...

编程新知 2026/4/1 11:35:41

Inconsolata字体深度解析：从代码美学到专业排版的完整方案

Inconsolata字体深度解析：从代码美学到专业排版的完整方案【免费下载链接】Inconsolata Development repo of Inconsolata Fonts by Raph Levien 项目地址: https://gitcode.com/gh_mirrors/in/Inconsolata 在编程世界中，字体的选择远不止是审美…...

编程新知 2026/4/1 11:33:41

换掉 Notepad++，事实证明它更牛逼！

提到文本编辑工具，大家肯定第一时间想到的是 Notepad 。Notepad 是一种流行的源代码编辑器，也是 Windows 用户的可靠记事本替代品。它是一个功能强大的实用程序，可在不占用大量存储空间的情况下提供最佳性能。不幸的是，它不适用于…...

编程新知 2026/4/1 10:22:48

17. Threejs案例-Three.js创建多个立方体

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

Scene (场景)

构造器

方法

PerspectiveCamera (透视相机)

构造器

方法

BoxGeometry (立方体几何体)

构造器

方法

MeshNormalMaterial (网格法线材质)

构造器

方法

Mesh (网格对象)

构造器

方法

代码

演示链接

相关文章：