three js Twarning THREE.PropertyBinding: No target node found for track:

17 views Asked by At

i want to animate my model using react three fiber but my model dont move(i can see it in my scene though) and i get this warning: what should i do ?(my gltf look like that Object {scene: Group, scenes: Array(1), animations: Array(24), cameras: Array(0), asset: {…}, …} pasCurrent 0: Object animations: Array(24) asset: Object cameras: Array(0) parser: Object scene: Object scenes: Array(1) userData: Object proto: Object 1: "pasCurrent" length: 2 proto: Array(0)

    THREE.PropertyBinding: No target node found for track: Head.quaternion. THREE.PropertyBinding: No target node found for track: UpperArmL.quaternion. THREE.PropertyBinding: No target node found for track: LowerArmL.quaternion. THREE.PropertyBinding: No target node found for track: Index2L.quaternion. THREE.PropertyBinding:

please help me it has been a week and i still cant understand

import React, { useRef, useState, useEffect } from 'react';
        import { Canvas, useFrame,useThree } from 'react-three-fiber';
        import { Box } from '@react-three/drei';
        import maBaseDeDonnees from './indexed';
        import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
        import { OrbitControls } from '@react-three/drei';
        import * as THREE from 'three';
        import './DScene.css';
        
        function RotatingBox() {
          const meshRef = useRef();
          const [hovered, setHover] = useState(false);
          const [active, setActive] = useState(false);
          
          useFrame(() => {
            meshRef.current.rotation.x += 0.01;
            meshRef.current.rotation.y += 0.01;
          });
        
          return (
            <Box
              ref={meshRef}
              scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
              onClick={() => setActive(!active)}
              onPointerOver={() => setHover(true)}
              onPointerOut={() => setHover(false)}
            >
              <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
            </Box>
          );
        }
        
        function DScene(id) {
          const [isOpen, setIsOpen] = useState(false);
          const [dropdownChoices, setDropdownChoices] = useState([]);
          const controlsRef = useRef();
          const sceneRef = useRef();
          const [model,setModel]=useState(null);
          const [gltff,setGltff]= useState(null);
          let gg;
        
          const toggleDropdown = () => {
            setIsOpen(!isOpen);
          };
        
          const handleChoiceClick = (choiceValue) => {
            console.log(gg,"pasCurrent")
            const mixer = new THREE.AnimationMixer(gg)
            const action = mixer.clipAction(gg.animations[choiceValue]);
            action.play();
            console.log("Selected choice value: " + choiceValue);
            setIsOpen(false); // Close dropdown after selection if needed
          };
          
          const createDropdownChoices = (numChoices) => {
            const choices = [];
            for (let i = 0; i < numChoices; i++) {
              choices.push(
                <a key={i} onClick={() => handleChoiceClick(i)}>Choice {i}</a>
              );
            }
            setDropdownChoices(choices);
          };
        
          
          const loadID = (id) => {
            console.log(id)
            console.log(id.id.id,"id")
            maBaseDeDonnees.fichiers3D
            .get(id.id.id)
            .then((fichier) => {
              console.log(fichier.fichier,"fichier")
              setModel(fichier.fichier)
              add(fichier.fichier)
              console.log("-----------------------------------")
            })
            .catch((error) => {
              console.error("Erreur lors de la récupération du fichier 3D GLB :", error);
            });
        
          }
          
          
        
          const add = (arrayBuffer) => {
              console.log("added",arrayBuffer)
              const loader = new GLTFLoader();
              const blob = new Blob([arrayBuffer]);
              const url = URL.createObjectURL(blob);
              loader.load(
                url,
                (gltf) => {
                  const loadedModel = gltf.scene;
                  console.log(loadedModel)
                  sceneRef.current.add(loadedModel);
                  if (gltf.animations && gltf.animations.length > 0) {
                      // Afficher le nombre d'animations dans la console
                      console.log("Nombre d'animations : ", gltf.animations.length);
                      console.log("11")
                      gg=gltf
                      createDropdownChoices(gltf.animations.length);
                  } else {
                      console.log("Aucune animation trouvée.");
                  }
                  console.log("heoo")
                })
            
        
          }
          useEffect(()=>{
            loadID(id)
          },[id])
          return (
            <>
              <Canvas camera={{ position: [5, 0, 0], fov: 50 }}
                style={{ position: 'auto', top: 0, left: 0, width: '60%', height: '200%' ,background: "hotpink"}}>
                <scene ref={sceneRef} />
          
                <ambientLight intensity={0.5} />
                <pointLight position={[10, 10, 10]} />
                <OrbitControls/>
              </Canvas>
              <div className="dropdown">
                <button className="dropdown-button" onClick={toggleDropdown}>
                  Open Dropdown
                </button>
                {isOpen && (
                  <div className="dropdown-content">
                    {dropdownChoices}
                  </div>
                )}
              </div>
            </>
          );
        }
        
        export default DScene;

I already tried to change the 3d model(right now i'm using glb model)

0

There are 0 answers