Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3d] redesign UI #2686

Merged
merged 3 commits into from
Feb 23, 2025
Merged

[3d] redesign UI #2686

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
62af809
[3d] redesign UI
jtydhr88 Feb 23, 2025
851d914
Update locales [skip ci]
invalid-email-address Feb 23, 2025
201ff20
Merge branch 'main' into ui-change
huchenlei Feb 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 33 additions & 9 deletions src/components/load3d/Load3D.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
:cameraType="cameraType"
:showPreview="showPreview"
:backgroundImage="backgroundImage"
:upDirection="upDirection"
:materialMode="materialMode"
@materialModeChange="listenMaterialModeChange"
@backgroundColorChange="listenBackgroundColorChange"
@lightIntensityChange="listenLightIntensityChange"
Expand All @@ -18,6 +20,7 @@
@showGridChange="listenShowGridChange"
@showPreviewChange="listenShowPreviewChange"
@backgroundImageChange="listenBackgroundImageChange"
@upDirectionChange="listenUpDirectionChange"
/>
<Load3DControls
:backgroundColor="backgroundColor"
Expand All @@ -30,13 +33,17 @@
:showPreviewButton="showPreviewButton"
:cameraType="cameraType"
:hasBackgroundImage="hasBackgroundImage"
:upDirection="upDirection"
:materialMode="materialMode"
@updateBackgroundImage="handleBackgroundImageUpdate"
@switchCamera="switchCamera"
@toggleGrid="toggleGrid"
@updateBackgroundColor="handleBackgroundColorChange"
@updateLightIntensity="handleUpdateLightIntensity"
@togglePreview="togglePreview"
@updateFOV="handleUpdateFOV"
@updateUpDirection="handleUpdateUpDirection"
@updateMaterialMode="handleUpdateMaterialMode"
/>
</div>
</template>
Expand All @@ -47,6 +54,11 @@ import { computed, ref } from 'vue'
import Load3DControls from '@/components/load3d/Load3DControls.vue'
import Load3DScene from '@/components/load3d/Load3DScene.vue'
import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
import {
CameraType,
MaterialMode,
UpDirection
} from '@/extensions/core/load3d/interfaces'

