add culling modification support

M3-org · Oct 16, 2023 · 5530975 · 5530975
1 parent 69d3830
commit 5530975
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 17 deletions.
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
@@ -32,6 +32,8 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
     templateInfo, 
     manifestSelectionIndex, 
     moveCamera,
+    avatar,
+    setDisplayTraitOption
   } = useContext(SceneContext);
 
   const { isMute } = useContext(AudioContext)
@@ -44,6 +46,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
   } = useContext(SoundContext)
 
   const [cameraFocused, setCameraFocused] = React.useState(false)
+  const [currentVRM, setCurrentVRM] = React.useState(null)
 
   // options are selected by random or start
   useEffect(() => {
@@ -61,6 +64,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
   const selectOption = (option) => {
     !isMute && playSound('optionClick');
     if (option.name === currentTraitName) {
+      setDisplayTraitOption(null);
       if (cameraFocused) {
         moveCamera({ targetY: option.cameraTarget.height, distance: option.cameraTarget.distance})
         setCameraFocused(false)
@@ -69,6 +73,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
         setCameraFocused(true)
       }
       setCurrentTraitName(null)
+      setCurrentVRM(null)
       return
     }
 
@@ -78,6 +83,10 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
     moveCamera({ targetY: option.cameraTarget.height, distance: option.cameraTarget.distance})
     setCurrentOptions(getTraitOptions(option, templateInfo))
     setCurrentTraitName(option.name)
+
+    // for item display
+    setDisplayTraitOption(avatar[option.name]?.traitInfo)
+    setCurrentVRM(avatar[option.name]?.vrm);
   }
 
   return (
@@ -106,7 +115,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
         </div>
       </div>
       <Selector confirmDialog = {confirmDialog} animationManager={animationManager} templateInfo={templateInfo} blinkManager = {blinkManager} lookatManager = {lookatManager} effectManager = {effectManager}/>
-      <TraitInformation/>
+      <TraitInformation currentVRM={currentVRM}/>
     </Fragment>
   )
 }
diff --git a/src/components/Selector.jsx b/src/components/Selector.jsx
@@ -144,6 +144,7 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
       const finalAvatar = {...avatar, ...newAvatar}
       setTimeout(() => {
         if (Object.keys(finalAvatar).length > 0) {
+          console.log(finalAvatar)
           cullHiddenMeshes(finalAvatar)
         }
         !isMute && playSound('characterLoad',300);
@@ -229,7 +230,6 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
   }
   // user selects an option
   const selectTraitOption = (option) => {
-    console.log(option);
     const addOption  = option != null
     if (isLoading) return;
 
@@ -271,7 +271,7 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
       setAvatar(finalAvatar)
     })
 
-    setDisplayTraitOption(option)
+    setDisplayTraitOption(option?.item)
 
     return;
   }

diff --git a/src/components/Slider.jsx b/src/components/Slider.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './Slider.module.css'; // Import CSS for styling
+
+export default function Slider ({ value, min, max, onChange, step, stepBox }) {
+
+  return (
+    <div className={styles["slider-container"]}>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        onChange={onChange}
+        className={styles["slider"]}
+        step ={step}
+      />
+      <input
+        type="number"
+        min="0"
+        max="100"
+        value={value}
+        onChange={onChange}
+        className={styles["input-box"]}
+        step ={stepBox}
+      />
+    </div>
+  );
+};
+
+
diff --git a/src/components/Slider.module.css b/src/components/Slider.module.css
@@ -0,0 +1,29 @@
+.slider-container {
+  display: flex;
+  align-items: center;
+}
+
+.slider {
+  width: 80%; /* Adjust as needed */
+  margin-right: 10px;
+}
+
+.input-box {
+  width: 60px; /* Adjust as needed */
+  height: 20px;
+  color: #5eb086;
+  background-color:rgba(5, 11, 14, 0.5);
+  border: none;
+  font-size: large;
+  font-weight: 700;
+  margin-left: 15px;
+}
+.input-box:focus {
+  outline: none;
+}
+
+.input-box::selection {
+  background-color: #111f17;
+  color: #5eb086;
+}
+
diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
@@ -1,12 +1,52 @@
-import React, { useContext } from "react"
+import React, { useContext, useState, useEffect } from "react"
 import styles from "./TraitInformation.module.css"
 import MenuTitle from "./MenuTitle"
 import { SceneContext } from "../context/SceneContext";
+import Slider from "./Slider";
+import { cullHiddenMeshes } from "../library/utils";
 
