Three.js机器人与星系动态场景（三）：如何实现动画

在前面的博客中分别介绍了如何快速搭建3D交互场景以及通过坐标辅助工具加深对坐标系的理解。本文将继续探讨其中动画实现的细节。通过调整rotation加深对动画的印象。

Three.js机器人与星系动态场景：实现3D渲染与交互式控制-CSDN博客 

Three.js机器人与星系动态场景（二）：强化三维空间认识-CSDN博客

 动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。

 实现上述效果只需要添加如下动画，在动画中给物体旋转增加一个正向或负向的增量，在方法中调用自身达到一个循环


  const animate = () => {
    requestAnimationFrame(animate);
    robot.rotation.y -= 0.005; //机器人旋转
    robot2.rotation.y -= 0.005;
    // 粒子旋转
    starts.rotation.y -= 0.001;
    starts.rotation.z += 0.001;
    starts.rotation.x += 0.001;
    renderer.render(scene, camera);
  };
  animate(); //添加动画

requestAnimationFrame 动画循环

requestAnimationFrame 是一个循环机制，它会在浏览器准备好绘制下一帧时重复调用提供的函数。这样，您可以创建一个平滑且连续的动画效果。在 animate 函数内部，requestAnimationFrame(animate) 被调用，这确保了 animate 函数会在每一帧都被执行。这是创建无限动画循环的关键。

  1. 浏览器优化：当使用 requestAnimationFrame 时，浏览器会优化动画过程，减少页面闪烁和重绘，确保动画流畅运行。它会根据显示器的刷新率（通常是 60Hz）来调用动画函数，但实际的调用次数可能会根据电脑的性能和浏览器的工作负载动态调整。

  2. 时间间隔：requestAnimationFrame 不接受任何时间间隔参数，它会在浏览器认为合适的时候调用函数，这通常与屏幕的刷新率同步。与 setInterval 或 setTimeout 不同，您不需要担心设置一个固定的时间间隔，这有助于避免动画在不同设备上出现不同步的问题。

  3. 暂停和恢复：当用户切换到另一个标签或最小化浏览器窗口时，requestAnimationFrame 会自动暂停，这有助于节省 CPU 和 GPU 资源。当用户返回到页面时，动画会自动恢复。

rotation旋转

rotation旋转，在前面的示例中机器人围绕y轴逆时针旋转。代码如下：

  const animate = () => {
    requestAnimationFrame(animate);
    robot.rotation.y -= 0.005; //机器人旋转
    robot2.rotation.y -= 0.005;
    ...

    renderer.render(scene, camera);
  };

通过rotation属性给robot.rotation.y一个负值，每帧robot绕着y轴逆时针旋转0.005个弧度单位。通过requestAnimationFrame进行动画循环，不断的帧连续播放就形成了动画的效果 

X轴旋转 

让处在原点的机器人让x轴转

  const animate = () => {
    requestAnimationFrame(animate);
    robot.rotation.x -= 0.005; //原点机器人旋转
    robot2.rotation.y -= 0.005;
    renderer.render(scene, camera);
  };

Z轴旋转 

绕z轴旋转，这种感觉演我们上班的状态，要死不活

  const animate = () => {
    requestAnimationFrame(animate);
    robot.rotation.z -= 0.005; //机器人旋转
    robot2.rotation.y -= 0.005;
    ...
    renderer.render(scene, camera);
  };

 完整代码

