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

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

news 2026/4/4 12:35:13

引言

在这篇文章中，我们将探讨如何使用 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

明日方舟游戏资源解析：从数据提取到应用开发的技术实践

明日方舟游戏资源解析：从数据提取到应用开发的技术实践【免费下载链接】ArknightsGameResource 明日方舟客户端素材项目地址: https://gitcode.com/gh_mirrors/ar/ArknightsGameResource 在移动游戏开发领域，获取高质量的游戏资源并进行二次开发…...

编程新知 2026/4/4 12:25:02

谷歌Gemma 4模型深度解析：开源王者来袭，单卡可跑，性能碾压20倍参数量对手

2026年4月2日，谷歌DeepMind悄然发布新一代开源大模型Gemma 4系列，瞬间引爆AI开源社区。作为谷歌迄今为止最智能的开放模型，Gemma 4不仅带来了覆盖手机到数据中心的全场景型号，更以Apache 2.0开源协议彻底放开限制，凭借…...

编程新知 2026/4/4 11:03:42

NEURAL MASK RMBG-2.0技术演进：从RMBG-1.0到ART-ENGINE的架构升级

NEURAL MASK RMBG-2.0技术演进：从RMBG-1.0到ART-ENGINE的架构升级 1. 背景与挑战传统的图像抠图工具在面对复杂场景时往往力不从心。当遇到细微的发丝、半透明物体或者复杂的光影交错时，这些工具要么产生锯齿状的边缘，要么无法准确区分主体…...

编程新知 2026/4/4 9:41:06

OpenClaw备份自动化：Qwen3-4B-Thinking-2507-GPT-5-Codex-Distill-GGUF智能分类归档云端文件

OpenClaw备份自动化：Qwen3-4B-Thinking-2507-GPT-5-Codex-Distill-GGUF智能分类归档云端文件 1. 为什么需要智能文件归档我的电脑桌面常年堆积着各种临时下载的PDF、会议记录、代码片段和截图。每次想找特定文件时，要么靠记忆模糊搜索，要么…...

编程新知 2026/4/4 8:58:43

零售AI开发者必看：Ostrakon-VL-8B终端从部署到任务执行完整指南

零售AI开发者必看：Ostrakon-VL-8B终端从部署到任务执行完整指南 1. 项目概览：像素特工终端 Ostrakon-VL-8B是一款专为零售与餐饮场景优化的多模态大模型，我们将其封装成了一个充满游戏趣味的Web交互终端。与传统工业级UI不同，这…...

编程新知 2026/4/4 6:47:45

OpenClaw备份策略：Qwen3-14B镜像+自动化配置云端同步

OpenClaw备份策略：Qwen3-14B镜像自动化配置云端同步 1. 为什么需要备份OpenClaw系统上周我的主力开发机突然硬盘故障，导致三个月的OpenClaw配置和技能包全部丢失。这种切肤之痛让我意识到：自动化系统越是智能，灾备方案就越要可…...

编程新知 2026/4/4 5:49:08

pinyinjs自定义字典扩展指南：打造专属拼音转换系统

pinyinjs自定义字典扩展指南：打造专属拼音转换系统【免费下载链接】pinyinjs 一个实现汉字与拼音互转的小巧web工具库，演示地址： 项目地址: https://gitcode.com/gh_mirrors/pi/pinyinjs pinyinjs是一个实现汉字与拼音互转的小巧web工…...

编程新知 2026/4/4 4:32:06

TIPI内存管理揭秘：10个技巧优化PHP性能与防止内存泄漏

TIPI内存管理揭秘：10个技巧优化PHP性能与防止内存泄漏【免费下载链接】tipi Thinking In PHP Internals, An open book on PHP Internals 项目地址: https://gitcode.com/gh_mirrors/ti/tipi PHP作为世界上最流行的服务器端脚本语言之一，其内存管…...

编程新知 2026/4/4 4:16:01

OpenClaw+千问3.5-27B创作助手：从大纲到公众号图文全自动生成

OpenClaw千问3.5-27B创作助手：从大纲到公众号图文全自动生成 1. 为什么需要全自动创作助手作为一个技术博主，我每周都要产出2-3篇技术文章。最痛苦的环节不是写作本身，而是那些重复性的准备工作：构思大纲、寻找配图、调整格式、…...

编程新知 2026/4/4 3:13:30

RHCE练习

练习： 1. 在4月份的周一到周三的上午11点执行 0 11 * 4 1-3 2. 每天早上7点到上午11点且每2小时执行一次 0 7-11/2 * * *3. 每天6点执行 0 6 * * * 4. 每周六凌晨4点执行 0 4 * * 65. 每周六凌晨4点05执行 5 4 * * 66. 每天8：40执行 40 8 * * *7. 在每天…...

编程新知 2026/4/4 2:07:08

引言

技术栈