editor grid

src/components/CharacterView.tsx

@@ -3,7 +3,12 @@ import type { Character } from "../types";
 
 export const CharacterView = observer(function ({ character }: { character: Character }) {
 
-    return <mesh position={character.position} rotation={character.look}>
+    const pos = character.position;
+
+    return <mesh                        
+        position={[pos[0] + 0.5, pos[1] + 0.5, pos[2] + 0.5]}
+        rotation={character.look}
+    >
         <boxGeometry args={[0.8, 0.8, 0.8]} />
         <meshStandardMaterial color="yellow" />
     </mesh >

src/components/ObjectView.tsx

@@ -70,11 +70,12 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
                     const vt = state.world.getVoxelTypeById(v.typeId);
                     const color = (v.color ?? vt?.color) ?? 'white';
                     const opacity = (v.opacity ?? vt?.opacity) ?? 1;
+                    const pos = v.position;
                     return (
                         <mesh
                             key={idx}
                             name={`voxel ${idx} [${v.position}]`}
-                            position={v.position}
+                            position={[pos[0] + 0.5, pos[1] + 0.5, pos[2] + 0.5]}
                         >
                             <boxGeometry args={[1, 1, 1]} />
                             <meshStandardMaterial

src/components/SceneEditorView.tsx

@@ -1,12 +1,12 @@
 import { useLayoutEffect, useRef } from 'react';
 import type React from 'react';
 import { useThree } from '@react-three/fiber';
-import { OrbitControls } from '@react-three/drei';
+import { Grid, OrbitControls } from '@react-three/drei';
 import { observer } from 'mobx-react-lite';
 import { state } from '../state';
 import { SceneView } from './SceneView';
 import type { Pos3 } from '../types/3d';
-import type { OrthographicCamera, PerspectiveCamera } from 'three';
+import { type OrthographicCamera, type PerspectiveCamera } from 'three';
 
 const CameraSync = observer(function ({ camera }: { camera: Pos3 }) {
     const { camera: threeCamera } = useThree();
@@ -62,6 +62,12 @@ export const SceneEditorView = observer(function () {
             enableDamping={false}
         />
         <CameraSync camera={state.worldEditor.camera} />
+        <Grid
+            sectionThickness={0.5}
+            cellThickness={0}
+            sectionColor="white"
+            infiniteGrid
+        />
         <SceneView scene={state.worldEditor.scene} />
     </>);
 });