-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Fix: Refactor to improve ViewCursorWidget performance * CR Feedback * cleanup * Fix from running npm run build Co-authored-by: Emily Dodds <dodemily@amazon.com>
- Loading branch information
Showing
24 changed files
with
214 additions
and
613 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
120 changes: 0 additions & 120 deletions
120
.../scene-composer/src/augmentations/components/three-fiber/common/SvgIconToWidgetVisual.tsx
This file was deleted.
Oops, something went wrong.
110 changes: 48 additions & 62 deletions
110
...es/scene-composer/src/augmentations/components/three-fiber/viewpoint/ViewCursorWidget.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,62 @@ | ||
| import * as THREE from 'three'; | ||
| import React, { useContext, useEffect, useMemo, useRef } from 'react'; | ||
| import { extend, useLoader, useThree } from '@react-three/fiber'; | ||
| import { SVGLoader, SVGResult } from 'three-stdlib'; | ||
| import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react'; | ||
| import { useFrame, useLoader, useThree } from '@react-three/fiber'; | ||
| import { Mesh as THREEMesh, Object3D as THREEObject3D, Vector3 as THREEVector3 } from 'three'; | ||
| import { SVGLoader } from 'three-stdlib'; | ||
|
|
||
| import { ViewCursorMoveIcon, ViewCursorEditIcon } from '../../../../assets'; | ||
| import svgIconToWidgetVisual from '../common/SvgIconToWidgetVisual'; | ||
| import { WidgetVisual } from '../../../three/visuals'; | ||
| import { ViewCursor, Viewpoint, ViewpointState } from '../../../three'; | ||
| import { convertSvgToMesh } from '../../../../utils/svgUtils'; | ||
| import { getIntersectionTransform } from '../../../../utils/raycastUtils'; | ||
| import { sceneComposerIdContext } from '../../../../common/sceneComposerIdContext'; | ||
| import { useEditorState } from '../../../../store'; | ||
| import { ViewCursorEditIcon, ViewCursorMoveIcon } from '../../../../assets'; | ||
|
|
||
| // Adds the custom objects to React Three Fiber | ||
| extend({ ViewCursor, Viewpoint, WidgetVisual }); | ||
|
|
||
| const AsyncLoadViewCursorWidget: React.FC = () => { | ||
| export const ViewCursorWidget = () => { | ||
| const ref = useRef<THREEObject3D>(null); | ||
| const { gl } = useThree(); | ||
| const sceneComposerId = useContext(sceneComposerIdContext); | ||
| const { cursorPosition, cursorLookAt, cursorVisible, cursorStyle } = useEditorState(sceneComposerId); | ||
| const viewCursorRef = useRef<Viewpoint>(null); | ||
| const { camera } = useThree(); | ||
|
|
||
| const moveVisual = useMemo(() => { | ||
| const svgData: SVGResult = useLoader(SVGLoader, ViewCursorMoveIcon.dataUri); | ||
| return svgIconToWidgetVisual(svgData, ViewpointState.Deselected, false, { userData: { isCursor: true } }); | ||
| }, []); | ||
|
|
||
| const editVisual = useMemo(() => { | ||
| const svgData: SVGResult = useLoader(SVGLoader, ViewCursorEditIcon.dataUri); | ||
| return svgIconToWidgetVisual(svgData, ViewpointState.Selected, false, { userData: { isCursor: true } }); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (viewCursorRef.current) { | ||
| viewCursorRef.current.lookAt(cursorLookAt); | ||
| viewCursorRef.current.rotation.z = camera.rotation.z; // Prevent spinning and always be straight up and down | ||
| const { addingWidget, cursorVisible, cursorStyle, setAddingWidget, setCursorVisible, setCursorStyle } = | ||
| useEditorState(sceneComposerId); | ||
| const svg = cursorStyle === 'edit' ? ViewCursorEditIcon : ViewCursorMoveIcon; | ||
| const data = useLoader(SVGLoader, svg.dataUri); | ||
|
|
||
| const esc = useCallback(() => { | ||
| gl.domElement.addEventListener('keyup', (e: KeyboardEvent) => { | ||
| if (e.key === 'Escape' && !!addingWidget) { | ||
| setAddingWidget(undefined); | ||
| } | ||
| }); | ||
| return gl.domElement?.removeEventListener('keyup', setAddingWidget as any); | ||
| }, [addingWidget]); | ||
|
|
||
| const shape = useMemo(() => { | ||
| return convertSvgToMesh(data); | ||
| }, [data]); | ||
|
|
||
| /* istanbul ignore next */ | ||
| useFrame(({ raycaster, scene }) => { | ||
| const sceneMeshes: THREEObject3D[] = []; | ||
| scene.traverse((child) => { | ||
| return shape.id !== child.id && (child as THREEMesh).isMesh && child.type !== 'TransformControlsPlane' | ||
| ? sceneMeshes.push(child as THREEMesh) | ||
| : null; | ||
| }); | ||
| const intersects = raycaster.intersectObjects(sceneMeshes, false); | ||
| if (intersects.length) { | ||
| const n = getIntersectionTransform(intersects[0]); | ||
| shape.lookAt(n.normal as THREEVector3); | ||
| shape.position.copy(n.position); | ||
| } | ||
| }, [cursorLookAt]); | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (viewCursorRef.current) { | ||
| viewCursorRef.current.traverse((child) => { | ||
| const mesh = child as THREE.Mesh; | ||
|
|
||
| if (mesh.material) { | ||
| if (Array.isArray(mesh.material)) { | ||
| mesh.material.forEach((material) => { | ||
| material.depthFunc = THREE.AlwaysDepth; | ||
| }); | ||
| } else { | ||
| (mesh.material as THREE.Material).depthFunc = THREE.AlwaysDepth; | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| }, [viewCursorRef]); | ||
|
|
||
| return ( | ||
| <viewCursor | ||
| ref={viewCursorRef} | ||
| isSelected={cursorStyle === 'edit'} | ||
| position={cursorPosition} | ||
| visible={cursorVisible} | ||
| > | ||
| {moveVisual} | ||
| {editVisual} | ||
| </viewCursor> | ||
| ); | ||
| }; | ||
| setCursorVisible(!!addingWidget); | ||
| setCursorStyle(addingWidget ? 'edit' : 'move'); | ||
| esc(); | ||
| gl.domElement.style.cursor = addingWidget ? 'none' : 'auto'; | ||
| }, [addingWidget]); | ||
|
|
||
| export const ViewCursorWidget: React.FC = () => { | ||
| return ( | ||
| <React.Suspense fallback={null}> | ||
| <AsyncLoadViewCursorWidget /> | ||
| {cursorVisible && <primitive ref={ref} object={shape} name='ViewCursorWidget' />} | ||
| </React.Suspense> | ||
| ); | ||
| }; |
73 changes: 0 additions & 73 deletions
73
packages/scene-composer/src/augmentations/three/Viewpoint.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1 @@ | ||
| export * from './Anchor'; | ||
| export * from './Viewpoint'; |
Oops, something went wrong.