const props = defineProps<{
node: any
Expand All @@ -61,9 +73,11 @@ const lightIntensity = ref(5)
const showLightIntensityButton = ref(true)
const fov = ref(75)
const showFOVButton = ref(true)
const cameraType = ref<'perspective' | 'orthographic'>('perspective')
const cameraType = ref<CameraType>('perspective')
const hasBackgroundImage = ref(false)
const backgroundImage = ref('')
const upDirection = ref<UpDirection>('original')
const materialMode = ref<MaterialMode>('original')

const showPreviewButton = computed(() => {
return !props.type.includes('Preview')
Expand Down Expand Up @@ -115,24 +129,34 @@ const handleUpdateFOV = (value: number) => {
node.value.properties['FOV'] = fov.value
}

const materialMode = ref<'original' | 'normal' | 'wireframe' | 'depth'>(
'original'
)

const handleBackgroundColorChange = (value: string) => {
backgroundColor.value = value

node.value.properties['Background Color'] = value
}

const listenMaterialModeChange = (
mode: 'original' | 'normal' | 'wireframe' | 'depth'
) => {
const handleUpdateUpDirection = (value: UpDirection) => {
upDirection.value = value

node.value.properties['Up Direction'] = value
}

const handleUpdateMaterialMode = (value: MaterialMode) => {
materialMode.value = value

node.value.properties['Material Mode'] = value
}

const listenMaterialModeChange = (mode: MaterialMode) => {
materialMode.value = mode

showLightIntensityButton.value = mode === 'original'
}

const listenUpDirectionChange = (value: UpDirection) => {
upDirection.value = value
}

const listenBackgroundColorChange = (value: string) => {
backgroundColor.value = value
}
Expand All @@ -145,7 +169,7 @@ const listenFOVChange = (value: number) => {
fov.value = value
}

const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
const listenCameraTypeChange = (value: CameraType) => {
cameraType.value = value
showFOVButton.value = cameraType.value === 'perspective'
}
Expand Down
42 changes: 33 additions & 9 deletions src/components/load3d/Load3DAnimation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@
:fov="fov"
:cameraType="cameraType"
:showPreview="showPreview"
:materialMode="materialMode"
:showFOVButton="showFOVButton"
:showLightIntensityButton="showLightIntensityButton"
:playing="playing"
:selectedSpeed="selectedSpeed"
:selectedAnimation="selectedAnimation"
:backgroundImage="backgroundImage"
:upDirection="upDirection"
:materialMode="materialMode"
@materialModeChange="listenMaterialModeChange"
@backgroundColorChange="listenBackgroundColorChange"
@lightIntensityChange="listenLightIntensityChange"
Expand All @@ -25,6 +26,7 @@
@showPreviewChange="listenShowPreviewChange"
@backgroundImageChange="listenBackgroundImageChange"
@animationListChange="animationListChange"
@upDirectionChange="listenUpDirectionChange"
/>
<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
<Load3DControls
Expand All @@ -38,13 +40,17 @@
:showPreviewButton="showPreviewButton"
:cameraType="cameraType"
:hasBackgroundImage="hasBackgroundImage"
:upDirection="upDirection"
:materialMode="materialMode"
@updateBackgroundImage="handleBackgroundImageUpdate"
@switchCamera="switchCamera"
@toggleGrid="toggleGrid"
@updateBackgroundColor="handleBackgroundColorChange"
@updateLightIntensity="handleUpdateLightIntensity"
@togglePreview="togglePreview"
@updateFOV="handleUpdateFOV"
@updateUpDirection="handleUpdateUpDirection"
@updateMaterialMode="handleUpdateMaterialMode"
/>
<Load3DAnimationControls
:animations="animations"
Expand All @@ -64,7 +70,12 @@ import Load3DAnimationControls from '@/components/load3d/Load3DAnimationControls
import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
import Load3DControls from '@/components/load3d/Load3DControls.vue'
import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
import { AnimationItem } from '@/extensions/core/load3d/interfaces'
import {
AnimationItem,
CameraType,
MaterialMode,
UpDirection
} from '@/extensions/core/load3d/interfaces'

const props = defineProps<{
node: any
Expand Down Expand Up @@ -138,9 +149,20 @@ const handleUpdateFOV = (value: number) => {
node.value.properties['FOV'] = fov.value
}

const materialMode = ref<'original' | 'normal' | 'wireframe' | 'depth'>(
'original'
)
const materialMode = ref<MaterialMode>('original')
const upDirection = ref<UpDirection>('original')

const handleUpdateUpDirection = (value: UpDirection) => {
upDirection.value = value

node.value.properties['Up Direction'] = value
}

const handleUpdateMaterialMode = (value: MaterialMode) => {
materialMode.value = value

node.value.properties['Material Mode'] = value
}

const handleBackgroundColorChange = (value: string) => {
backgroundColor.value = value
Expand All @@ -164,14 +186,16 @@ const animationListChange = (value: any) => {
animations.value = value
}

const listenMaterialModeChange = (
mode: 'original' | 'normal' | 'wireframe' | 'depth'
) => {
const listenMaterialModeChange = (mode: MaterialMode) => {
materialMode.value = mode

showLightIntensityButton.value = mode === 'original'
}

const listenUpDirectionChange = (value: UpDirection) => {
upDirection.value = value
}

const listenBackgroundColorChange = (value: string) => {
backgroundColor.value = value
}
Expand All @@ -184,7 +208,7 @@ const listenFOVChange = (value: number) => {
fov.value = value
}

const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
const listenCameraTypeChange = (value: CameraType) => {
cameraType.value = value

showFOVButton.value = cameraType.value === 'perspective'
Expand Down
33 changes: 27 additions & 6 deletions src/components/load3d/Load3DAnimationScene.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
:showPreview="showPreview"
:extraListeners="animationListeners"
:backgroundImage="backgroundImage"
:upDirection="upDirection"
:materialMode="materialMode"
@materialModeChange="listenMaterialModeChange"
@backgroundColorChange="listenBackgroundColorChange"
@lightIntensityChange="listenLightIntensityChange"
Expand All @@ -24,6 +26,11 @@
import { ref, watch } from 'vue'

import Load3DScene from '@/components/load3d/Load3DScene.vue'
import {
CameraType,
MaterialMode,
UpDirection
} from '@/extensions/core/load3d/interfaces'

const props = defineProps<{
node: any
Expand All @@ -32,9 +39,10 @@ const props = defineProps<{
showGrid: boolean
lightIntensity: number
fov: number
cameraType: 'perspective' | 'orthographic'
cameraType: CameraType
showPreview: boolean
materialMode: 'original' | 'normal' | 'wireframe' | 'depth'
materialMode: MaterialMode
upDirection: UpDirection
showFOVButton: boolean
showLightIntensityButton: boolean
playing: boolean
Expand All @@ -50,6 +58,7 @@ const fov = ref(props.fov)
const lightIntensity = ref(props.lightIntensity)
const cameraType = ref(props.cameraType)
const showGrid = ref(props.showGrid)
const upDirection = ref(props.upDirection)
const materialMode = ref(props.materialMode)
const showFOVButton = ref(props.showFOVButton)
const showLightIntensityButton = ref(props.showLightIntensityButton)
Expand Down Expand Up @@ -90,6 +99,20 @@ watch(
}
)

watch(
() => props.upDirection,
(newValue) => {
upDirection.value = newValue
}
)

watch(
() => props.materialMode,
(newValue) => {
materialMode.value = newValue
}
)

watch(
() => props.showPreview,
(newValue) => {
Expand Down Expand Up @@ -122,9 +145,7 @@ const emit = defineEmits<{
(e: 'animationListChange', animationList: string): void
}>()

const listenMaterialModeChange = (
mode: 'original' | 'normal' | 'wireframe' | 'depth'
) => {
const listenMaterialModeChange = (mode: MaterialMode) => {
materialMode.value = mode

showLightIntensityButton.value = mode === 'original'
Expand All @@ -142,7 +163,7 @@ const listenFOVChange = (value: number) => {
fov.value = value
}

const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
const listenCameraTypeChange = (value: CameraType) => {
cameraType.value = value

showFOVButton.value = cameraType.value === 'perspective'
Expand Down
Loading