React + three.js 3D模型骨骼绑定

系列文章目录

  1. React 使用 three.js 加载 gltf 3D模型 | three.js 入门
  2. React + three.js 3D模型骨骼绑定
  3. React + three.js 3D模型面部表情控制

项目代码(github):https://github.com/couchette/simple-react-three-skeleton-demo
项目代码(gitcode):https://gitcode.com/qq_41456316/simple-react-three-skeleton-demo.git

文章目录

  • 系列文章目录
  • 前言
  • 一、3D 模型骨骼绑定是什么?
  • 二、为什么选择 React 和 Three.js?
  • 三、如何在 React 中实现 3D 模型骨骼绑定?
  • 四、具体实现步骤
    • 1、创建项目配置环境
    • 2. 创建组件
    • 3. 使用组件
    • 4. 运行项目
  • 结语
      • 程序预览


前言

在当今互联网世界中,网页技术的发展已经超越了以往的想象。其中,三维图形技术在网页中的应用日益普遍,而 React 和 Three.js 正是其中的两个热门选择。本文将介绍如何将 Three.js 中的 3D 模型骨骼绑定示例迁移到 React 中,为读者提供一个简单易懂的入门指南。


一、3D 模型骨骼绑定是什么?

在三维计算机图形学中,骨骼绑定是一种常用的技术,用于将一个三维模型与其骨骼系统相连接。这样的连接使得模型能够进行动画表现,仿佛具有生命一般。通过控制骨骼系统的姿势和运动,可以实现模型的各种动作,比如行走、跳跃、转身等。

二、为什么选择 React 和 Three.js?

React 是一个流行的 JavaScript 库,用于构建用户界面。它的组件化和声明式的特性使得构建交互式 UI 变得更加简单。而 Three.js 则是一个用于创建 3D 图形的 JavaScript 库,它提供了丰富的功能和 API,使得在网页中展示三维模型变得轻而易举。

将这两者结合起来,可以让开发者在 React 的基础上轻松地添加复杂的三维图形功能,为用户提供更加丰富的交互体验。

三、如何在 React 中实现 3D 模型骨骼绑定?

要在 React 中实现 3D 模型骨骼绑定,我们可以借助 Three.js 提供的示例来进行学习和实践。具体地,我们可以参考 Three.js 官方示例中的 webgl_animation_skinning_ik 示例,该示例展示了一个带有骨骼动画的人物模型,并且可以通过鼠标交互来控制模型的运动。

通过将这个示例移植到 React 中,我们可以使得代码更具可维护性和可扩展性,同时也能够让 React 开发者轻松地使用 Three.js 的功能。在移植过程中,我们需要注意将 Three.js 的相关代码封装成 React 组件,并正确处理 React 的生命周期以及状态管理等方面的问题。

四、具体实现步骤

1、创建项目配置环境

使用 create-reacte-app 创建项目

npx create-react-app simple-react-three-skeleton-demo
cd simple-react-three-skeleton-demo

安装three.js

npm i three

2. 创建组件

src目录创建components文件夹,在components文件夹下面创建ThreeContainer.js文件。
首先创建组件,并获取return 元素的ref

import * as THREE from "three";
import { useRef, useEffect } from "react";

function ThreeContainer() {
  const containerRef = useRef(null);
  const isContainerRunning = useRef(false);
  return <div ref={containerRef} />;
}

export default ThreeContainer;

接着将three.js自动创建渲染元素添加到return组件中为子元素(可见containerRef.current.appendChild(renderer.domElement);),相关逻辑代码在useEffect中执行,完整代码内容如下

import * as THREE from "three";

import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { TransformControls } from "three/addons/controls/TransformControls.js";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
import {
  CCDIKSolver,
  CCDIKHelper,
} from "three/addons/animation/CCDIKSolver.js";
import Stats from "three/addons/libs/stats.module.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { useRef, useEffect } from "react";

