-
-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: added selection coloring and an info box for the selected object (…
…#88)
- Loading branch information
Showing
10 changed files
with
116 additions
and
35 deletions.
There are no files selected for viewing
Binary file not shown.
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
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 |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React from 'react'; | ||
import {useObjectInfoStore} from '../../state/objectInfoStore'; | ||
|
||
const ObjectInfoBox = () => { | ||
const {name, faceIndex} = useObjectInfoStore(); | ||
|
||
return ( | ||
<div className="bg-gray-400 bg-opacity-50 rounded p-2 m-2"> | ||
<h2 className={"font-bold"}>Selected Object Info</h2> | ||
<div className="table-row"> | ||
<div className="table-cell w-24">Name:</div> | ||
<div className="table-cell w-48">{name}</div> | ||
</div> | ||
<div className="table-row"> | ||
<div className="table-cell w-24">Face Index:</div> | ||
<div className="table-cell w-48">{faceIndex}</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default ObjectInfoBox; |
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 |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { create } from 'zustand'; | ||
|
||
type ObjectInfoState = { | ||
name: string | null; | ||
setName: (name: string | null) => void; | ||
faceIndex: number | null; | ||
setFaceIndex: (faceIndex: number | null) => void; | ||
show: boolean; | ||
toggle: () => void; | ||
}; | ||
|
||
export const useObjectInfoStore = create<ObjectInfoState>((set) => ({ | ||
name: null, | ||
setName: (name) => set(() => ({ name })), | ||
faceIndex: null, | ||
setFaceIndex: (faceIndex) => set(() => ({ faceIndex })), | ||
show: false, | ||
toggle: () => set((state) => ({ show: !state.show })), | ||
})); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import {useObjectInfoStore} from "../state/objectInfoStore"; | ||
|
||
export function toggle_info_panel() { | ||
useObjectInfoStore.getState().toggle(); | ||
} |
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,41 +1,52 @@ | ||
import {useSelectedObjectStore} from "../state/selectedObjectStore"; | ||
import * as THREE from "three"; | ||
import {ThreeEvent} from "@react-three/fiber"; | ||
import {useObjectInfoStore} from "../state/objectInfoStore"; | ||
|
||
|
||
const selectedMaterial = new THREE.MeshStandardMaterial({color: 'blue', side: THREE.DoubleSide}); | ||
const defaultMaterial = new THREE.MeshStandardMaterial({color: 'white', side: THREE.DoubleSide}); | ||
|
||
|
||
function deselectObject() { | ||
const selectedObject = useSelectedObjectStore.getState().selectedObject; | ||
const originalMaterial = useSelectedObjectStore.getState().originalMaterial; | ||
if (selectedObject) { | ||
selectedObject.material = originalMaterial? originalMaterial : defaultMaterial; | ||
useSelectedObjectStore.getState().setOriginalMaterial(null); | ||
useSelectedObjectStore.getState().setSelectedObject(null); | ||
} | ||
} | ||
|
||
|
||
export function handleMeshSelected(event: ThreeEvent<PointerEvent>) { | ||
event.stopPropagation(); | ||
|
||
const selectedObject = useSelectedObjectStore.getState().selectedObject; | ||
const originalColor = useSelectedObjectStore.getState().originalColor; | ||
const originalMaterial = useSelectedObjectStore.getState().originalMaterial; | ||
const mesh = event.object as THREE.Mesh; | ||
|
||
if (selectedObject !== mesh) { | ||
if (selectedObject) { | ||
(selectedObject.material as THREE.MeshBasicMaterial).color.set(originalColor || 'white'); | ||
selectedObject.material = originalMaterial? originalMaterial : defaultMaterial; | ||
} | ||
|
||
const material = mesh.material as THREE.MeshBasicMaterial; | ||
useSelectedObjectStore.getState().setOriginalColor(material.color); | ||
useSelectedObjectStore.getState().setOriginalMaterial(mesh.material? material : null); | ||
useSelectedObjectStore.getState().setSelectedObject(mesh); | ||
const meshInfo = { | ||
name: mesh.name, | ||
materialName: material.name, | ||
intersectionPoint: event.point, | ||
faceIndex: event.faceIndex || 0, | ||
meshClicked: true, | ||
}; | ||
|
||
console.log('mesh clicked'); | ||
console.log(meshInfo); | ||
console.log(event); | ||
|
||
// Update the object info store | ||
useObjectInfoStore.getState().setName(mesh.name); | ||
useObjectInfoStore.getState().setFaceIndex(event.faceIndex || 0); | ||
|
||
// Create a new material for the selected mesh | ||
mesh.material = selectedMaterial; | ||
} else { | ||
deselectObject(); | ||
} | ||
|
||
} | ||
|
||
export function handleMeshEmptySpace(event: MouseEvent) { | ||
const selectedObject = useSelectedObjectStore.getState().selectedObject; | ||
const originalColor = useSelectedObjectStore.getState().originalColor; | ||
|
||
console.log('click on empty space'); | ||
if (selectedObject) { | ||
console.log(`deselecting object. Reverting to original color ${originalColor}`); | ||
(selectedObject.material as THREE.MeshBasicMaterial).color.set(originalColor || 'white'); | ||
useSelectedObjectStore.getState().setSelectedObject(null); | ||
} | ||
event.stopPropagation(); | ||
deselectObject(); | ||
} |