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

46. Three.js案例-创建颜色不断变化的立方体模型

news 2026/2/10 19:34:13

46. Three.js案例-创建颜色不断变化的立方体模型

实现效果

效果

知识点

Three.js基础组件

WebGLRenderer

THREE.WebGLRenderer是Three.js提供的用于渲染场景的WebGL渲染器。它支持抗锯齿处理，可以设置渲染器的大小和背景颜色。

  • 构造器
    • antialias: 是否开启抗锯齿，默认为false。
    • setSize(width, height): 设置渲染器的宽度和高度。
    • setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。
Scene

THREE.Scene是Three.js中的场景对象，所有的物体都需要添加到场景中才能被渲染。

  • 方法
    • add(object): 向场景中添加物体。
PerspectiveCamera

THREE.PerspectiveCamera是透视相机，模拟人眼的视角效果。

  • 构造器
    • fov: 视野角度（Field of View），通常设置为45度。
    • aspect: 宽高比，通常是窗口宽度除以高度。
    • near: 近裁剪面距离。
    • far: 远裁剪面距离。
  • 属性
    • position: 相机的位置。
    • lookAt(vector): 设置相机看向的目标位置。

ShaderMaterial

ShaderMaterial

THREE.ShaderMaterial允许用户自定义着色器，通过编写GLSL代码来控制物体的外观。

  • 构造器
    • uniforms: 传递给着色器的统一变量。
      • time: 时间变量，类型为浮点数。
      • resolution: 分辨率变量，类型为二维向量。
    • vertexShader: 顶点着色器代码。
    • fragmentShader: 片元着色器代码。
顶点着色器

顶点着色器负责计算每个顶点的位置，并将一些数据传递给片元着色器。

varying vec2 vUv;
void main() {vUv = uv;vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);gl_Position = projectionMatrix * mvPosition;
}
片元着色器

片元着色器负责计算每个像素的颜色。

uniform float time;
uniform vec2 resolution;
varying vec2 vUv;
void main( void ) {vec2 position = -1.0 + 2.0 * vUv;float red = abs(sin(position.x * position.y + time / 5.0));float green = abs(sin(position.x * position.y + time / 4.0));float blue = abs(sin(position.x * position.y + time / 3.0));gl_FragColor = vec4(red, green, blue, 1.0);
}

Mesh

THREE.Mesh是网格对象，由几何体和材质组成。

  • 构造器
    • geometry: 几何体，如BoxGeometry。
    • material: 材质，如ShaderMaterial。

动画

使用requestAnimationFrame函数实现动画效果，不断更新物体的旋转角度和时间变量。

function animate() {myMesh.rotation.y = myStep += 0.01;myMesh.rotation.x = myStep;myMesh.rotation.z = myStep;myMesh.material.uniforms.time.value += 0.1;requestAnimationFrame(animate);myRenderer.render(myScene, myCamera);
}

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script id="myVertexShader" type="x-shader/x-vertex">varying vec2 vUv;void main() {vUv = uv;vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);gl_Position = projectionMatrix * mvPosition;}
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">uniform float time;uniform vec2 resolution;varying vec2 vUv;void main( void ) {vec2 position = -1.0 + 2.0 * vUv;float red = abs(sin(position.x * position.y + time / 5.0));float green = abs(sin(position.x * position.y + time / 4.0));float blue = abs(sin(position.x * position.y + time / 3.0));gl_FragColor = vec4(red, green, blue, 1.0);}
</script>
<script type="text/javascript">var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);myRenderer.setClearColor('white', 1.0);$('#myContainer')[0].appendChild(myRenderer.domElement);var myScene = new THREE.Scene();var myCamera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 10, 130);myCamera.position.x = 30;myCamera.position.y = 30;myCamera.position.z = 30;myCamera.lookAt(new THREE.Vector3(0, 0, 0));var myShaderMaterial = new THREE.ShaderMaterial({uniforms: {time: {type: "f", value: 1.0},resolution: {type: "v2", value: new THREE.Vector2()},},vertexShader: $('#myVertexShader')[0].textContent,fragmentShader: $('#myFragmentShader')[0].textContent});var myBoxGeometry = new THREE.BoxGeometry(16, 16, 16);var myMesh = new THREE.Mesh(myBoxGeometry, myShaderMaterial);myScene.add(myMesh);var myStep = 0;function animate() {myMesh.rotation.y = myStep += 0.01;myMesh.rotation.x = myStep;myMesh.rotation.z = myStep;myMesh.material.uniforms.time.value += 0.1;requestAnimationFrame(animate);myRenderer.render(myScene, myCamera);}animate();
</script>
</body>
</html>

演示链接

示例链接

