Shot-generator group modifications

src/js/shared/IK/objects/ObjectRotationControl.js

@@ -14,18 +14,27 @@ class ObjectRotationControl
         });
         this.object = null;
         this.scene = scene;
-        this.isEnabled = false;
+        this.defaultEnabled = false;
+        this.control.enabled = this.defaultEnabled;
         this.customOnMouseDownAction = null;
         this.customOnMouseUpAction = null;
         this.offsetObject = new THREE.Object3D()
         this.scene.add(this.offsetObject)
         this.offsetObject.userData.type = 'controlTarget'
+        this.control.select = (event) => this.select(event);
     }
 
     set IsEnabled(value) 
     {
-        this.control.enabled = value
+
+        this.control.enabled = value;
+    }
+
+    select(event) {
+        this.IsEnabled = true;
+        this.control.pointerPressedDown(event);
     }
+
     //#region Events
     onMouseDown = event => {
         this.object.isRotated = true;
@@ -36,6 +45,8 @@ class ObjectRotationControl
         this.customOnMouseUpAction && this.customOnMouseUpAction();
         this.updateCharacter && this.updateCharacter(this.object.name, this.object.rotation);
         this.object.isRotated = false;
+        this.control.enabled = this.defaultEnabled;
+
     };
     //#enderegion
 
@@ -64,6 +75,7 @@ class ObjectRotationControl
             this.offsetObject.position.set(0, 0, 0)
         }
         this.control.attach(object);
+        this.offsetObject.visible = true;
         this.object = object;
         this.control.addEventListener("transformMouseDown", this.onMouseDown, false);
         this.control.addEventListener("transformMouseUp", this.onMouseUp, false);
