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

学习threejs，创建立方体，并执行旋转动画

news 2025/12/29 17:44:17

文章目录

  • 一、前言
  • 二、代码示例
  • 三、总结

一、前言

本文基于threejs，实现立方体的创建，并加入立方体旋转动画

二、代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn1(创建立方体、旋转)</title><script src="lib/threejs/91/three.js"></script><style>body{margin:0;}canvas{width: 100%; height:100%; display: block;}</style>
</head>
<body><script>//创建场景var scene = new THREE.Scene();//设置相机（视野，显示口的宽高比，近裁剪面，远裁剪面）var camera = new THREE.PerspectiveCamera( 75, 	 window.innerWidth/window.innerHeight, 0.1, 1000 );//渲染器var renderer = new THREE.WebGLRenderer();//设置渲染器的高度和宽度，如果加上第三个值 false，则按场景大小显示，等比例缩放renderer.setSize( window.innerWidth, window.innerHeight,false);//将渲染器添加到html当中document.body.appendChild( renderer.domElement );//盒子模型（BoxGeometry），这是一个包含立方体所有顶点和填充面的对象。var geometry = new THREE.BoxGeometry( 1, 2, 1 );//使用网孔基础材料（MeshBasicMaterial）进行着色器，这里只绘制了一个绿色var material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );//使用网孔(Mesh)来承载几何模型var cube = new THREE.Mesh( geometry, material );//将模型添加到场景当中scene.add( cube );//将相机沿z轴偏移5camera.position.z = 5;//设置一个动画函数var animate = function () {//一秒钟调用60次，也就是以每秒60帧的频率来绘制场景。requestAnimationFrame( animate );//console.log(cube.rotation);//每次调用模型的沿xy轴旋转0.01cube.rotation.x += 0.01;cube.rotation.y += 0.01;// cube.rotation.z += 0.01;//使用渲染器把场景和相机都渲染出来renderer.render(scene, camera);};animate();
</script>
</body>
</html>

效果如图：
在这里插入图片描述

三、总结

以上为基于threejs，实现立方体的创建，并加入立方体旋转动画的简单案例，希望对您有帮助~
在这里插入图片描述

相关文章：

学习threejs，创建立方体，并执行旋转动画

文章目录 一、前言二、代码示例三、总结 一、前言 本文基于threejs&#xff0c;实现立方体的创建&#xff0c;并加入立方体旋转动画 二、代码示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>l…...

编程日记 2024/9/10 19:30:41

2024网安周今日开幕，亚信安全亮相30城

2024年国家网络安全宣传周今天在广州拉开帷幕。今年网安周继续以“网络安全为人民&#xff0c;网络安全靠人民”为主题。2024年国家网络安全宣传周涵盖了1场开幕式、1场高峰论坛、5个重要活动、15场分论坛/座谈会/闭门会、6个主题日活动和网络安全“六进”活动。亚信安全出席20…...

编程日记 2024/9/10 19:29:39

Unity Qframework 加载UI的方式

如图所示 : // Resources 加载 UIKit.OpenPanel("Resources/UIPrefab/UIMenuPanel"); // Resources 加载并传递数据 UIKit.OpenPanel<UIMenuPanel>(new UIMenuPanelData() { m_Modle this.m_Modle }, prefabName: "UIPrefab/UIMenuPanel"); …...

编程日记 2024/9/10 19:28:29

使用 Python 创建自动抽奖程序

介绍 自动抽奖程序在各种场景中非常有用&#xff0c;比如社交媒体活动、公司抽奖、在线课程奖励等。在这篇博文中&#xff0c;我们将学习如何使用 Python 创建一个自动抽奖程序。我们将涵盖以下内容&#xff1a; 需求分析环境设置基本抽奖逻辑图形用户界面&#xff08;GUI&am…...

编程日记 2024/9/10 19:27:25

推荐10款功能强大的电脑监控软

随着工作环境和信息安全要求的不断提高&#xff0c;越来越多的企业和个人开始关注电脑监控软件。电脑监控软件能够帮助管理者监控员工工作效率、保护敏感信息、防止数据泄露等。下面&#xff0c;我们将为大家推荐10款功能强大的电脑监控软件&#xff0c;涵盖国内外的知名产品&a…...

编程日记 2024/9/10 19:26:21

‘“node“‘ �����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ���

错误信息 使用vscode提交前端代码到git时&#xff0c;报下面的错&#xff0c;一直不知道啥原因&#xff0c;后来找到了个临时解决方案。。。 vscode解决方案 package.json文件中&#xff0c;去掉hooks的配置。 Idea解决方案 网上有说idea的解决方案的&#xff1a;就是提…...

编程日记 2024/9/10 19:25:20

MQ-135空气质量传感器（STM32）

目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 3.工作原理介绍 三、程序设计 main.c文件 mq135.h文件 mq135.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 MQ-135空气质量传感器属于MQ系列气体传感器&#xff0c;广泛用于检测有害气体、新鲜空气中的烟…...

编程日记 2024/9/10 19:22:14

动手学深度学习（pytorch）学习记录27-深度卷积神经网络(AlexNet)[学习记录]

目录 创建模型读取数据集训练AlexNet AlexNet 是由 Alex Krizhevsky、Ilya Sutskever 和 Geoffrey Hinton 在 2012 年提出的深度卷积神经网络&#xff0c;它在当年的 ImageNet 大规模视觉识别挑战赛&#xff08;ILSVRC&#xff09;中取得了显著的成绩&#xff0c;从而引起了深度…...

编程日记 2024/9/10 19:21:13

zookeeper是啥？在kafka中有什么作用

