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)