@@ -77,8 +89,8 @@ class ObjectRotationControl
     deselectObject()
     {
         this.control.detach();
+        this.offsetObject.visible = false;
         this.scene.remove(this.control);
-        this.IsEnabled = true;
         this.control.dispose();
         this.object = null;
         this.control.removeEventListener("transformMouseDown", this.onMouseDown);

src/js/shot-generator/SceneManagerR3fLarge.js

@@ -201,7 +201,6 @@ const SceneManagerR3fLarge = connect(
       //#region initialization of objectRotationControl 
       objectRotationControl.current = new ObjectRotationControl(scene.children[0], camera, gl.domElement)
       objectRotationControl.current.control.canSwitch = false
-      objectRotationControl.current.isEnabled = true
       //#endregion
       return () => {
         if(objectRotationControl.current) {
@@ -454,7 +453,7 @@ const SceneManagerR3fLarge = connect(
             let sceneObject = sceneObjects[id]
             return <SimpleErrorBoundary key={ id }>
               <Image
-                imagesPaths={getFilePathForImages(sceneObject, storyboarderFilePath)}
+                imagesPaths={getFilePathForImages(sceneObject, storyboarderFilePath)[0]}
                 sceneObject={ sceneObject }
                 isSelected={ selections.includes(id) }
                 updateObject={ updateObject }
@@ -469,7 +468,7 @@ const SceneManagerR3fLarge = connect(
           return <Group
             key={ sceneObject.id }
             isSelected={ selections.includes(sceneObject.id) }
-            updateObject={ updateObject }
+            updateObjects={ updateObjects }
             withState={ withState }
             objectRotationControl={ objectRotationControl.current }
             { ...sceneObject }

src/js/shot-generator/components/MultiSelectionInspector/index.js

@@ -1,16 +1,34 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
-
+import {formatters, NumberSlider, transforms, textFormatters} from '../NumberSlider'
 import {
-  getSelections
+  getSelections,
+  getSceneObjects,
+  updateObject
 } from '../../../shared/reducers/shot-generator'
 
 const MultiSelectionInspector = connect(
   state => ({
-    selectionsCount: getSelections(state).length
-  })
-)(({ selectionsCount }) => {
-  return <div style={{ padding: "24px 6px" }}>Selected {selectionsCount} items</div>
+    selectionsCount: getSelections(state).length,
+    sceneObject: getSceneObjects(state)[getSelections(state)[0]]
+  }), {
+    updateObject
+  }
+)(({ selectionsCount, sceneObject, updateObject }) => {
+  const setX = (x) => updateObject(sceneObject.id, {x})
+  const setY = (y) => updateObject(sceneObject.id, {y})
+  const setZ = (z) => updateObject(sceneObject.id, {z})
+  return (
+    <React.Fragment>
+      <div className="column" style={{ flex: 1}}>
+        <div style={{ padding: "24px 6px" }}>Selected {selectionsCount} items</div>
+
+        <NumberSlider label="X" value={sceneObject.x} min={-30} max={30} onSetValue={setX} textFormatter={ textFormatters.imperialToMetric }/>
+        <NumberSlider label="Y" value={sceneObject.y} min={-30} max={30} onSetValue={setY} textFormatter={ textFormatters.imperialToMetric }/>
+        <NumberSlider label="Z" value={sceneObject.z} min={-30} max={30} onSetValue={setZ} textFormatter={ textFormatters.imperialToMetric }/>
+      </div>
+    </React.Fragment>
+  )
 })
 
 export default MultiSelectionInspector

src/js/shot-generator/components/Three/Character.js

@@ -376,7 +376,6 @@ const Character = React.memo(({ path, sceneObject, modelSettings, isSelected, se
         highestPoint.z = 0
         props.objectRotationControl.selectObject(ref.current, ref.current.uuid, highestPoint)
         props.objectRotationControl.control.setShownAxis(axis.Y_axis)
-        props.objectRotationControl.IsEnabled = !sceneObject.locked
         //#endregion
       } else { 
         ref.current.remove(BonesHelper.getInstance())
@@ -421,10 +420,6 @@ const Character = React.memo(({ path, sceneObject, modelSettings, isSelected, se
 
     const { x, y, z, visible, rotation, locked } = sceneObject
 
-    useEffect(() => {
-      if(!props.objectRotationControl || !isSelected) return
-      props.objectRotationControl.IsEnabled = !locked
-    }, [locked])
 
     useEffect(() => {
       if(!skeleton) return

src/js/shot-generator/components/Three/Group.js

@@ -4,37 +4,47 @@ import React, { useRef, useEffect, useMemo } from 'react'
 import { batch } from 'react-redux'
 import { useThree } from 'react-three-fiber'
 import { axis } from "../../../shared/IK/utils/TransformControls"
-
+const isNan = (quaternion) => {
+  return isNaN(quaternion.x) || isNaN(quaternion.y) || 
+  isNaN(quaternion.z) || isNaN(quaternion.w) 
+}
 const Group = React.memo(({ id, type, ...props }) => {
   const ref = useRef()
   const { scene } = useThree()
 
+  useEffect(() => {
+    setPosition()
+  }, [])
+
   const children = useMemo(() => {
     return scene.__interaction.filter((object) => props.children.includes(object.userData.id))
   }, [props.children])
 
   const addArrayToObject = (object, array) => {
     for(let i = 0; i < array.length; i++) {
-      object.attach(array[i])
+      let child = array[i]
+      object.attach(child)
     }
   } 
 
   const updateAllChildren = () => {
     props.withState((dispatch, state) => {
       batch(() => {
+        let changes = {}
         for(let i = 0; i < children.length; i++) {
           let child = children[i]
           let state = {}
           let euler = new THREE.Euler()
           switch(child.userData.type) {
             case "character":
-             // let quaternion = child.quaternion.clone().multiply(ref.current.quaternion)
+             let quaternion = child.worldQuaternion()
+             if(isNan(quaternion)) continue
               euler.setFromQuaternion(child.worldQuaternion(), "YXZ")
               state.rotation = euler.y
               break;
               case "image":
               case "object":
-              euler.setFromQuaternion(child.worldQuaternion())
+              euler.setFromQuaternion(child.worldQuaternion(), "YXZ")
               state.rotation = { x : euler.x, y : euler.y, z : euler.z }
               break;
             case "light":
@@ -50,8 +60,7 @@ const Group = React.memo(({ id, type, ...props }) => {
           state.x = position.x 
           state.y = position.z
           state.z = position.y
-
-          dispatch(props.updateObject(child.userData.id, state))
+          changes[child.userData.id] = state
 
           if(child.userData.type === "character") {
             let attachables = scene.__interaction.filter(object => object.userData.bindedId === child.userData.id)
@@ -64,14 +73,14 @@ const Group = React.memo(({ id, type, ...props }) => {
                 matrix.premultiply(attachable.parent.matrixWorld)
                 matrix.decompose(position, quaternion, new THREE.Vector3())
                 let rot = new THREE.Euler().setFromQuaternion(quaternion, 'XYZ')
-                dispatch(props.updateObject(attachable.userData.id, 
-                { 
+                changes[attachable.userData.id] = { 
                     x: position.x, y: position.y, z: position.z,
                     rotation: { x: rot.x, y: rot.y, z: rot.z },
-                }))
+                }
             }
           }
         }   
+        dispatch(props.updateObjects(changes))
       })
     })
   }
@@ -96,7 +105,6 @@ const Group = React.memo(({ id, type, ...props }) => {
       ref.current.updateMatrixWorld(true)
       props.objectRotationControl.setCharacterId(ref.current.uuid)
       props.objectRotationControl.selectObject(ref.current, ref.current.uuid)
-      props.objectRotationControl.IsEnabled = !props.locked
       props.objectRotationControl.customOnMouseDownAction = () => { addArrayToObject(ref.current, children) };
       props.objectRotationControl.customOnMouseUpAction = () => { addArrayToObject(scene.children[0], children) };
       props.objectRotationControl.control.setShownAxis(axis.Y_axis)
@@ -108,6 +116,20 @@ const Group = React.memo(({ id, type, ...props }) => {
     }
   }, [props.isSelected])
 
+  const setPosition = () => {
+    ref.current.position.x = props.x || ref.current.position.x
+    ref.current.position.y = props.z || ref.current.position.y
+    ref.current.position.z = props.y || ref.current.position.z
+  }
+
+  useEffect(() => {
+    if(!ref.current || !children.length ) return
+    addArrayToObject(ref.current, children)
+    setPosition()
+    addArrayToObject(scene.children[0], children)
+    updateAllChildren()
+  }, [props.x, props.y, props.z])
+
   return <group
   ref={ ref }
   userData={{ 

src/js/shot-generator/components/Three/Image.js

@@ -9,8 +9,8 @@ const RoundedBoxGeometry = RoundedBoxGeometryCreator(THREE)
 
 extend({RoundedBoxGeometry})
 
-const Image = React.memo(({ sceneObject, isSelected, imagesPaths, ...props }) => {
-  const {asset: texture} = useAsset(imagesPaths[0] || null)
+const Image = React.memo(({ sceneObject, isSelected, imagePath, ...props }) => {
+  const {asset: texture} = useAsset(imagePath || null)
 
   const aspect = useRef(1)
   const ref = useRef()
@@ -33,7 +33,7 @@ const Image = React.memo(({ sceneObject, isSelected, imagesPaths, ...props }) =>
         material.map = texture
         material.needsUpdate = true
     } 
-  }, [texture, imagesPaths[0]])
+  }, [texture, imagePath])
 
   useEffect(() => {
     material.opacity = sceneObject.opacity
@@ -65,7 +65,6 @@ const Image = React.memo(({ sceneObject, isSelected, imagesPaths, ...props }) =>
         } )})
       props.objectRotationControl.setCharacterId(ref.current.uuid)
       props.objectRotationControl.selectObject(ref.current, ref.current.uuid)
-      props.objectRotationControl.IsEnabled = !sceneObject.locked
       props.objectRotationControl.control.setShownAxis(axis.X_axis | axis.Y_axis | axis.Z_axis)
     } else {
       if(props.objectRotationControl && props.objectRotationControl.isSelected(ref.current)) {
@@ -76,10 +75,6 @@ const Image = React.memo(({ sceneObject, isSelected, imagesPaths, ...props }) =>
 
   const { x, y, z, visible, height, rotation, locked } = sceneObject
 
-  useEffect(() => {
-    if(!props.objectRotationControl || !isSelected) return
-    props.objectRotationControl.IsEnabled = !locked
-  }, [locked])
 
   return (
     <group

src/js/shot-generator/components/Three/InteractionManager.js

@@ -235,6 +235,7 @@ const InteractionManager = connect(
                 let objectId = target.characterId
                 let targetElement = target.object
                 if(!targetElement) return
+                if(!targetElement.userData.locked) target.select(event)
                 if(targetElement.type === "Bone") {
                     let characters = intersectables.current.filter(value => value.uuid === objectId)
                     target = characters[0]

src/js/shot-generator/components/Three/Light.js

@@ -40,7 +40,6 @@ const Light = React.memo(({sceneObject, isSelected, children, show = true,...pro
         } )})
       props.objectRotationControl.setCharacterId(ref.current.uuid)
       props.objectRotationControl.selectObject(ref.current, ref.current.uuid)
-      props.objectRotationControl.IsEnabled = !sceneObject.locked
       props.objectRotationControl.control.setShownAxis(axis.X_axis | axis.Y_axis | axis.Z_axis)
     } else {
       setLightColor(0x8c78f1)

src/js/shot-generator/components/Three/ModelObject.js

@@ -116,7 +116,6 @@ const ModelObject = React.memo(({path, isIcon = false, sceneObject, isSelected,
       props.objectRotationControl.setCharacterId(ref.current.uuid)
       props.objectRotationControl.selectObject(ref.current, ref.current.uuid)
       props.objectRotationControl.control.setShownAxis(axis.X_axis | axis.Y_axis | axis.Z_axis)
-      props.objectRotationControl.IsEnabled = !sceneObject.locked
     }
     else {
       if(props.objectRotationControl && props.objectRotationControl.isSelected(ref.current)) {
@@ -135,11 +134,6 @@ const ModelObject = React.memo(({path, isIcon = false, sceneObject, isSelected,
 
   const { x, y, z, visible, width, height, depth, rotation, locked } = sceneObject
 
-  useEffect(() => {
-    if(!props.objectRotationControl || !isSelected) return
-    props.objectRotationControl.IsEnabled = !locked
-  }, [locked])
-
   return <group
     ref={ref}
 

src/js/xr/src/three/GPUPickers/PickersObjects/XRPickableObjectContainer.js

@@ -89,7 +89,9 @@ class XRPickableObjectContainer extends Pickable
     {
         this.listOfChangedObjects = [];
         this.getMeshes(this.sceneObject, this.listOfChangedObjects, excludingList);
-        return this.listOfChangedObjects.length === 0 ? false : true;
+        let isChanged = this.listOfChangedObjects.length === 0 ? false : true
+        if(this.sceneObject.visible !== this.node.visible) isChanged = true
+        return isChanged; 
     }
 
     getMeshes(object, listOfMeshes, excludingList)
@@ -123,15 +125,20 @@ class XRPickableObjectContainer extends Pickable
             id = this.idPool.getAvaibleId();
             let sceneMesh = this.listOfChangedObjects[i];
             super.initialize(id);
-            this.pickingMaterials.push(this.pickingMaterial);
-            this.pickingMesh = new THREE.Mesh(sceneMesh.geometry, this.pickingMaterial);
+            let pickingMaterial = this.pickingMaterial
+            pickingMaterial.depthTest = sceneMesh.material.depthTest;
+            pickingMaterial.depthWrite = sceneMesh.material.depthWrite;
+            pickingMaterial.transparent = sceneMesh.material.transparent;  
+            this.pickingMaterials.push(pickingMaterial);
+            this.pickingMesh = new THREE.Mesh(sceneMesh.geometry, pickingMaterial);
             this.node.add(this.pickingMesh);
             this.changedIds = [];
             this.pickingMeshes.push(this.pickingMesh);
             this.sceneMeshes.push(sceneMesh);
             this.pickingMesh.pickerId = id;
             this.listOfChangedObjects[i] = {pickingMesh: this.pickingMesh, sceneMesh: sceneMesh};
         }
+        this.node.visible = this.sceneObject.visible; 
     }
 
     dispose()