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

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

news 2026/2/10 8:40:55

文章目录

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

一、前言

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/9 2:42:46

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/2/8 14:19:47

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51