function ThreeContainer() {
  const containerRef = useRef(null);
  const isContainerRunning = useRef(false);

  useEffect(() => {
    if (!isContainerRunning.current && containerRef.current) {
      isContainerRunning.current = true;
      let scene, camera, renderer, orbitControls, transformControls;
      let mirrorSphereCamera;

      const OOI = {};
      let IKSolver;

      let stats, gui, conf;
      const v0 = new THREE.Vector3();
      init().then(animate);

      async function init() {
        conf = {
          followSphere: false,
          turnHead: true,
          ik_solver: true,
          update: updateIK,
        };

        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0xffffff, 0.17);
        scene.background = new THREE.Color(0xffffff);

        camera = new THREE.PerspectiveCamera(
          55,
          window.innerWidth / window.innerHeight,
          0.001,
          5000
        );
        camera.position.set(
          0.9728517749133652,
          1.1044765132727201,
          0.7316689528482836
        );
        camera.lookAt(scene.position);

        const ambientLight = new THREE.AmbientLight(0xffffff, 8); // soft white light
        scene.add(ambientLight);

        renderer = new THREE.WebGLRenderer({
          antialias: true,
          logarithmicDepthBuffer: true,
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        containerRef.current.appendChild(renderer.domElement);

        stats = new Stats();
        containerRef.current.appendChild(stats.dom);

        orbitControls = new OrbitControls(camera, renderer.domElement);
        orbitControls.minDistance = 0.2;
        orbitControls.maxDistance = 1.5;
        orbitControls.enableDamping = true;

        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath("/draco/");
        // dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
        const gltfLoader = new GLTFLoader();
        gltfLoader.setDRACOLoader(dracoLoader);

        const gltf = await gltfLoader.loadAsync("/models/kira.glb");
        gltf.scene.traverse((n) => {
          if (n.name === "head") OOI.head = n;
          if (n.name === "lowerarm_l") OOI.lowerarm_l = n;
          if (n.name === "Upperarm_l") OOI.Upperarm_l = n;
          if (n.name === "hand_l") OOI.hand_l = n;
          if (n.name === "target_hand_l") OOI.target_hand_l = n;

          if (n.name === "boule") OOI.sphere = n;
          if (n.name === "Kira_Shirt_left") OOI.kira = n;
        });
        scene.add(gltf.scene);

        orbitControls.target.copy(OOI.sphere.position); // orbit controls lookAt the sphere
        OOI.hand_l.attach(OOI.sphere);

        // mirror sphere cube-camera
        const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(1024);
        mirrorSphereCamera = new THREE.CubeCamera(0.05, 50, cubeRenderTarget);
        scene.add(mirrorSphereCamera);
        const mirrorSphereMaterial = new THREE.MeshBasicMaterial({
          envMap: cubeRenderTarget.texture,
        });
        OOI.sphere.material = mirrorSphereMaterial;

        transformControls = new TransformControls(camera, renderer.domElement);
        transformControls.size = 0.75;
        transformControls.showX = false;
        transformControls.space = "world";
        transformControls.attach(OOI.target_hand_l);
        scene.add(transformControls);

        // disable orbitControls while using transformControls
        transformControls.addEventListener(
          "mouseDown",
          () => (orbitControls.enabled = false)
        );
        transformControls.addEventListener(
          "mouseUp",
          () => (orbitControls.enabled = true)
        );

        OOI.kira.add(OOI.kira.skeleton.bones[0]);
        const iks = [
          {
            target: 22, // "target_hand_l"
            effector: 6, // "hand_l"
            links: [
              {
                index: 5, // "lowerarm_l"
                rotationMin: new THREE.Vector3(1.2, -1.8, -0.4),
                rotationMax: new THREE.Vector3(1.7, -1.1, 0.3),
              },
              {
                index: 4, // "Upperarm_l"
                rotationMin: new THREE.Vector3(0.1, -0.7, -1.8),
                rotationMax: new THREE.Vector3(1.1, 0, -1.4),
              },
            ],
          },
        ];
        IKSolver = new CCDIKSolver(OOI.kira, iks);
        const ccdikhelper = new CCDIKHelper(OOI.kira, iks, 0.01);
        scene.add(ccdikhelper);

        gui = new GUI();
        gui.add(conf, "followSphere").name("follow sphere");
        gui.add(conf, "turnHead").name("turn head");
        gui.add(conf, "ik_solver").name("IK auto update");
        gui.add(conf, "update").name("IK manual update()");
        gui.open();

        window.addEventListener("resize", onWindowResize, false);
      }

      function animate() {
        if (OOI.sphere && mirrorSphereCamera) {
          OOI.sphere.visible = false;
          OOI.sphere.getWorldPosition(mirrorSphereCamera.position);
          mirrorSphereCamera.update(renderer, scene);
          OOI.sphere.visible = true;
        }

        if (OOI.sphere && conf.followSphere) {
          // orbitControls follows the sphere
          OOI.sphere.getWorldPosition(v0);
          orbitControls.target.lerp(v0, 0.1);
        }

        if (OOI.head && OOI.sphere && conf.turnHead) {
          // turn head
          OOI.sphere.getWorldPosition(v0);
          OOI.head.lookAt(v0);
          OOI.head.rotation.set(
            OOI.head.rotation.x,
            OOI.head.rotation.y + Math.PI,
            OOI.head.rotation.z
          );
        }

        if (conf.ik_solver) {
          updateIK();
        }

        orbitControls.update();
        renderer.render(scene, camera);

        stats.update(); // fps stats

        requestAnimationFrame(animate);
      }

      function updateIK() {
        if (IKSolver) IKSolver.update();

        scene.traverse(function (object) {
          if (object.isSkinnedMesh) object.computeBoundingSphere();
        });
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }
    }
  }, []);

  return <div ref={containerRef} />;
}

export default ThreeContainer;

3. 使用组件

修改App.js内容如下

import "./App.css";
import ThreeContainer from "./components/ThreeContainer";

function App() {
  return (
    <div>
      <ThreeContainer />
    </div>
  );
}

export default App;

4. 运行项目

运行项目 npm start最终效果如下
请添加图片描述

结语

通过本文的介绍,相信读者对于在 React 中实现 3D 模型骨骼绑定有了初步的了解。如果你对此感兴趣,不妨动手尝试一下,可能会有意想不到的收获。同时,也欢迎大家多多探索,将 React 和 Three.js 的强大功能发挥到极致,为网页应用增添更多的乐趣和惊喜。

程序预览

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

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

相关文章

这几个方面需要注意,减少服务器被入侵

网络时代&#xff0c;服务器和计算机不时地遭受入侵和攻击&#xff0c;给人们带来了无法预料的重大损失。诸如服务器入侵、数据盗窃和勒索软件等事件频繁发生&#xff0c;这令许多企业和游戏开发团队备受困扰。通过总结经验和吸取教训&#xff0c;我们必须汲取教益&#xff0c;…

Linux C应用编程:MQTT物联网

1 MQTT通信协议 MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传 输&#xff09;是一种基于客户端-服务端架构的消息传输协议&#xff0c;如今&#xff0c;MQTT 成为了最受欢迎的物联网协议&#xff0c;已广泛应用于车联网、智能家居、即时聊…

pycharm debug 的时候 waiting for process detach

当你使用pycharm debug或者run的时候&#xff0c;突然出现了点不动&#xff0c;然后一直显示&#xff1a;waiting for process detach 可能是以下问题&#xff1a; 1、需要设置Gevent compatible pycharm一直没显示运行步骤&#xff0c;只是出现waiting for process detach-C…

正则表达式---【Python版】

目录 前言 一.正则表达式概括 1.1简介 1.2使用场景 二.正则表达式语法 2.1基本匹配 2.2元字符 2.2.1点运算符. 2.2.2字符类[] 2.2.3否定字符类 2.2.4*号 2.2.5号 2.2.6&#xff1f;号 2.2.7{}号 2.2.8()号 2.2.9|或运算 2.2.10转码特殊字符\ 2.2.11^和$ 2.3简…

【论文阅读】Digging Into Self-Supervised Monocular Depth Estimation

论文&#xff1a;https://arxiv.org/pdf/1806.01260.pdf 代码&#xff1a;https://github.com/nianticlabs/monodepth2 Q: 这篇论文试图解决什么问题&#xff1f; A: 这篇论文试图解决的问题是如何提高仅使用单目图像进行深度估计的性能。具体来说&#xff0c;它关注的是如何…

Django开发:计划表网页全流程

Hello , 我是"小恒不会java"。考虑到django官网案例的代码对新手不太友好 那我将一个案例从思路到代码都简单完整的摆出来&#xff0c; 使用过django的各位可cv即可&#xff0c;不会django跟着走操作就能跑起来 项目展示 本案例在GitHub已经开源&#xff0c;可在后台…

云HIS医院管理系统源码 SaaS模式 B/S架构 基于云计算技术

一、系统概述 云HIS系统源码是一款满足基层医院各类业务需要的健康云产品。该系统能帮助基层医院完成日常各类业务&#xff0c;提供病患预约挂号支持、收费管理、病患问诊、电子病历、开药发药、住院检查、会员管理、财务管理、统计查询、医生工作站和护士工作站等一系列常规功…

LangChain入门:18.使用ReAct 框架进行生成推理痕迹和任务特定行动来实现更大的协同作用

简介 ReAct对话模型是LangChain框架中的一种重要模型&#xff0c;它可以用于构建智能对话系统。ReAct对话模型的核心思想是使用反应堆&#xff08;Reactor&#xff09;来处理对话中的各种情况&#xff0c;从而实现了对复杂对话场景的解构。 在ReAct对话模型中&#xff0c;反应…

【高端电流检测IC储能产品应用方案】耐压28V侧轨的电流检测芯片FP130A 应用于电脑电源,开关电源以及多口快充充电器,户外移动电源,适配器,电池充电器等

电流检测技术常用于高压短路保护、电机控制、DC/DC换流器、系统功耗管理、二次电池的电流管理、蓄电池管理等电流侦测等场景。对于大多数应用而言&#xff0c;都是间接测量电阻两端的跨压差来获取待测电流。 如下面的高端电流检测芯片FP130A&#xff0c;丝印是FC915。电路原理图…

ASP.NET Core 标识(Identity)框架系列(二):使用标识(Identity)框架生成 JWT Token

前言 JWT&#xff08;JSON Web Token&#xff09;是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;用于在网络上以 JSON 对象的形式安全地传输信息。 JWT 通常用于在用户和服务器之间传递身份验证信息&#xff0c;以便在用户进行跨域访问时进行身份验证。 JWT 由…

Docker 学习笔记(三):Centos7 中 Docker 使用,镜像、容器,以及操作等常用命令小结

一、前言 记录时间 [2024-4-7] 前置文章&#xff1a; Docker学习笔记&#xff08;一&#xff09;&#xff1a;入门篇&#xff0c;Docker概述、基本组成等&#xff0c;对Docker有一个初步的认识 Docker学习笔记&#xff08;二&#xff09;&#xff1a;在Linux中部署Docker&#…

12. Linux中进程间通信

进程间通信(interprocess communication,简称 IPC)指两个进程之间的通信。系统中的每一个进程都有各自的地址空间,并且相互独立、隔离,每个进程都处于自己的地址空间中。所以同一个进程的不同模块(譬如不同的函数)之间进行通信都是很简单的,譬如使用全局变量等。但是,…

MySQL:主键,事件,索引的基础用法(10)

主键 指定某个字段作为主键&#xff0c;这个字段内容无法为空&#xff0c;而且他的内容不能重复作为唯一的标识 主键还有自增和非自增&#xff0c;比如你创建了一个表&#xff0c;你设置了自增&#xff0c;他就会按编号依次自动加一 我创建了一个名为tarro的数据库&#xff…

基于GSP工具箱的NILM算法matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于GSP工具箱的NILM算法matlab仿真。GSP是图形信号处理的缩写&#xff0c;GSP非常适合对未知数据进行分类&#xff0c;尤其是当训练数据非常短时。GSPBox的基本理论是谱图论和…

搜维尔科技:【煤矿安全仿真】煤矿事故预防处置VR系统,矿山顶板灾害,冲击地压灾害等预防演练!

产品概述 煤矿事故预防处置VR系统 系统内容&#xff1a; 事故预防处置VR系统的内容包括&#xff1a;火灾的预防措施、火灾预兆、防灭火系统、火灾案例重现、顶板事故预兆、顶板事故原因、顶板事故案例重现、瓦斯概念及性质、瓦斯的涌出形式、瓦斯预兆、瓦斯爆炸条件及预防措…

GPT中的Transformer架构以及Transformer 中的注意力机制

目录 1 GPT中的Transformer架构 2 transformer中的注意力机制 参考文献&#xff1a; 看了两个比较好的视频&#xff0c;简单做了下笔记。 1 GPT中的Transformer架构 GPT是Generative Pre-trained Transformer单词的缩写&#xff0c;其中transformer是一种特定的神经网络&a…

Harmony鸿蒙南向驱动开发-PIN接口使用

功能简介 PIN即管脚控制器&#xff0c;用于统一管理各SoC的管脚资源&#xff0c;对外提供管脚复用功能&#xff1a;包括管脚推拉方式、管脚推拉强度以及管脚功能。 PIN接口定义了操作PIN管脚的通用方法集合&#xff0c;包括&#xff1a; 获取/释放管脚描述句柄&#xff1a;传…

MATLAB GUI图形化界面设计计算器

MATLAB GUI界面设计教程可以帮助用户创建交互式的图形用户界面&#xff0c;以简化与MATLAB程序的交互过程。以下是一个简化的教程&#xff0c;指导你如何进行MATLAB GUI界面设计&#xff1a; 1. 启动GUIDE或App Designer GUIDE&#xff1a;在MATLAB命令窗口中输入guide命令&a…

微服务demo(四)nacosfeigngateway(2)gatewayspringsercurity

一、思路 1、整体思路 用户通过客户端访问项目时&#xff0c;前端项目会部署在nginx上&#xff0c;加载静态文件时直接从nginx上返回即可。当用户在客户端操作时&#xff0c;需要调用后端的一些服务接口。这些接口会通过Gateway网关&#xff0c;网关进行一定的处理&#xff0…

4.12学习总结·(MySQL学习总结)

1.MySQL对数据库的操作 1.展示所有数据库 show databases; 这种就是将我navicat上的所有数据库调用出来&#xff1b; 2.创建数据库 create database 数据库名; 很明显&#xff0c;我多创建了一个Teacher 的数据库 3.使用某个数据库 use 数据库名 use test1; 切换到test…