import { useEffect, useRef } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
//机器人脑袋
function createHead() {
  //SphereGeometry创建球形几何体
  const head = new THREE.SphereGeometry(4, 32, 16, 0, Math.PI * 2, 0, Math.PI * 0.5);
  const headMaterial = new THREE.MeshStandardMaterial({
    color: 0x43b988,
    roughness: 0.5,
    metalness: 1.0,
  });
  const headMesh = new THREE.Mesh(head, headMaterial);
  return headMesh;
}
//触角
function generateHorn(y: number, z: number, angle: number) {
  //触角 CapsuleGeometry 创建胶囊形状的几何体。胶囊形状可以看作是一个圆柱体两端加上半球体
  const line = new THREE.CapsuleGeometry(0.1, 2);
  const lineMaterial = new THREE.MeshStandardMaterial({
    color: 0x43b988,
    roughness: 0.5,
    metalness: 1.0,
  });
  const lineMesh = new THREE.Mesh(line, lineMaterial);
  lineMesh.position.y = y;
  lineMesh.position.z = z;
  lineMesh.rotation.x = angle;
  return lineMesh;
}
//机器人眼睛
function generateEye(x: number, y: number, z: number) {
  //SphereGeometry创建球形几何体
  const eye = new THREE.SphereGeometry(0.5, 32, 16, 0, Math.PI * 2, 0, Math.PI * 2);
  const eyeMaterial = new THREE.MeshStandardMaterial({
    color: 0x212121,
    roughness: 0.5,
    metalness: 1.0,
  });
  const eyeMesh = new THREE.Mesh(eye, eyeMaterial);
  eyeMesh.position.x = x;
  eyeMesh.position.y = y;
  eyeMesh.position.z = z;
  return eyeMesh;
}
//机器人身体
function generateBody() {
  //CylinderGeometry第一个参数是上部分圆的半径，第二个参数是下部分圆的半径，第三个参数是高度，材质使用的跟腿一样
  const body = new THREE.CylinderGeometry(4, 4, 6);
  const bodyMaterial = new THREE.MeshStandardMaterial({
    color: 0x43b988,
    roughness: 0.5,
    metalness: 1.0,
  });
  const bodyMesh = new THREE.Mesh(body, bodyMaterial);
  return bodyMesh;
}
//胳膊、腿
function generateLegs(y: number, z: number) {
  const leg1 = new THREE.CapsuleGeometry(1, 4);
  const legMaterial1 = new THREE.MeshStandardMaterial({
    color: 0x43b988,
    roughness: 0.5,
    metalness: 1.0,
  });
  const leg1Mesh = new THREE.Mesh(leg1, legMaterial1);
  leg1Mesh.position.y = y;
  leg1Mesh.position.z = z;
  return leg1Mesh;
}
//创建机器人
function generateRobot() {
  // 创建一个Three.js对象，用于存放机器人
  const robot = new THREE.Object3D();
  const headMesh = createHead();
  headMesh.position.y = 6.5;
  robot.add(headMesh);
  //眼睛
  const leftEye = generateEye(3, 8, -2);
  const rightEye = generateEye(3, 8, 2);
  robot.add(leftEye);
  robot.add(rightEye);
  const leftHorn = generateHorn(11, -1, (-Math.PI * 30) / 180);
  const rightHorn = generateHorn(11, 1, (Math.PI * 30) / 180);
  robot.add(leftHorn);
  robot.add(rightHorn);
  const body = generateBody();
  body.position.y = 4;
  robot.add(body);

  // 生成机器人左腿
  robot.add(generateLegs(0, -2));
  // 生成机器人右腿
  robot.add(generateLegs(0, 2));
  //胳膊
  robot.add(generateLegs(3, 5));

  robot.add(generateLegs(3, -5));
  //物体缩放
  robot.scale.x = 0.3;
  robot.scale.y = 0.3;
  robot.scale.z = 0.3;
  return robot;
}
//创建粒子星星
function generateStarts(num: number) {
  //制作粒子特效
  const starts = new THREE.Object3D();
  const obj = new THREE.SphereGeometry(0.2, 3, 3);
  const material = new THREE.MeshStandardMaterial({
    color: 0x43b988,
    roughness: 0.5,
    metalness: 5,
  });
  const mesh = new THREE.Mesh(obj, material);
  for (let i = 0; i < num; i++) {
    const target = new THREE.Mesh();
    target.copy(mesh);
    target.position.x = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));
    target.position.y = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));
    target.position.z = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));
    starts.add(target);
  }
  return starts;
}
//创建文本
function createText(content: string, font: any) {
  const textGeometry = new TextGeometry(content, {
    font: font,
    size: 1,
    height: 0.1,
    curveSegments: 1,
  });
  textGeometry.center();
  const textMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); // front
  const mesh = new THREE.Mesh(textGeometry, textMaterial);
  return mesh;
}
/**
 * 创建一个Three.js场景，包括相机和渲染器
 */
