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

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

news 2026/4/4 15:31:19

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

从理论到实践：用Matlab打通数值计算核心脉络

1. 数值计算与Matlab的黄金组合 数值计算是理工科学生和工程师必备的核心技能之一。想象一下&#xff0c;当你面对一个复杂的工程问题&#xff0c;比如桥梁受力分析或者卫星轨道计算&#xff0c;纯手工计算几乎不可能完成。这时候数值计算就像一把瑞士军刀&#xff0c;而Matlab…...

编程新知 2026/4/4 15:29:35

关于reverse的tea题目回顾

ea的短暂性小总结说实话今天做的内容不算太多&#xff0c;但是感觉很超出自己的承受范围。 话不多说进行短暂总结tea模式tea的题目做起来的话公式比较固定。就比如用下面这个简单的题目进行示范这个就是图片&#xff0c;有en和de两种模式。de是我自己写出来的。查看en代码时能够…...

编程新知 2026/4/4 15:19:24

Lux编译器完整指南：如何将用户意图智能转化为可视化规范

Lux编译器完整指南&#xff1a;如何将用户意图智能转化为可视化规范 【免费下载链接】lux Automatically visualize your pandas dataframe via a single print! &#x1f4ca; &#x1f4a1; 项目地址: https://gitcode.com/gh_mirrors/lux/lux Lux编译器是Lux数据可视…...

编程新知 2026/4/4 15:07:14

ai赋能openclaw：通过快马平台实现智能路径规划与自适应抓取

最近在做一个智能抓取机器人OpenClaw的项目&#xff0c;正好体验了一把AI辅助开发的便利。这个项目需要实现机械爪在复杂环境中的自主路径规划和自适应抓取&#xff0c;过程中发现InsCode(快马)平台的AI功能确实帮了大忙&#xff0c;分享下具体实现思路和踩坑经验。 场景搭建与…...

编程新知 2026/4/4 14:26:40

AEUX：跨平台设计资产迁移全攻略

AEUX&#xff1a;跨平台设计资产迁移全攻略 【免费下载链接】AEUX Editable After Effects layers from Sketch artboards 项目地址: https://gitcode.com/gh_mirrors/ae/AEUX 破解设计动效衔接难题&#xff1a;重新定义创意工作流价值 在当今数字化设计领域&#xff0…...

编程新知 2026/4/4 13:34:10

本地化AI字幕解决方案：Qwen3-ForcedAligner支持多格式音频

本地化AI字幕解决方案&#xff1a;Qwen3-ForcedAligner支持多格式音频 1. 引言&#xff1a;本地化字幕生成的新选择 在视频内容创作和多媒体处理领域&#xff0c;字幕生成一直是个耗时费力的工作。传统手动添加字幕不仅效率低下&#xff0c;时间轴对齐的精度也难以保证。Qwen…...

编程新知 2026/4/4 13:30:03

AI辅助开发：让快马AI帮你构思vc16188视频目标识别代码框架

最近在做一个视频分析的小项目&#xff0c;需要实现目标识别功能。作为一个独立开发者&#xff0c;面对复杂的计算机视觉算法确实有点头疼。好在发现了InsCode(快马)平台的AI辅助开发功能&#xff0c;帮我快速搭建起了vc16188视频目标识别的代码框架。这里分享一下我的实现过程…...

编程新知 2026/4/4 12:47:25

告别重复造轮子：用快马一键生成qoderwork官网开发骨架，效率倍增

作为一个经常需要搭建官网的前端开发者&#xff0c;我深刻理解那种面对空白项目时的无力感。每次新建项目&#xff0c;光是搭建基础框架、配置路由、设计布局就要花掉大半天时间。最近尝试用InsCode(快马)平台生成qoderwork官网的骨架代码&#xff0c;效率提升简直惊人。 为什么…...

编程新知 2026/4/4 12:45:24

如何快速解密科学文库加密文档：终极免费解密工具指南

如何快速解密科学文库加密文档&#xff1a;终极免费解密工具指南 【免费下载链接】ScienceDecrypting 破解CAJViewer带有效期的文档&#xff0c;支持破解科学文库、标准全文数据库下载的文档。无损破解&#xff0c;保留文字和目录&#xff0c;解除有效期限制。 项目地址: htt…...

编程新知 2026/4/4 11:09:43

QuickLook.Plugin.OfficeViewer-Native：Office文件秒级预览的轻量化技术实现解析

QuickLook.Plugin.OfficeViewer-Native&#xff1a;Office文件秒级预览的轻量化技术实现解析 【免费下载链接】QuickLook.Plugin.OfficeViewer-Native View Word, Excel, and PowerPoint files with MS Office and WPS Office components. 项目地址: https://gitcode.com/gh_…...

编程新知 2026/4/4 10:11:27