Blender + Three.js 动画

Question

所以我给自己买了一个雨伞的 3D 模型，它已经带有打开和关闭它的动画。现在我使用 Three.js 将其导入到我的项目中并播放动画。

使用代码我发现它实际上是两个动画，但两个动画都不是我所期望的，一个只是旋转雨伞，另一个只是上下移动推杆，但不带顶部及其支撑杆。 （就像它在搅拌机中显示的那样）。我想这与搅拌机中这些东西的连接方式有关，遗憾的是我没有搅拌机的经验，所以我问你们。

所以这是我的代码：

import * as React from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Suspense, useState, useRef, useEffect } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls, useGLTF } from '@react-three/drei';
import * as THREE from 'three';

const Model = ({ playAnimation }) => {
const gltf = useGLTF(require("../svg/Part3.glb"));
const mixer = useRef();

// Increase the scale to make the model larger
gltf.scene.scale.set(200, 200, 200);

// Set up animation mixer
if (!mixer.current) {
    mixer.current = new THREE.AnimationMixer(gltf.scene);
    gltf.animations.forEach((animation) => {
        const action = mixer.current.clipAction(animation);
        action.play();
    });
    console.log(gltf.animations)
}

// Update the animation mixer on each frame
useFrame((state, delta) => mixer.current.update(delta));

// Play animation when playAnimation is true
useEffect(() => {
    if (playAnimation) {
        mixer.current.timeScale = 1;
    } else {
        mixer.current.timeScale = 0;
    }
}, [playAnimation]);

return <primitive object={gltf.scene} />;
};

const Umbrella = () => {
const [playAnimation, setPlayAnimation] = useState(false);

const handleButtonClick = () => {
    setPlayAnimation(!playAnimation);
};

return (
    <div>
    <Canvas camera={{ position: [0, 0, 1000], fov: 75, near: 1, far: 5000 }} style={{  backgroundColor:       

    "black", position: "relative", width: "100%", height: "90vh" }}>
            <directionalLight position={[2000, 2000, 2000]} intensity={1} color="white" />
            <pointLight position={[10, 10, 10]} intensity={0.6} />
            <Suspense fallback={null}>
                <Model playAnimation={playAnimation} />
            </Suspense>
            <OrbitControls />
        </Canvas>
        <button onClick={handleButtonClick}>{playAnimation ? 'Pause Animation' : 'Play Animation'}  

  </button>
    </div>
);
};

export default Umbrella;

尽管我很确定它与代码无关。

它应该是这样的：

（之后它就会再次打开）

我想向您提供该文件，但我没有看到这样做的选项，并且我为此文件支付了几欧元，所以我什至不确定它是否合法..

无论如何，也许有人有提示或有用的信息。 `

Answer 1

看起来您正在同时播放所有动画。一次对一个动作调用 action.play() ，看看是否能获得更好的结果