我可以收听由 gltf 动画创建的 gltf 网格的旋转和位置变化吗？答案

【问题标题】：Can I listen to rotation and position changes on gltf meshes created by gltf animation?我可以收听由 gltf 动画创建的 gltf 网格的旋转和位置变化吗？
【发布时间】：2021-12-31 16:33:24
【问题描述】：

我有一个执行关键帧动画的 .glb 对象。我已将此对象导入到我的三个 JS 场景中，一切正常。但我需要动画中发生的网格旋转和位置变化。无论如何，在播放动画（并且它们正在移动）时，它们的属性正在发生变化。这是我的代码：

import React, {
  forwardRef,
  useEffect,
  useRef,
} from "react";
import * as THREE from "three";
import { useFrame } from "@react-three/fiber";
import { useGLTF, useAnimations } from "@react-three/drei";

export default forwardRef(({ ...props }, plane) => {

  const { nodes, materials, animations } = useGLTF("/plane.glb");
  const { actions } = useAnimations(animations, plane);

  const topR = useRef();
 
  useEffect(() => {
    if (plane.current !== null) {
      const { fold } = actions;
      fold.repetitions = 1;
      fold.clampWhenFinished = true;
      fold.play();
    }
  }, [topR.current]);

  useFrame(() => {
    if (actions.fold.isRunning()) {
      if (topR.current) {
        console.log(topR.current.rotation);
        console.log(topR.current.position);
        //THEY DO NOT CHANGE FROM THE ANIMATION
      }
    }
  });

  return (
    <group
      layers={2}
      scale={[8, 8, 8]}
      ref={plane}
      {...props}
      dispose={null}
    >
      <mesh
        name="topR"
        ref={topR}
        layers={2}
        geometry={nodes.topR.geometry}
        material={nodes.topR.material}
        morphTargetDictionary={nodes.topR.morphTargetDictionary}
        morphTargetInfluences={nodes.topR.morphTargetInfluences}
      >
        <meshStandardMaterial
          {...materials}
          metalness={0}
          roughness={0.8}
          side={THREE.DoubleSide}
          shadowSide={THREE.DoubleSide}
        />
      </mesh>
      <mesh
    </group>
  );
});

useGLTF.preload("/plane.glb");

【问题讨论】：

标签： javascript three.js react-three-fiber

【解决方案1】：

试试：

    if (topR.current) {
    console.log(topR.current.camera.rotation);
    console.log(topR.current.camera.position);
    console.log(topR.current);
    }

检查topR.current，您可以看到发生了什么变化以及所有这些。

【讨论】：