function Robot() {
  // 创建一个div容器，用于存放渲染的Three.js场景
  const containerRef = useRef<HTMLDivElement>(null);
  const scene = new THREE.Scene();
  // 创建一个Three.js相机，包括透视投影、宽高比、近裁剪面和远裁剪面
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(15, 12, 8);
  camera.lookAt(0, 0, 0);
  // 创建一个Three.js渲染器，包括抗锯齿
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  //添加坐标系
  const axisHelper = new THREE.AxesHelper(150);
  scene.add(axisHelper);
  //坐标系添加文字
  const loader = new FontLoader();
  let meshX = new THREE.Mesh();
  let meshY = new THREE.Mesh();
  let meshZ = new THREE.Mesh();
  loader.load("fonts/optimer_regular.typeface.json", function (font) {
    meshX = createText("X", font);
    meshY = createText("Y", font);
    meshZ = createText("Z", font);
    meshX.position.x = 12;
    meshY.position.y = 12;
    meshZ.position.z = 12;
    scene.add(meshX);
    scene.add(meshY);
    scene.add(meshZ);
  });

  const robot = generateRobot();
  const robot2 = generateRobot();
  robot2.position.x = 6;
  robot2.position.z = 6;
  // 将机器人身体添加到场景中
  scene.add(robot);
  scene.add(robot2);
  // 创建一个Three.js方向光，包括颜色、强度
  const straightLight = new THREE.DirectionalLight(0xffffff, 5);
  // 设置方向光的位置
  straightLight.position.set(20, 20, 20);
  // 将方向光添加到场景中
  scene.add(straightLight);

  const starts = generateStarts(200);
  scene.add(starts);

  //轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.update();

  const animate = () => {
    requestAnimationFrame(animate);
    robot.rotation.z -= 0.005; //机器人旋转
    robot2.rotation.y -= 0.005;
    // 粒子旋转
    starts.rotation.y -= 0.001;
    starts.rotation.z += 0.001;
    starts.rotation.x += 0.001;
    //
    meshX.lookAt(camera.position);
    meshY.lookAt(camera.position);
    meshZ.lookAt(camera.position);
    renderer.render(scene, camera);
  };
  animate(); //添加动画

  // 监听组件挂载和卸载
  useEffect(() => {
    // 如果div存在，将渲染器dom元素添加到div中
    if (containerRef.current) {
      containerRef.current.appendChild(renderer.domElement);
      // 渲染场景
      renderer.render(scene, camera);
    }
  }, [containerRef]);

  // 返回div容器，用于存放渲染的Three.js场景
  return <div ref={containerRef} style={{ width: "100vw", height: "100vh" }}></div>;
}

// 导出Robot组件
export default Robot;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/772428.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

如何在操作使用ufw设置防火墙

如何在操作使用ufw设置防火墙

UFW&#xff08;简单防火墙&#xff09;是用于管理iptables防火墙规则的用户友好型前端。它的主要目标是使iptables的管理更容易。 在学习Linux的时候大家一般都会关心命令&#xff0c;Posix API和桌面等&#xff0c;很少会去了解防护墙。其实除了一些网络安全厂商提供的付费防…
阅读更多...
大疆2025校招内推

大疆2025校招内推

需要内推码的请留言哦 期待你的加入
阅读更多...
【你真的了解double和float吗】

【你真的了解double和float吗】

&#x1f308;个人主页&#xff1a;努力学编程’ ⛅个人推荐&#xff1a;基于java提供的ArrayList实现的扑克牌游戏 |C贪吃蛇详解 ⚡学好数据结构&#xff0c;刷题刻不容缓&#xff1a;点击一起刷题 &#x1f319;心灵鸡汤&#xff1a;总有人要赢&#xff0c;为什么不能是我呢 …
阅读更多...
2024亚洲国际餐饮展览会（北京餐饮展|火锅展|预制菜展会）

