React-three-fiber场景中基于事件添加多个蒙皮网格模型的求助

嘿，刚入门react-three-fiber遇到这个问题太正常了，我来给你拆解下怎么实现点击按钮添加多个角色的功能，核心就是用React状态来管理角色渲染列表，操作起来很清晰～

步骤1：用React状态维护角色列表 #

首先你需要一个状态数组来存储所有要渲染的角色信息，比如每个角色的唯一ID（避免React渲染警告）、位置这类属性。用useState就能轻松搞定：

import { useState } from 'react';
import { Canvas } from '@react-three/fiber';

function App() {
  // 存储角色数据，每个项包含唯一id和位置
  const [characters, setCharacters] = useState([]);

  // 点击按钮添加新角色的逻辑
  const addCharacter = () => {
    // 生成唯一ID，用时间戳简单实现
    const newCharId = Date.now();
    // 给新角色一个随机位置，你也可以改成固定位置或者自定义输入
    const randomPos = [Math.random() * 4 - 2, 0, Math.random() * 4 - 2];
    // 把新角色加入列表
    setCharacters(prev => [...prev, { id: newCharId, position: randomPos }]);
  };

  return (
    <div>
      <button onClick={addCharacter} style={{ padding: '8px 16px', margin: '10px' }}>添加新角色</button>
      <Canvas camera={{ position: [0, 2, 5] }}>
        {/* 加基础光源让角色显示更清晰 */}
        <ambientLight intensity={0.5} />
        <directionalLight position={[5, 5, 5]} castShadow />
        {/* 遍历角色列表，渲染每个角色 */}
        {characters.map(char => (
          <Character key={char.id} position={char.position} />
        ))}
        {/* 加个地面方便看位置 */}
        <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]}>
          <planeGeometry args={[20, 20]} />
          <meshStandardMaterial color="#f0f0f0" />
        </mesh>
      </Canvas>
    </div>
  );
}

步骤2：封装可复用的蒙皮角色组件 #

把你的蒙皮模型封装成独立的Character组件，这样每次添加角色时直接调用这个组件就行。这里假设你已经用useGLTF加载好了模型：

import { useGLTF, useAnimations } from '@react-three/drei';
import { useEffect } from 'react';

function Character({ position }) {
  const gltf = useGLTF('/你的蒙皮模型路径.glb');
  const { actions } = useAnimations(gltf.animations, gltf.scene);

  // 模型加载完成后播放默认动画，比如 idle
  useEffect(() => {
    actions.idle?.play();
    // 组件卸载时停止动画
    return () => actions.idle?.stop();
  }, [actions]);

  return (
    <group position={position}>
      <primitive object={gltf.scene} scale={0.5} />
    </group>
  );
}

// 预加载模型，避免每次添加角色都重新加载文件，提升性能
useGLTF.preload('/你的蒙皮模型路径.glb');

关键注意事项 #

• 唯一Key：渲染列表时必须给每个Character组件加唯一的key，这里用时间戳生成ID就很方便，能避免React的渲染警告。
• 模型复用：用useGLTF.preload提前加载模型，这样多次添加角色时不会重复请求模型文件，性能会好很多。
• 独立动画：每个Character组件里的useAnimations都是独立的，所以不同角色可以播放不同的动画，互不干扰。

扩展优化（可选） #

如果需要删除角色，你可以给每个角色加删除逻辑，比如：

const removeCharacter = (id) => {
  setCharacters(prev => prev.filter(char => char.id !== id));
};

然后在Character组件外叠加HTML按钮（或者用HTML组件从Canvas内部挂载）来触发删除操作。

内容的提问来源于stack exchange，提问作者Faizan Mustafa

按照这个思路改代码，点击按钮就能不断添加新的蒙皮角色啦，亲测好用～