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

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

news 2026/2/10 18:10:56

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

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2026/2/6 16:59:24

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2026/1/17 14:57:41

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05

当下AI智能硬件方案浅谈

背景&#xff1a; 现在大模型出来以后&#xff0c;打破了常规的机械式的对话&#xff0c;人机对话变得更聪明一点。 对话用到的技术主要是实时音视频&#xff0c;简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术&#xff0c;开发自己的大模型。商用方案多见为字节、百…...

编程新知 2025/10/18 7:56:08

C# WPF 左右布局实现学习笔记(1)

开发流程视频&#xff1a; https://www.youtube.com/watch?vCkHyDYeImjY&ab_channelC%23DesignPro Git源码&#xff1a; GitHub - CSharpDesignPro/Page-Navigation-using-MVVM: WPF - Page Navigation using MVVM 1. 新建工程 新建WPF应用&#xff08;.NET Framework) 2.…...

编程新知 2026/2/4 19:09:49

VUE3 ref 和 useTemplateRef

使用ref来绑定和获取 页面 <headerNav ref"headerNavRef"></headerNav><div click"showRef" ref"buttonRef">refbutton</div>使用ref方法const后面的命名需要跟页面的ref值一样 const buttonRef ref(buttonRef) cons…...

编程新知 2025/12/13 5:40:58

【AI学习】wirelessGPT多任务无线基础模型摘要

收看了关于WirelessGPT多任务无线基础模型的演讲视频&#xff0c;边做一个记录。 应该说&#xff0c;在无线通信大模型的探索方面&#xff0c;有一个非常有益的尝试。 在沈学明院士带领下开展 https://www.chaspark.com/#/live/1125484184592834560...

编程新知 2026/2/5 16:14:16

C#调用Rust动态链接库DLL的案例

C#调用Rust动态链接库DLL的案例 项目概述 这是一个演示C#调用Rust动态链接库DLL的项目&#xff0c;包含&#xff1a; C#主程序 (Program.cs)Rust动态链接库 (rust_to_csharp目录) 使用C#创建一个net9的控制台项目&#xff0c;不使用顶级语句 dotnet new console --framewo…...

编程新知 2025/9/16 7:04:09