2024亚洲国际餐饮展览会（北京餐饮展|火锅展|预制菜展会）

2024北京餐饮展会&#xff0c;2024北京食材展会&#xff0c;2024北京火锅展会&#xff0c;2024北京火锅食材展会&#xff0c;2024北京预制菜展会&#xff0c;2024北京预制食材展会&#xff0c; 2024亚洲国际餐饮展览会&#xff08;北京餐饮展|火锅展|预制菜展会&#xff09; …
阅读更多...
Linux Rsyslog+LogAnalyzer+MariaDB部署日志服务器

Linux Rsyslog+LogAnalyzer+MariaDB部署日志服务器

文章目录 Linux RsyslogLogAnalyzerMariaDB部署日志服务器1 环境准备1.1 服务器端安装LAMP环境1.2 服务启动并加入开机启动1.2.1 Apache1.2.2 MariaDB1.2.3 Php 2 Rsyslog服务端安装及配置2.1 安装Rsyslog及Rsyslog连接MySQL的模块2.2 导入rsyslog-mysql数据库文件2.3 查看刚导…
阅读更多...
【高校科研前沿】南京地理与湖泊研究所博士后夏凡为第一作者在环境科学与水资源领域Top期刊发文：钙对云南洱海溶解有机质与浮游细菌相互作用的调控作用

【高校科研前沿】南京地理与湖泊研究所博士后夏凡为第一作者在环境科学与水资源领域Top期刊发文：钙对云南洱海溶解有机质与浮游细菌相互作用的调控作用

文章简介 论文名称&#xff1a;Calcium regulates the interactions between dissolved organic matter and planktonic bacteria in Erhai Lake, Yunnan Province, China 第一作者及单位&#xff1a;夏凡&#xff08;博士后|中国科学院南京地理与湖泊研究所&#xff09; 通讯…
阅读更多...
Build a Large Language Model (From Scratch)附录C(gpt-4o翻译版)

Build a Large Language Model (From Scratch)附录C(gpt-4o翻译版)

来源&#xff1a;https://github.com/rasbt/LLMs-from-scratch?tabreadme-ov-file https://www.manning.com/books/build-a-large-language-model-from-scratch
阅读更多...
C++初学者指南-3.自定义类型(第一部分)-类和基本自定义类型

C++初学者指南-3.自定义类型(第一部分)-类和基本自定义类型

C初学者指南-3.自定义类型(第一部分)-类和基本自定义类型 文章目录 C初学者指南-3.自定义类型(第一部分)-类和基本自定义类型1.类型种类&#xff08;简化&#xff09;2.为什么选择自定义类型&#xff1f;单向计数器提升序列 3.限制成员访问成员函数公共(public) vs. 私有(priva…
阅读更多...
firewalld(7)NAT、端口转发

firewalld(7)NAT、端口转发

简介 在前面的文章中已经介绍了firewalld了zone、rich rule等规则设置&#xff0c;并且在iptables的文章中我们介绍了网络防火墙、还有iptables的target,包括SNAT、DNAT、MASQUERADE、REDIRECT的原理和配置。那么在这篇文章中&#xff0c;将继续介绍在firewalld中的NAT的相关配…
阅读更多...
cpp随笔——如何实现一个简单的进程心跳功能

cpp随笔——如何实现一个简单的进程心跳功能

什么是进程的心跳 在我们日常后台服务程序运行中,一般是调度模块&#xff0c;进程心跳以及进程监控共同工作&#xff0c;进而实现实现服务的稳定运行,在前面我们介绍过如何去实现一个简单的调度模块,而今天我们所要介绍的就是如何实现进程的心跳&#xff0c;首先什么是进程的心…
阅读更多...
MCU中如何利用串口通信，增加AT指令框架

MCU中如何利用串口通信，增加AT指令框架

