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

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

news 2025/9/11 18:55:24

文章目录

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

一、前言

本文基于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

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/8/4 15:02:27

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/9/11 12:54:40

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/9/3 19:49:50

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/9/7 8:49:38

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

编程新知 2025/6/10 21:08:23

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

编程新知 2025/8/17 13:47:50

小智AI+MCP

什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析&#xff1a;AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github&#xff1a;https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...

编程新知 2025/9/2 19:53:26