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

使用 Three.js 创建一个 3D 人形机器人仿真系统

news 2025/11/15 8:31:08

引言

在这篇文章中，我们将探讨如何使用 Three.js 创建一个简单但有趣的 3D 人形机器人仿真系统。这个机器人可以通过键盘控制进行行走和转向，并具有基本的动画效果。

在这里插入图片描述

技术栈

HTML5
Three.js
JavaScript

实现步骤

1. 基础设置

首先，我们需要创建基本的 HTML 结构并引入 Three.js 库：

<!DOCTYPE html>
<html>
<head><title>3D Robot Simulation</title><style>body { margin: 0; overflow: hidden;}canvas { display: block; }#info {position: absolute;top: 10px;left: 10px;color: white;font-family: Arial;font-size: 14px;background: rgba(0,0,0,0.5);padding: 10px;}</style>
</head>
<body><div id="info">使用方向键控制机器人:<br>↑ - 向前移动<br>← → - 左右转向</div><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</body>
</html>

2. 场景初始化

接下来，我们需要初始化 Three.js 的基本组件：

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // 天空蓝色背景const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

3. 创建机器人类

创建一个 Robot 类来管理机器人的所有组件和动作：

class Robot {constructor() {this.body = new THREE.Group();// 创建躯干const torsoGeometry = new THREE.BoxGeometry(2, 3, 1);const torsoMaterial = new THREE.MeshPhongMaterial({color: 0x999999});this.torso = new THREE.Mesh(torsoGeometry, torsoMaterial);this.torso.castShadow = true;// 创建头部const headGeometry = new THREE.SphereGeometry(0.5);const headMaterial = new THREE.MeshPhongMaterial({color: 0xcccccc});this.head = new THREE.Mesh(headGeometry, headMaterial);this.head.position.y = 2;this.head.castShadow = true;// ... 其他部件的创建代码 ...}// 创建四肢createLimb(width, height) {const geometry = new THREE.BoxGeometry(width, height, width);const material = new THREE.MeshPhongMaterial({color: 0x999999});const limb = new THREE.Mesh(geometry, material);limb.castShadow = true;return limb;}// 行走动画walk() {const legRotation = Math.sin(Date.now() * 0.005) * 0.5;this.leftLeg.rotation.x = legRotation;this.rightLeg.rotation.x = -legRotation;const armRotation = Math.sin(Date.now() * 0.005) * 0.25;this.leftArm.rotation.x = -armRotation;this.rightArm.rotation.x = armRotation;}// 转向和移动方法turn(angle) {this.body.rotation.y += angle;}moveForward(speed) {this.body.position.x += Math.sin(this.body.rotation.y) * speed;this.body.position.z += Math.cos(this.body.rotation.y) * speed;}
}

4. 添加环境元素

创建地面和光照系统：

// 创建地面
const groundGeometry = new THREE.PlaneGeometry(100, 100);
const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x808080,side: THREE.DoubleSide
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -2.5;
ground.receiveShadow = true;
scene.add(ground);// 添加光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

5. 实现控制系统

添加键盘控制和动画循环：

const keyStates = {};document.addEventListener('keydown', (e) => {keyStates[e.key] = true;
});document.addEventListener('keyup', (e) => {keyStates[e.key] = false;
});function animate() {requestAnimationFrame(animate);if(keyStates['ArrowUp']) {robot.walk();robot.moveForward(0.1);}if(keyStates['ArrowLeft']) {robot.turn(0.05);}if(keyStates['ArrowRight']) {robot.turn(-0.05);}camera.position.x = robot.body.position.x;camera.position.z = robot.body.position.z + 10;camera.lookAt(robot.body.position);renderer.render(scene, camera);
}animate();

主要特性

3D 人形机器人模型
基本的行走动画
键盘控制系统
相机跟随
阴影效果
响应式设计

控制方法

↑ 向前移动
← 向左转
→ 向右转

可能的改进方向

添加更多动作（如后退、跳跃）
改进机器人模型细节
添加碰撞检测
添加物理引擎
实现更复杂的动画效果
添加声音效果
增加更多交互控制选项
优化性能

结论

通过这个项目，我们展示了如何使用 Three.js 创建一个基本的 3D 人形机器人仿真系统。虽然这是一个相对简单的实现，但它为更复杂的 3D 网页应用提供了良好的起点。

完整代码

<!DOCTYPE html>
<html>
<head><title>3D Robot Simulation</title><style>body { margin: 0; overflow: hidden;}canvas { display: block; }#info {position: absolute;top: 10px;left: 10px;color: white;font-family: Arial;font-size: 14px;background: rgba(0,0,0,0.5);padding: 10px;}</style>
</head>
<body><div id="info">使用方向键控制机器人:<br>↑ - 向前移动<br>← → - 左右转向</div><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>// 初始化场景、相机和渲染器const scene = new THREE.Scene();scene.background = new THREE.Color(0x87CEEB); // 天空蓝色背景const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMap.enabled = true;document.body.appendChild(renderer.domElement);// 创建机器人类class Robot {constructor() {// 机器人主体this.body = new THREE.Group();// 躯干const torsoGeometry = new THREE.BoxGeometry(2, 3, 1);const torsoMaterial = new THREE.MeshPhongMaterial({color: 0x999999});this.torso = new THREE.Mesh(torsoGeometry, torsoMaterial);this.torso.castShadow = true;// 头部const headGeometry = new THREE.SphereGeometry(0.5);const headMaterial = new THREE.MeshPhongMaterial({color: 0xcccccc});this.head = new THREE.Mesh(headGeometry, headMaterial);this.head.position.y = 2;this.head.castShadow = true;// 眼睛const eyeGeometry = new THREE.SphereGeometry(0.1);const eyeMaterial = new THREE.MeshPhongMaterial({color: 0x000000});this.leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);this.rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);this.leftEye.position.set(-0.2, 2, 0.4);this.rightEye.position.set(0.2, 2, 0.4);// 手臂this.leftArm = this.createLimb(0.3, 2);this.leftArm.position.set(-1.2, 1, 0);this.rightArm = this.createLimb(0.3, 2);this.rightArm.position.set(1.2, 1, 0);// 腿部this.leftLeg = this.createLimb(0.4, 2);this.leftLeg.position.set(-0.6, -1.5, 0);this.rightLeg = this.createLimb(0.4, 2);this.rightLeg.position.set(0.6, -1.5, 0);// 组装机器人this.body.add(this.torso);this.body.add(this.head);this.body.add(this.leftEye);this.body.add(this.rightEye);this.body.add(this.leftArm);this.body.add(this.rightArm);this.body.add(this.leftLeg);this.body.add(this.rightLeg);}createLimb(width, height) {const geometry = new THREE.BoxGeometry(width, height, width);const material = new THREE.MeshPhongMaterial({color: 0x999999});const limb = new THREE.Mesh(geometry, material);limb.castShadow = true;return limb;}walk() {// 腿部摆动const legRotation = Math.sin(Date.now() * 0.005) * 0.5;this.leftLeg.rotation.x = legRotation;this.rightLeg.rotation.x = -legRotation;// 手臂摆动const armRotation = Math.sin(Date.now() * 0.005) * 0.25;this.leftArm.rotation.x = -armRotation;this.rightArm.rotation.x = armRotation;}turn(angle) {this.body.rotation.y += angle;}moveForward(speed) {this.body.position.x += Math.sin(this.body.rotation.y) * speed;this.body.position.z += Math.cos(this.body.rotation.y) * speed;}}// 创建地面const groundGeometry = new THREE.PlaneGeometry(100, 100);const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x808080,side: THREE.DoubleSide});const ground = new THREE.Mesh(groundGeometry, groundMaterial);ground.rotation.x = -Math.PI / 2;ground.position.y = -2.5;ground.receiveShadow = true;scene.add(ground);// 创建机器人实例const robot = new Robot();scene.add(robot.body);// 添加光源const directionalLight = new THREE.DirectionalLight(0xffffff, 1);directionalLight.position.set(5, 10, 5);directionalLight.castShadow = true;directionalLight.shadow.camera.near = 0.1;directionalLight.shadow.camera.far = 100;directionalLight.shadow.camera.left = -50;directionalLight.shadow.camera.right = 50;directionalLight.shadow.camera.top = 50;directionalLight.shadow.camera.bottom = -50;scene.add(directionalLight);const ambientLight = new THREE.AmbientLight(0x404040);scene.add(ambientLight);// 设置相机位置camera.position.set(0, 5, 10);camera.lookAt(robot.body.position);// 键盘状态const keyStates = {};// 键盘事件监听document.addEventListener('keydown', (e) => {keyStates[e.key] = true;});document.addEventListener('keyup', (e) => {keyStates[e.key] = false;});// 窗口大小调整window.addEventListener('resize', onWindowResize, false);function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}// 动画循环function animate() {requestAnimationFrame(animate);// 更新机器人动作if(keyStates['ArrowUp']) {robot.walk();robot.moveForward(0.1);}if(keyStates['ArrowLeft']) {robot.turn(0.05);}if(keyStates['ArrowRight']) {robot.turn(-0.05);}// 相机跟随camera.position.x = robot.body.position.x;camera.position.z = robot.body.position.z + 10;camera.lookAt(robot.body.position);renderer.render(scene, camera);}animate();</script>
</body>
</html>

使用 Three.js 创建一个 3D 人形机器人仿真系统

引言在这篇文章中，我们将探讨如何使用 Three.js 创建一个简单但有趣的 3D 人形机器人仿真系统。这个机器人可以通过键盘控制进行行走和转向，并具有基本的动画效果。技术栈 HTML5Three.jsJavaScript 实现步骤 1. 基础设置首先，我们需要…...

编程日记 2024/12/27 14:19:52

图像修复和编辑大一统 | 腾讯北大等联合提出BrushEdit：BrushNet进阶版来了

文章链接：https://arxiv.org/pdf/2412.10316 项目链接：https://liyaowei-stu.github.io/project/BrushEdit 亮点直击提出了BrushEdit，这是先前BrushNet模型的高级迭代版本。BrushEdit通过开创基于修复（inpainting）的图…...

编程日记 2024/12/27 14:18:46

【hackmyvm】Adroit靶机wp

tags: HMVjava反编译SQL注入 1. 基本信息^toc 文章目录 1. 基本信息^toc2. 信息收集3. java反编译4. sql注入5. 解密密码6. 提权靶机链接 https://hackmyvm.eu/machines/machine.php?vmAdroit 作者 alienum 难度 ⭐️⭐️⭐️⭐️️ 2. 信息收集 ┌──(root㉿kali)-[~] └…...

编程日记 2024/12/27 14:13:40

【Python运维】自动化备份与恢复系统的实现：Python脚本实战

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界随着信息化进程的加速，数据的重要性日益增加，数据丢失的风险也随之增加。为了保证数据安全，定期备份和及时恢复数据是必不可少的操作。本…...

编程日记 2024/12/27 14:11:38

Goland 安装与使用

GoLand安装官方网址： JetBrains GoLand：不只是 Go IDE 1. 进入官网，点击下载： 2. 如下图一步步安装 3. 如下图一步步安装...

编程日记 2024/12/27 14:04:32

vue2 升级为 vite 打包

VUE2 中使用 Webpack 打包、开发，每次打包时间太久，尤其是在开发的过程中，本文记录一下 VUE2 升级Vite 步骤。安装 Vue2 Vite 依赖 dev 依赖 vitejs/plugin-vue2": "^2.3.3 vitejs/plugin-vue2-jsx": "^1.1.1 vite&…...

编程日记 2024/12/27 14:01:24

FreeSwitch中启用WebRTC

在FreeSwitch中启用WebRTC需要进行一系列配置。以下是详细的步骤： 1. 安装必要的依赖： 确保安装了支持WebRTC的依赖库，如libsrtp。 2. 配置SIP Profile： 编辑 conf/sip_profiles/internal.xml 文件，添加或修改以下内…...

编程日记 2024/12/27 14:00:21

R语言的数据类型

标题：《探索R语言数据类型的奥秘》引言： 在统计学和数据分析的世界里，R语言无疑是一颗璀璨的明星。它以其强大的数据处理能力和丰富的图形展示功能而受到广泛欢迎。然而，要熟练掌握并高效使用R语言，深入了解其数据类…...

编程日记 2024/12/27 13:59:20

基于UNET的图像分类

网络架构 UNet网络是一种革命性的图像分割架构，在图像分类任务中同样展现出卓越的性能。其独特的设计巧妙地平衡了全局信息捕捉和精细细节保留的需求，特别适合处理需要高度精确定位的任务。 UNet的核心设计理念体现在其对称的编码器-解码器结构中。这种结构不仅实现了高效…...

编程日记 2024/12/27 13:58:18

css文字折行以及双端对齐实现方式

使用flex布局后，文字超出容器部分不会自动折行了。实现代码如下： <el-row><el-col :span"24"><span class"label">姓名</span><span class"content">{{name}}</span></el-col>…...

编程日记 2024/12/27 13:57:17

华为云语音交互SIS的使用案例（文字转语音-详细教程）

文章目录题记一、语音交互服务（Speech Interaction Service，简称SIS）二、功能介绍1、实时语音识别2、一句话识别3、录音文件识别4、语音合成三、约束与限制四、使用1、API2、SDK 五、项目集成1、引入pom依赖2、初始化 Client1）…...

编程日记 2024/12/27 13:56:16

设计一个监控摄像头物联网IOT（webRTC、音视频、文件存储）

前言： 设计一个完整的监控摄像头物联网 IoT 平台涉及视频直播和点播、WebRTC 和文件存储模块，可以分为以下几个主要部分：摄像头设备、服务端处理、Web 前端、视频流存储和回放。以下是结合这些技术的一个具体完整流程设计，涵盖…...

编程日记 2024/12/27 13:50:10

学习笔记（prism--视频【WPF-prism核心教程】）--待更新

《一》框架介绍 prism是一个用于WPF…和winUI中构建的松散耦合，可维护和可测试的应用程序框架。帮助WPF开发人员以简化编写，维护和扩展来设计应用程序。优点：遵循特定的约定，可自动将view/ViewModel建立DataContext的关系&#…...

编程日记 2024/12/27 13:49:09

Kafka无锁设计

前言在分布式消息队列系统中，Kafka 的无锁设计是其高吞吐量和高并发的核心优势之一。通过避免锁的竞争，Kafka 能够在高并发和大规模的生产环境中保持高效的性能。为了更好地理解 Kafka 的无锁设计，我们首先对比传统的队列模型，然后探讨 Kafka 如何通过无锁机制优化生产者…...

编程日记 2024/12/27 13:45:01

【GO基础学习】gin框架路由详解

文章目录 gin框架路由详解（1）go mod tidy（2）r : gin.Default()（3）r.GET()路由注册 （4）r.Run()路由匹配总结 gin框架路由详解先创建一个项目，编写一个简单的demo&#…...

编程日记 2024/12/27 13:41:58

GPIO+TIM(无PWM)实现呼吸灯功能

程序特点： 1、模块化，可快速移植，5分钟便可完成移植。 2、通过GPIO普通定时器，实现呼吸灯功能。 3、PWM周期为5ms，占空比调节时间为20ms，占空比为100等份，即呼吸灯从暗到亮需要20ms*1002s。 …...

编程日记 2024/12/27 13:37:53

贪心算法.

贪心算法是指只从当前角度出发,做出当前情景下最好的选择,在某种意义上来说是局部最优解,并不从全局的角度做决策.如果贪心策略选择不恰当,可能无法得到全局最优解. 贪心算法的基本流程如下: 1.分析问题,确定优化目标,对变量进行初始化 2.制定贪心策略:在制定贪心策略时需要…...

编程日记 2024/12/27 13:34:49

Linux系统和makefile详解

### Linux系统详解 Linux是一个开源且功能强大的操作系统内核，自1991年由林纳斯托瓦兹首次发布以来，它已经成为全球最流行的操作系统之一。Linux的核心特性包括开源、多用户多任务、高稳定性与安全性，以及良好的跨平台能力。 1. **开源**&a…...

编程日记 2024/12/27 13:32:46

GitLab 将停止为中国区用户提供服务，60天迁移期如何应对？ | LeetTalk Daily

“LeetTalk Daily”，每日科技前沿，由LeetTools AI精心筛选，为您带来最新鲜、最具洞察力的科技新闻。 GitLab作为一个广受欢迎的开源代码托管平台，近期宣布将停止服务中国大陆、澳门和香港地区的用户提供服务。根据官方通知&#x…...

编程日记 2024/12/27 13:29:44

【杂谈】-AI搜索引擎如何改变传统SEO及其在内容营销中的作用

AI搜索引擎如何改变传统SEO及其在内容营销中的作用文章目录 AI搜索引擎如何改变传统SEO及其在内容营销中的作用1、什么是AI搜索引擎2、AI搜索引擎对SEO策略的影响3、AI搜索引擎在内容营销转型中的作用4、AI搜索引擎在营销领域的挑战、道德问题和未来5、总结在当今的数字营销世…...

编程日记 2024/12/27 13:28:43

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...

编程新知 2025/11/12 21:38:49

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日来简单学一下子来一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...

编程新知 2025/11/7 21:03:30

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/11/12 19:49:31

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

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

编程新知 2025/11/12 20:40:31

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码注：文档 https://developers.weixin.qq…...

编程新知 2025/11/8 4:39:49

css的定位（position）详解：相对定位绝对定位固定定位

在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...

编程新知 2025/10/22 12:48:44

React---day11

14.4 react-redux第三方库提供connect、thunk之类的函数以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...

编程新知 2025/11/13 8:14:48

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论一、传统路径模型的根本缺陷在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看一个默认的页面，gobuster扫一下目录可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到这…...

编程新知 2025/11/12 16:54:16

引言

技术栈