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

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

news 2025/11/6 10:34:44

文章目录

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

一、前言

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

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/11/4 16:08:05

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/2 12:41:43

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/11/1 3:08:27

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/10/24 13:36:43

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/10/25 5:20:46

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/10/26 13:12:06

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/11/3 11:38:12

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/10/31 14:56:20

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2025/11/3 17:51:48