相关文章：

46. Three.js案例-创建颜色不断变化的立方体模型

46. Three.js案例-创建颜色不断变化的立方体模型 实现效果 知识点 Three.js基础组件 WebGLRenderer THREE.WebGLRenderer是Three.js提供的用于渲染场景的WebGL渲染器。它支持抗锯齿处理&#xff0c;可以设置渲染器的大小和背景颜色。 构造器 antialias: 是否开启抗锯齿&am…...

编程日记 2025/1/1 21:09:10

Linux系统离线部署MySQL详细教程（带每步骤图文教程）

1、登录官网下载对应的安装包 MySQL :: Developer Zone 2、将压缩包上传到服务器上&#xff0c;这里直接上传到/usr/local路径上 使用sftp工具上传到/usr/local目录上 3、解压压缩包 tar -xf mysql-8.0.39-linux-glibc2.17-x86_64.tar.xz 4、将mysql-8.0.39-linux-glibc2.17…...

编程日记 2025/1/1 21:08:09

【数据仓库】hive on Tez配置

hive on Tez 搭建 前提是hive4.0hadoop3.2.2数仓已搭建完成&#xff0c;现在只是更换其执行引擎 为Tez。搭建可参考【数据仓库】hive hadoop数仓搭建实践文章。 Tez 下载 下载地址 https://archive.apache.org/dist/tez/ 官网地址 https://tez.apache.org/releases/apac…...

编程日记 2025/1/1 21:07:04

Kubernetes Gateway API-3-TLS配置

1 简介 Gateway API 允许使用多种方式配置 TLS。本文档列出了各种TLS设置，并给出了如何有效使用它们的一般指南。 尽管本文档涵盖了 Gateway API 最常见的TLS配置形式，但某些实现也可能提供特定于实现的扩展，允许不同或更高级形式的TLS配置。除此文档外，值得阅读你所使用…...

编程日记 2025/1/1 21:06:03

C++ 设计模式：原型模式（Prototype Pattern）

链接&#xff1a;C 设计模式 链接&#xff1a;C 设计模式 - 工厂方法 链接&#xff1a;C 设计模式 - 抽象工厂 链接&#xff1a;C 设计模式 - 建造者模式 原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它允许一个对象通过复制现有对象来…...

编程日记 2025/1/1 21:05:01

计算机网络 （12）物理层下面的传输媒体

前言 计算机网络物理层下面的传输媒体是计算机网络设备之间的物理通路&#xff0c;也称为传输介质或传输媒介&#xff0c;并不包含在计算机网络体系结构中&#xff0c;而是处于物理层之下。 一、传输媒体的分类 导向型媒体&#xff1a;电磁波被导引沿着固体媒体传播。常见的导向…...

编程日记 2025/1/1 21:03:59

SpringCloud 系列教程：微服务的未来（三）IService接口的业务实现

本文将介绍 IService 接口的基本业务操作、复杂业务操作、Lambda 方法的使用以及批量增加操作&#xff0c;帮助开发者深入了解如何高效地利用 MyBatis-Plus 提供的功能进行数据库操作。无论是简单的单表查询&#xff0c;还是复杂的多表联动&#xff0c;甚至是大数据量的批量操作…...

编程日记 2025/1/1 21:01:57

测试带宽上行方法

测试宽带上行速度的软件有多种&#xff0c;以下是一些常见的选择&#xff1a; Speedtest 平台支持&#xff1a;iOS、Android、Windows、MacOS等 特点&#xff1a;全球知名的网络测速软件&#xff0c;测试结果准确&#xff0c;支持多平台。用户可以选择最近的服务器进行测试&am…...

编程日记 2025/1/1 20:57:53

天天跳绳（？？？）

广东省人民政府门户网站 https://www.gd.gov.cn/zwgk/zdlyxxgkzl/whjg/content/post... 二沙岛变身智能“运动岛” - 广东省人民政府门户网站 2020年10月20日  广州二沙岛&#xff0c;犹如一颗璀璨明珠点缀在珠江之心&#xff0c;自然风光旖旎&#xff0c;功能分区清 … 公共…...

编程日记 2025/1/1 20:56:52

module ‘django.db.models‘ has no attribute ‘FieldDoesNotExist‘

module ‘django.db.models’ has no attribute ‘FieldDoesNotExist’ xadmin报错 原因 django与xadmin版本不匹配。 django==3.2.7 xadmin-django==3.0.2解决方案 在xadmin/view/edit.py的388行改为 from django.core import exceptions if self.request_method ==...

编程日记 2025/1/1 20:51:46

智能工厂的设计软件 应用场景的一个例子：为AI聊天工具添加一个知识系统 之10 方案再探之1：特定于领域的模板 之1 随想交流