-export default function TraitInformation(){
+export default function TraitInformation({currentVRM}){
     const {
-        displayTraitOption
-      } = useContext(SceneContext);
+        displayTraitOption,
+        avatar
+    } = useContext(SceneContext);
+
+    const [cullOutDistance, setCullOutDistance] = useState(0); // set from the values of the trait
+    const [cullInDistance, setCullInDistance] = useState(0);
+    const [cullLayer, setCullLayer] = useState(0);
+
+    useEffect(() => {
+        if (currentVRM != null){
+            setCullLayer(currentVRM?.data?.cullingLayer);
+            setCullOutDistance(currentVRM?.data?.cullingDistance[0]||0);
+            setCullInDistance(currentVRM?.data?.cullingDistance[1]||0);
+        }
+    }, [currentVRM])
+
+
+    const handleCullOutChange = (event) => {
+        setCullOutDistance(event.target.value);
+        if ( currentVRM?.data){
+            currentVRM.data.cullingDistance[0] = event.target.value;
+        }
+        cullHiddenMeshes(avatar);
+    };
+
+    const handleCullInChange = (event) => {
+        setCullInDistance(event.target.value);
+        if ( currentVRM?.data){
+            currentVRM.data.cullingDistance[1] = event.target.value;
+        }
+        cullHiddenMeshes(avatar);
+    };
+
+    const handleCullLayerChange = (event) => {
+        if (currentVRM?.data){
+            setCullLayer(event.target.value);
+            currentVRM.data.cullingLayer = event.target.value;
+            cullHiddenMeshes(avatar);
+        }
+    };
 
     return (
         displayTraitOption != null ? (
@@ -17,33 +57,47 @@ export default function TraitInformation(){
                     Trait ID
                 </div>
                 <div className={styles["traitInfoText"]}>
-                    {displayTraitOption.item?.id}
+                    {displayTraitOption?.id}
                 </div>
                 <div className={styles["traitInfoTitle"]}>
                     Trait Name
                 </div>
                 <div className={styles["traitInfoText"]}>
-                    {displayTraitOption.item?.name}
+                    {displayTraitOption?.name}
                 </div>
                 <div className={styles["traitInfoTitle"]}>
                     Culling Layer
                 </div>
                 <div className={styles["traitInfoText"]}>
-                    {displayTraitOption.item?.cullingLayer || "-"}
+                    {displayTraitOption?.cullingLayer || "-"}
                 </div>
                 <div className={styles["traitInfoTitle"]}>
                     Description
                 </div>
                 <div className={styles["traitInfoText"]}>
-                    {displayTraitOption.item?.description || "A nice " + displayTraitOption.item?.name}
+                    {displayTraitOption?.description || "A nice " + displayTraitOption?.name}
                 </div>
                 <div className={styles["traitInfoTitle"]}>
-                    Culling Distance
+                    Culling Options
                 </div>
                 <div className={styles["traitInfoText"]}>
-                    Out Distance Slider
-                    <br/><br/>
-                    In Distance Slider
+                    Culling Layer
+                        <input
+                            type="number"
+                            min="0"
+                            max="100"
+                            value={cullLayer}
+                            onChange={handleCullLayerChange}
+                            className={styles["input-box"]}
+                            step ={1}
+                        />
+                    <br/>
+                    <br/>
+                    Cull Out Distance
+                    <Slider  value={cullOutDistance} onChange={handleCullOutChange} min={0} max={1} step={0.001}stepBox={0.01}/>
+                    <br/>
+                    Cull In Distance
+                    <Slider  value={cullInDistance} onChange={handleCullInChange}  min={0} max={1} step={0.001}stepBox={0.01}/>
                 </div>
             </div>
         </div>

diff --git a/src/components/TraitInformation.module.css b/src/components/TraitInformation.module.css
@@ -2,7 +2,7 @@
     position: absolute;
     top: 98px;
     right: 50px;
-    height: 400px;
+    height: 500px;
     width: 300px;
     backdrop-filter: blur(22.5px);
     background: rgba(5, 11, 14, 0.5);
@@ -26,4 +26,22 @@
     font-size: 16px;
     word-spacing: 2px;
     margin-bottom: 30px;
-}
+}
+.input-box {
+    width: 60px; /* Adjust as needed */
+    height: 20px;
+    color: #5eb086;
+    background-color:rgba(5, 11, 14, 0.5);
+    border: none;
+    font-size: large;
+    font-weight: 700;
+    margin-left: 15px;
+  }
+  .input-box:focus {
+    outline: none;
+  }
+
+  .input-box::selection {
+    background-color: #111f17;
+    color: #5eb086;
+  }