[wip] Add support for loading gltf files

public/manifest.json

@@ -4,23 +4,15 @@
       "name": "Anata",
       "description": "Anata",
       "portrait": "./assets/portraitImages/anata.png",
-      "manifest":"./character-assets/anata/manifest.json",
+      "manifest":"./loot-assets/anata/female/manifest.json",
       "icon": "./assets/icons/class-neural-hacker.svg",
       "format": "vrm"
     },
     {
       "name": "Anata Male",
       "description": "Anata Male",
       "portrait": "./assets/portraitImages/anata_male.png",
-      "manifest":"./character-assets/anata_male/manifest.json",
-      "icon": "|",
-      "format": "vrm"
-    },
-    {
-      "name": "Anata Male",
-      "description": "Anata Male",
-      "portrait": "./assets/portraitImages/anata_male.png",
-      "manifest":"./character-assets/test.json",
+      "manifest":"./loot-assets/anata/male/manifest.json",
       "icon": "|",
       "format": "vrm"
     }
@@ -60,25 +52,25 @@
     {
       "name": "T-Pose",
       "description": "T-Pose",
-      "location":"./animations/T-Pose.fbx",
+      "location":"./animations/1_T-Pose.fbx",
       "icon": "|"
     },
     {
-      "name": "Dancing",
-      "description": "Basic Dance Animation",
-      "location":"./animations/Dancing.fbx",
+      "name": "Idle",
+      "description": "Basic Idle Animation",
+      "location":"./animations/2_Idle.fbx",
       "icon": "|"
     },
     {
       "name": "Walking",
       "description": "Basic Walk Animation",
-      "location":"./animations/Walking.fbx",
+      "location":"./animations/3_Walking.fbx",
       "icon": "|"
     },
     {
       "name": "Waving",
       "description": "Basic Waving Animation",
-      "location":"./animations/Waving.fbx",
+      "location":"./animations/4_Waving.fbx",
       "icon": "|"
     }
   ]

src/components/BoneSelector.css

@@ -0,0 +1,51 @@
+.bone-selector {
+  position: absolute;
+  display: flex;
+  justify-content: center; /* Center horizontally */
+  align-items: center;     /* Center vertically */
+  height: 100vh;           /* Full viewport height */
+  width: 100vw;           /* Full viewport height */
+  pointer-events: none;
+  top:-30px;
+}
+
+.character-base {
+  /* position: relative;
+  display: inline-block;
+  width: 300px;
+  height: 600px;
+  display: flex;
+  justify-content: center;
+  text-align: center; */
+  user-select: none;
+
+  height: 70%;
+  position: relative;
+  display: inline-block;
+}
+
+.character-base img {
+  height: 100%;
+  /* width: 100%; */
+}
+
+.bone-dot {
+  pointer-events: auto;
+  user-select: none;
+  position: relative;
+  width: 0px;
+  height: 0px;
+  background-size: cover;
+
+  cursor: pointer;
+}
+
+.bone-dot img {
+  width: 30px;
+  height: 30px;
+  transform: translate(-50%, -50%); /* Center the dot */
+}
+
+.bone-dot-position {
+  position: absolute;
+}

src/components/BoneSelector.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import './BoneSelector.css'; // Import CSS for styling
+import boneDot from "../images/humanoid_option.png"
+import humanoidUI from "../images/humanoid_ui.png"
+
+// Example CharacterBase component
+const CharacterBase = ({}) => {
+  return (
+    <div className="character-base">
+      <img src={humanoidUI}/>
+    </div>
+  );
+};
+
+// Example BoneDot component
+const BoneDot = ({ position, onSelect }) => {
+  return (
+    <div
+        className="bone-dot"
+      style={{ left: `${position.x}px`, top: `${-position.y}px` }}
+      onClick={() => onSelect(position)}>
+       <img 
+            src={boneDot}
+        /> 
+    </div>
+  );
+};
+
+// Example BoneSelector component
+export const BoneSelector = ({onSelect}) => {
+  const [bonePositions, setBonePositions] = useState([
+    { x: 0, y: 10, name:"hips" },
+
+    { x: 0, y: 60, name:"spine" },
+    { x: 0, y: 120, name:"chest" },
+    { x: 0, y: 180, name:"upperChest" },
+    { x: 0, y: 220, name:"neck" },
+    { x: 0, y: 260, name:"head" },
+
+    { x: -40, y: 180, name:"leftShoulder" },
+    { x: 40, y: 180, name:"rightShoulder" },
+
+    { x: -70, y: 160, name:"leftUpperArm" },
+    { x: 70, y: 160, name:"rightUpperArm" },
+
+    { x: -80, y: 80, name:"leftLowerArm" },
+    { x: 80, y: 80, name:"rightLowerArm" },
+
+    { x: -80, y: -20, name:"leftHand" },
+    { x: 80, y: -20, name:"rightHand" },
+
+    { x: -30, y: -20, name:"leftUpperLeg" },
+    { x: 30, y: -20, name:"rightUpperLeg" },
+
+    { x: -22, y: -120, name:"leftLowerLeg" },
+    { x: 20, y: -120, name:"rightLowerLeg" },
+
+    { x: -17, y: -260, name:"leftFoot" },
+    { x: 17, y: -260, name:"rightFoot" },
+    // Add more positions as needed
+  ]);
+
+  const handleSelect = (position) => {
+    console.log('Bone selected at:', position);
+    onSelect(position.name);
+    // Additional logic for selecting a bone can be added here
+  };
+
+  return (
+    <div className="bone-selector">
+      <CharacterBase />
+      <div className="bone-dot-position">
+        {bonePositions.map((pos, index) => (
+            <BoneDot
+            key={index}
+            position={pos}
+            onSelect={handleSelect}
+            />
+        ))}
+      </div>
+    </div>
+  );
+};

src/context/SceneContext.jsx

@@ -120,7 +120,7 @@ export const SceneProvider = (props) => {
         controls.minPolarAngle = 0
         controls.maxPolarAngle = 3.1415
         controls.minDistance = 0.5
-        controls.maxDistance = 10
+        controls.maxDistance = 20
         controls.minAzimuthAngle = Infinity
         controls.maxAzimuthAngle = Infinity
       })

src/library/CharacterManifestData.js

@@ -11,6 +11,7 @@ export class CharacterManifestData{
         exportScale,
         displayScale,
         initialTraits,
+        mainTrait,
         requiredTraits,
         randomTraits,
         colliderTraits,
@@ -35,7 +36,10 @@ export class CharacterManifestData{
       this.displayScale = displayScale || exportScale || 1;
       this.animationPath = getAsArray(animationPath);
 
+
       this.requiredTraits = getAsArray(requiredTraits);
+
+      this.mainTrait = mainTrait || this.requiredTraits[0] || traits[0].trait;
       this.randomTraits = getAsArray(randomTraits);
       this.initialTraits = initialTraits || [...new Set(this.requiredTraits.concat(this.randomTraits))];
       this.colliderTraits = getAsArray(colliderTraits);