一、Zookeeper是啥 问AI&#xff0c;它是这么说&#xff1a; ZooKeeper是一个开源的分布式协调服务。 ZooKeeper最初由雅虎研究院开发&#xff0c;用于解决大型分布式系统中的协调问题&#xff0c;特别是为了避免分布式单点故障。它被设计成一个简单易用的接口集&#xff0c;封…...

编程日记 2024/9/10 19:20:12

华为手机集大成之作？带你看全球首款三折叠手机 Mate XT 非凡大师

北京时间9月10日14:30分&#xff0c;华为终端在深圳召开了华为见证非凡品牌盛典及鸿蒙智行新品发布会。这次发布会最受瞩目的莫过于非凡大师系列的新品、全球首款三折叠手机Mate XT 非凡大师。 三折叠形态&#xff0c;内外铰链存于一体 尽管三折叠的概念被提出来的时间并不算…...

编程日记 2024/9/10 19:19:11

构建安全畅通的道路网络：EasyCVR视频汇聚平台在道路监控中的创新应用

随着城市化进程的加速和交通流量的不断增加&#xff0c;道路监控已成为确保交通安全、维护社会秩序的重要手段。道路上的监控摄像头多种多样&#xff0c;大致可以分为这几类&#xff1a;交通道路监控、治安监控、路口违章监控&#xff0c;以及车辆测速监控等。基于智慧交通的需…...

编程日记 2024/9/10 19:18:06

Mac M1安装Hive

一、下载解压Hive 1.官网地址 https://dlcdn.apache.org/hive/ 2.选择对应版本进行下载&#xff0c;这里我以3.1.3为例&#xff1b; 3.下载好后&#xff0c;进行解压&#xff0c;并重命名为hive-3.1.3&#xff0c;放到资源库目录下&#xff1b; 二、配置系统环境 1.打开~/…...

编程日记 2024/9/10 19:16:03

shader 案例学习笔记之绘制圆

环境搭建&#xff1a;参考glsl vscode环境搭建 先上代码 #ifdef GL_ES precision mediump float; #endifuniform vec2 u_resolution;void main(){vec2 st gl_FragCoord.xy/u_resolution.xy;st - 0.5;st.x * u_resolution.x/u_resolution.y;float r length(st);float d ste…...

编程日记 2024/9/10 19:14:59

c++的模板编程技术及其发展历程

C模板编程技术及其发展历程 一、早期阶段&#xff08;C98及之前&#xff09; 在C98标准中&#xff0c;模板是首次被引入的关键特性之一。模板允许开发人员编写参数化的类型或函数&#xff0c;从而创建通用的算法和数据结构。这种通用性不仅提高了代码的复用性&#xff0c;还确…...

编程日记 2024/9/10 19:12:53

Unity 一个比较适合学习的FSM状态机(汉化和功能简述)

该轮子由网络资源而来&#xff0c;遵从作者开源意愿&#xff0c;仅作免费学习和分享&#xff0c;不作任何商业行为 &#xff0c;本文不支持任何交易行为&#xff0c;侵权删&#xff01;&#xff01;&#xff01; 至于我为什么不将此文章设置为转载&#xff0c;是因为该代码所在…...

编程日记 2024/9/10 19:07:24

25、Wpf之App资源应用

开发平台&#xff1a;Win10 64位 开发环境&#xff1a;VS2022(64位) Preview .NET Framework&#xff1a;.NET 6 文章目录 一 Resources1.1 Application中定义资源1.2 样式&#xff08;Styles&#xff09;1.3 模板&#xff08;Templates&#xff09;1.4 数据转换器&#xff08;…...

编程日记 2024/9/10 19:05:18

【深度好文】反模式：10种滥用设计模式案例分析

Hello&#xff0c;大家好&#xff0c;我是V哥。很多文章都在介绍设计模式怎么用&#xff0c;讲解设计模式的原理等等&#xff0c;设计模式的思想是编程中的精髓&#xff0c;用好了可以让代码结构利于维护和扩展&#xff0c;同时代码风格也更加优雅&#xff0c;V 哥也写过这样一…...

编程日记 2024/9/10 19:04:17

OkHttp Interceptor日志上报

最近为了做一些网络上的优化&#xff0c;所以就得提前埋点&#xff0c;为后续网络优化提供数据支持。 主要是对发起请求埋点&#xff0c;请求错误埋点&#xff0c;客户端请求耗时埋点。 事件上报到阿里云&#xff0c;接入的是阿里的应用实时监控服务。 网络请求使用的是OhHttp…...

编程日记 2024/9/10 19:03:16

高性能反向代理--HAProxy

文章目录 Web架构负载均衡介绍为什么使用负载均衡负载均衡类型 HAProxy简介应用场景HAProxy是什么HAProxy功能 脚本安装HAProxy基础配置global多进程和线程HAProxy日志配置项 Proxies配置-listen-frontend-backendserver配置 frontendbackend配置实例子配置文件 HAProxy调度算法…...

编程日记 2024/9/10 19:02:11

数据结构应用实例(四)——最小生成树

Content&#xff1a; 一、问题描述二、算法思想三、代码实现四、两种算法的比较五、小结 一、问题描述 利用 prim 算法和 kruskal 算法实现最小生成树问题&#xff1b; 二、算法思想 首先判断图是否连通&#xff0c;只有在连通的情况下才进行最小树的生成&#xff1b; 三、代…...

编程日记 2024/9/10 19:01:10

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/12/28 15:16:27

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/12/28 17:00:55

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/12/14 17:07:40

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/12/28 6:10:07

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

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

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

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27