diff --git a/src/js/shared/IK/objects/ObjectRotationControl.js b/src/js/shared/IK/objects/ObjectRotationControl.js index 9e577c469a..05c3d0ef03 100644 --- a/src/js/shared/IK/objects/ObjectRotationControl.js +++ b/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); diff --git a/src/js/shot-generator/SceneManagerR3fLarge.js b/src/js/shot-generator/SceneManagerR3fLarge.js index 9a55feda32..41e6093068 100644 --- a/src/js/shot-generator/SceneManagerR3fLarge.js +++ b/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 ({ - selectionsCount: getSelections(state).length - }) -)(({ selectionsCount }) => { - return
Selected {selectionsCount} items
+ 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 ( + +
+
Selected {selectionsCount} items
+ + + + +
+
+ ) }) export default MultiSelectionInspector diff --git a/src/js/shot-generator/components/Three/Character.js b/src/js/shot-generator/components/Three/Character.js index 70133103c4..55d28d7011 100644 --- a/src/js/shot-generator/components/Three/Character.js +++ b/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 diff --git a/src/js/shot-generator/components/Three/Group.js b/src/js/shot-generator/components/Three/Group.js index da6d98ccf3..8157d9589e 100644 --- a/src/js/shot-generator/components/Three/Group.js +++ b/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 { - 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 ( value.uuid === objectId) target = characters[0] diff --git a/src/js/shot-generator/components/Three/Light.js b/src/js/shot-generator/components/Three/Light.js index 8fb9aed049..0b64629793 100644 --- a/src/js/shot-generator/components/Three/Light.js +++ b/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) diff --git a/src/js/shot-generator/components/Three/ModelObject.js b/src/js/shot-generator/components/Three/ModelObject.js index 24202611a2..f8f9be17d0 100644 --- a/src/js/shot-generator/components/Three/ModelObject.js +++ b/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