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

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

news 文章来源：https://blog.csdn.net/m0_51180924/article/details/144815891 2025/5/19 1:03:26

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

【智行安全】基于Synaptics SL1680的AI疲劳驾驶检测方案

随著车载技术的快速进步&#xff0c;驾驶安全越来越受到重视&#xff0c;而疲劳驾驶是造成交通事故的重要原因之一。传统的驾驶监控技术因精度不足或反应迟缓&#xff0c;无法满足实时监测需求。因此&#xff0c;结合人工智能技术的疲劳驾驶检测系统成为行业新方向&#xff0c;…...

编程日记 2025/1/1 20:29:18

机器学习随机森林回归时间序列预模型中时间滑动窗口作用以及参数设置

一、时间序列模型中时间滑动窗口作用 在时间序列模型中&#xff0c;时间滑动窗口&#xff08;Sliding Window&#xff09;起到了至关重要的作用。它是一种常见且有效的数据表示技术&#xff0c;通过将时间序列数据分割成多个固定大小的窗口&#xff0c;来捕捉和分析数据中的模式…...

编程日记 2025/1/1 20:26:14

【Rust自学】7.5. use关键字 Pt.2 ：重导入与换国内镜像源教程

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 7.5.1. 使用pub use重新导入名称 使用use将路径导入作用域内后。该名称在词作用域内是私有的。 以上一篇文章的代码为例&#xff1a; m…...

编程日记 2025/1/1 20:25:13

自定义luacheck校验规则

安装运行环境 安装环境及源码解析&#xff0c;参考&#xff1a;LuaCheck校验原理解析 自定义校验规则 从代码中可以看出&#xff0c;定义一条规则有以下关键点&#xff1a; 需要定义告警信息&#xff1a;由键值对组成&#xff0c;key为告警编码&#xff08;不一定为纯数字&…...

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

python钉钉机器人

上代码 #coding:utf-8 import sys import time import hmac import hashlib import base64 import urllib.parse import requeststimestamp str(round(time.time() * 1000)) secret 你的secret secret_enc secret.encode(utf-8) string_to_sign {}\n{}.format(timestamp, …...

编程日记 2025/1/1 20:19:07

汇编学习笔记

汇编 1. debug指令 -R命令(register) 查看、改变CPU寄存器的内容 r ax 修改AX中的内容 -D命令(display) 查看内存中的内容 -E命令(enter) 改写内存中的内容 -U命令(unassenble反汇编) 将内存中的机器指令翻译成汇编指令 -T命令(trace跟踪) 执行一条机器指令 -A命令…...

编程日记 2025/1/1 20:14:02

混合并行训练框架性能对比

混合并行训练框架性能对比 1. 框架类型 DeepSpeed、Megatron - LM、Colossal - AI、SageMaker、Merak、FasterMoE、Tutel、Whale、Alpa、DAPPLE、Mesh - TensorFlow 2. 可用并行性（Available parallelisms） DNN framework（深度神经网络框架）DP（数据并行，Data Parallelis…...

编程日记 2025/1/1 20:12:00

基于Docker+模拟器的Appium自动化测试（二）

模拟器的设置 打开“夜神模拟器”的系统设置&#xff0c;切换到“手机与网络”页&#xff0c;选中网络设置下的“开启网络连接”和“开启网络桥接模式”复选框&#xff0c;而后选择“静态IP”单选框&#xff0c;在IP地址中输入“192.168.0.105”&#xff0c;网关等内容不再赘述…...

编程日记 2025/1/1 20:06:54

数据结构之线性表之链表(附加一个考研题)

链表的定义 链表的结构&#xff1a; 单链表-初始化 代码实现&#xff1a; 单链表-头插法 代码实现&#xff1a; 这里我给大家分析一下 我们每创建一个新的节点都要插在头节点的后面&#xff0c;我们一定要注意顺序 一定要先让新节点指向头节点指向的下一个节点&#xff0c;…...

编程日记 2025/1/1 20:05:49

etmem

title: 聚焦 Etmem&#xff1a;高效内存管理的新引擎 date: ‘2024-12-31’ category: blog tags: Etmem内存管理性能优化系统资源 sig: storage archives: ‘2024-12’ author:way_back summary: Etmem 是一款专注于内存管理优化的创新工具&#xff0c;通过智能的内存分配、回…...

编程日记 2025/1/1 19:57:38