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

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

news 2026/2/7 14:18:22

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

实现效果

效果

知识点

WebGLRenderer (WebGL渲染器)

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

构造器

new THREE.WebGLRenderer(parameters)

参数类型描述
parametersObject可选参数对象，用于配置渲染器。常用参数包括：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)

参数类型描述
fovNumber视野角度，单位为度。
aspectNumber相机的宽高比。
nearNumber近裁剪面距离。
farNumber远裁剪面距离。
方法
  • position.set(x, y, z): 设置相机的位置。
  • lookAt(vector): 设置相机的朝向目标点。
BoxGeometry (立方体几何体)

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

构造器

new THREE.BoxGeometry(width, height, depth)

参数类型描述
widthNumber立方体的宽度。
heightNumber立方体的高度。
depthNumber立方体的深度。
方法
  • translateX(amount): 沿 X 轴移动几何体。
  • translateY(amount): 沿 Y 轴移动几何体。
  • translateZ(amount): 沿 Z 轴移动几何体。
MeshNormalMaterial (网格法线材质)

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

构造器

new THREE.MeshNormalMaterial(parameters)

参数类型描述
parametersObject可选参数对象，用于配置材质。
方法
  • color.set(color): 设置材质的颜色。
Mesh (网格对象)

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

构造器

new THREE.Mesh(geometry, material)

参数类型描述
geometryGeometry几何体对象。
materialMaterial材质对象。
方法
  • 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、最近给一个项目做了一款基础功能的自动测试&#xff0c;在打开蓝牙时&#xff0c;有一个是否同意的提示框要去掉&#xff0c;即默认同意打开蓝牙。 2、路径&#xff1a; packages/apps/Settings/src/com/android/settings/bluetooth/RequestPermissionActivity.java// Sho…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【HarmonyOS】Component组件引入报错 一、问题背景 有时会碰到引入组件时&#xff0c;无法import引入组件&#xff0c;导致引入的组件报错。 或者提示does not meet UI component syntax. &#xff08;不符合UI组件语法。&#xff09; 如下图所示&#xff0c;在引入组件时&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 的幂 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:bool isPowerOfTwo(int n) {return n>0&&n(n&(-n));} }; 2. 3的幂 326. 3 的幂 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:bool isPowerOfT…...

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

CSS中要注意的样式效果

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

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

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

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

编程日记 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语音识别合成芯片强大的语音处理能力&#xff0c;结合蓝牙功能、APP或小程序&#xff0c;打造一款功能全面且智能化程度高的闹钟产品。除了基本的时钟显示和闹钟提醒功能外&#xff0c;还拥有正计时、倒计时、日程安排、重要日提醒以及番茄钟…...

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

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

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

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

Cannon.js 从入门到精通

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

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

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

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

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

K8S，StatefulSet

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

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

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

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

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

MySql：Centos7安装MySql

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

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

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

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

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

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2026/2/4 11:21:40

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2026/2/7 11:00:30