前面的项目再次不能继续。不得已再一次重新建了这个项目&#xff0c;并以当前修改版本的项目文件为附件开始了今天的沟通。所以 标明是“方案再探” 在新建这个项目的同时&#xff0c;就将项目文件作为附件添加进去&#xff0c;然后开始。 文件链接&#xff1a;智能工厂的设计…...

编程日记 2025/1/1 20:50:45

Excel将混乱的多行做成1列

前提&#xff1a;需要excel有textjoin函数&#xff0c;这个函数&#xff0c;根据百度说是在2016之后的版本才说&#xff0c;功能比较强大。 目标是将数据按从左到右&#xff0c;再从上到下排成一列。 公式法 首先用textjoin函数将文本包起来&#xff0c;做成一个超长文本。 然…...

编程日记 2025/1/1 20:47:42

Django项目部署到服务器

文章目录 django项目部署到服务器在服务器上安装Django和依赖&#xff1a;项目代码上传配置数据库收集静态文件配置Web服务器配置Gunicorn&#xff08;WSGI服务器&#xff09;启动/停止/重载systemd服务。 django项目部署到服务器 在服务器上安装Django和依赖&#xff1a; su…...

编程日记 2025/1/1 20:43:36

SpringBoot集成Flowable

一、工作流介绍 1、概念 通过计算机对业务流程的自动化管理。工作流是建立在业务流程的基础上&#xff0c;一个软件的系统核心根本上还是系统的业务流程&#xff0c;工作流只是协助进行业务流程管理。 解决的是&#xff1a;在多个参与者之间按照某种预定义的规则自动进行传递…...

编程日记 2025/1/1 20:41:31

大模型从零开始——预训练之分词 Tokenization

文章目录 一、概念介绍 二、单词级别分词 三、字符级别分词 四、子词级别分词 BPE/BBPE分词 BPE&#xff1a;Byte-Pair Encoding (BPE) BBPE&#xff1a;Byte-level BPE (BBPE) WordPiece分词 Unigram分词 五、总结 词元化&#xff08;Tokenization&#xff09;是数据预处…...

编程日记 2025/1/1 20:40:30

Python下载包缓慢时怎么修改镜像源

前言 在使用Python下载第三方包时&#xff0c;有时会比较缓慢&#xff0c;与Linux环境中下载软件一样可以替换软件源一样&#xff0c;Python下载源也可以进行修改&#xff0c;因为总是记不住镜像地址&#xff0c;特此记录一下。 常用镜像 豆瓣镜像&#xff1a; https://pypi.…...

编程日记 2025/1/1 20:38:27

每日一练 | 时延和抖动

01 真题题目 关于时延和抖动&#xff0c;下面描述正确的是&#xff08;多选&#xff09;&#xff1a; A. 端到端时延等于处理时延与队列时延之和 B. 抖动是因为每个包的端到端时延不相等造成的 C. 抖动的大小跟时延的大小相关&#xff0c;时延小则抖动的范围也小&#xff0c;时…...

编程日记 2025/1/1 20:35:23

嵌入式开发之使用 FileZilla 在 Windows 和 Ubuntu 之间传文件

01-FileZilla简介 FileZilla 是一个常用的文件传输工具&#xff0c;它支持多种文件传输协议&#xff0c;包括以下主要协议&#xff1a; FTP (File Transfer Protocol) 这是 FileZilla 最基本支持的协议。FTP 是一种明文传输协议&#xff0c;不加密数据&#xff08;包括用户名和…...

编程日记 2025/1/1 20:33:21

腾势D9风光不再？中期改款能否及时“救火”

文/王俣祺 导语&#xff1a;腾势D9销量下滑了&#xff0c;这背后是MPV市场的整体没落还是众多新车的围追堵截&#xff1f;如今2025款腾势D9也来了&#xff0c;“加量不加价”的新车又能否逆转乾坤&#xff0c;重夺MPV市场霸主的地位&#xff1f; 腾势D9销量下滑的“真相” 回…...

编程日记 2025/1/1 20:32:21

OpenCV-Python实战（11）——边缘检测

一、Sobel 算子 通过 X 梯度核与 Y 梯度核求得图像在&#xff0c;水平与垂直方向的梯度。 img cv2.Sobel(src*,ddepth*,dx*,dy*,ksize*,scale*,delta*,borderType*)img&#xff1a;目标图像。 src&#xff1a;原始图像。 ddepth&#xff1a;目标图像深度&#xff0c;-1 代表…...

编程日记 2025/1/1 20:31:20

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/9 2:42:51

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/9 16:05:07

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/2/8 4:08:40

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53