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

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

news 2026/3/30 7:08:26

文章目录

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

一、前言

本文基于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，实现立方体的创建，并加入立方体旋转动画二、代码示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>l…...

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

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

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

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

如图所示 : // 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 创建自动抽奖程序

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mac M1安装Hive

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

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

shader 案例学习笔记之绘制圆

环境搭建：参考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模板编程技术及其发展历程一、早期阶段（C98及之前） 在C98标准中，模板是首次被引入的关键特性之一。模板允许开发人员编写参数化的类型或函数，从而创建通用的算法和数据结构。这种通用性不仅提高了代码的复用性，还确…...

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

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

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

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

25、Wpf之App资源应用

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

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

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

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

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

OkHttp Interceptor日志上报

最近为了做一些网络上的优化，所以就得提前埋点，为后续网络优化提供数据支持。主要是对发起请求埋点，请求错误埋点，客户端请求耗时埋点。事件上报到阿里云，接入的是阿里的应用实时监控服务。网络请求使用的是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