第一步&#xff0c;通过串口与PC端建立通信第二步&#xff0c;根据PC端发来的AT指令&#xff0c;MCU执行相应代码 主要是解析PC端发来的字符串&#xff0c;也就是获取字符串、处理字符串、以及分析字符串。 1. 串口通信 用到的是DMA串口通信&#xff0c;收发字符串数据时&…
阅读更多...
什么是JavaScript中的箭头函数（arrow functions）？

什么是JavaScript中的箭头函数（arrow functions）？

聚沙成塔每天进步一点点 本文回顾 ⭐ 专栏简介什么是JavaScript中的箭头函数&#xff08;arrow functions&#xff09;&#xff1f;1. 引言2. 箭头函数的语法2.1 基本语法2.2 示例 3. 箭头函数的特点3.1 简洁的语法3.2 没有this绑定3.3 不能用作构造函数3.4 没有arguments对象3…
阅读更多...
基于SpringBoot的就业信息管理系统

基于SpringBoot的就业信息管理系统

你好&#xff0c;我是计算机学姐码农小野&#xff01;如果你对就业信息管理系统感兴趣或有相关需求&#xff0c;欢迎私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; SpringBootMySql 工具&#xff1a; MyEclipse、Tomcat 系统展示…
阅读更多...
隐私信息管理体系认证：守护个人信息，筑牢隐私防线

隐私信息管理体系认证：守护个人信息，筑牢隐私防线

在数字化浪潮汹涌的当下&#xff0c;个人信息安全问题愈发凸显其重要性。随着互联网技术的飞速发展&#xff0c;我们的隐私信息如同裸露在阳光下的沙滩&#xff0c;稍有不慎就可能被不法分子窃取或滥用。因此&#xff0c;构建一个完善的隐私信息管理体系&#xff0c;成为了保障…
阅读更多...
结合数据索引结构看SQL的真实执行过程

结合数据索引结构看SQL的真实执行过程

引言 关于数据库设计与优化的前几篇文章中&#xff0c;我们提到了数据库设计优化应该遵守的指导原则、数据库底层的索引组织结构、数据库的核心功能组件以及SQL的解析、编译等。这些其实都是在为SQL的优化、执行的理解打基础。 今天这篇文章&#xff0c;我们以MySQL中InnoDB存…
阅读更多...
软件测评机构：关于软件验收测试作用与实施步骤全解析

软件测评机构：关于软件验收测试作用与实施步骤全解析

软件验收测试是指在软件项目交付给用户之前进行的一系列测试活动&#xff0c;其主要目的是验证软件是否符合用户需求和设计规范&#xff0c;以确保软件的质量和稳定性。 软件验收测试在软件开发生命周期的最后阶段进行&#xff0c;起到了至关重要的作用。它能够帮助客户确认软…
阅读更多...
AI PC（智能电脑）技术分析

AI PC（智能电脑）技术分析

一文看懂AI PC&#xff08;智能电脑&#xff09; 2024年&#xff0c;英特尔、英伟达等芯片巨头革新CPU技术&#xff0c;融入AI算力&#xff0c;为传统PC带来质的飞跃&#xff0c;引领智能计算新时代。 2024年&#xff0c;因此被叫作人工智能电脑&#xff08;AI PC&#xff09;…
阅读更多...
【elementui】记录解决el-tree开启show-checkbox后，勾选一个叶结点后会自动折叠的现象

【elementui】记录解决el-tree开启show-checkbox后，勾选一个叶结点后会自动折叠的现象

第一种解决方案&#xff1a;设置default-expand-keys的值为当前选中的key值即可 <el-treeref"tree"class"checkboxSelect-wrap":data"treeData"show-checkboxnode-key"id":expand-on-click-node"true":props"defau…
阅读更多...
MATLAB——循环语句

MATLAB——循环语句

一、for end语句 在该语法中&#xff0c;循环变量是用于迭代的变量名&#xff0c;它会在每次循环迭代中从向量或矩阵中取出一列的值。数值向量或者矩阵则表示了循环变量可以取值的范围&#xff0c;通常根据实际需要事先给定。一旦循环变量遍历完数值向量或者矩阵中的所有值&…
阅读更多...
在LCD1602上显示一串字符

在LCD1602上显示一串字符

阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站