src/components/ObjectView.tsx

@@ -4,7 +4,6 @@ import { useEffect, useRef, type RefObject } from "react";
 import type { Group, Mesh } from "three";
 import { Edges, TransformControls } from "@react-three/drei";
 import { state } from "../state";
-import { nextSelectionEditMode } from "../state/worldEditor";
 
 type ObjectViewProps = {
     object: ObjectInstance;
@@ -19,9 +18,6 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
         return null;
     const isSelected = state.worldEditor.isEnabled &&
         state.worldEditor.selectedObjectId === object.id;
-    const selectionMode = isSelected
-        ? state.worldEditor.selectedObjectMode
-        : undefined;
 
     useEffect(() => {
         if (!isSelected)
@@ -42,7 +38,7 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
             return;
         e.stopPropagation();
 
-        state.worldEditor.setSelectedObject(object.id, nextSelectionEditMode(selectionMode));
+        state.worldEditor.setSelectedObjectId(object.id);
     };
 
     const handleObjectChange = () => {
@@ -50,43 +46,20 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
         if (!group)
             return;
 
-        state.worldEditor.setObjectTransform(
+        const { x, y, z } = group.position;
-            object.id,
+        state.worldEditor.setObjectPosition(object.id, [x, y, z]);
-            group.position.toArray(),
-            group.rotation.toArray().slice(0, 3), // chop EulerOrder off array
-            group.scale.toArray(),
-        );
     };
 
     return (<>
-        {
+        {(isSelected && groupRef.current) && <TransformControls object={groupRef as RefObject<Group>} onChange={handleObjectChange} mode="translate" />}
-            (isSelected && (selectionMode !== undefined) && groupRef.current) &&
+        <group ref={groupRef} position={object.position} rotation={object.rotation} onClick={handleClick}>
-            <TransformControls
-                object={groupRef as RefObject<Group>}
-                onChange={handleObjectChange}
-                mode={selectionMode}
-            />
-        }
-        <group
-            ref={groupRef}
-            position={object.position}
-            rotation={object.rotation}
-            scale={object.scale}
-            onClick={handleClick}
-        >
             {
                 objectType.voxels.map((v, idx) => {
                     const vt = state.world.getVoxelTypeById(v.typeId);
-                    const color = (v.color ?? vt?.color) ?? 'white';
-                    const opacity = (v.opacity ?? vt?.opacity) ?? 1;
                     return (
                         <mesh key={idx} position={v.position}>
                             <boxGeometry args={[1, 1, 1]} />
-                            <meshStandardMaterial
+                            <meshStandardMaterial color={(v.color ?? vt?.color) ?? 'white'} opacity={(v.opacity ?? vt?.opacity) ?? 1} />
-                                color={color}
-                                opacity={opacity}
-                                transparent={opacity < 1}
-                            />
                             {isSelected && <Edges color="white" lineWidth={3} stencilWrite={false} />}
                         </mesh>
                     );

src/components/ThreeView.tsx

@@ -8,7 +8,7 @@ export const ThreeView = observer(function () {
         <div style={{ width: '800px', height: '600px', border: '1px solid #333', borderRadius: '8px', overflow: 'hidden' }}>
             <Canvas
                 camera={state.world.character.camera}
-                onPointerMissed={() => state.worldEditor.resetSelectedObject()}
+                onPointerMissed={() => state.worldEditor.setSelectedObjectId(undefined)}
             >
                 <WorldView />
             </Canvas>

src/model/defaultVoxelTypes.ts

@@ -13,7 +13,7 @@ const dirt: VoxelType = {
     name: 'Dirt',
     opacity: 1,
     collidable: true,
-    color: '#302520',
+    color: '302520',
 };
 
 const water: VoxelType = {
@@ -21,15 +21,15 @@ const water: VoxelType = {
     name: 'Stone',
     opacity: 0.7,
     collidable: false,
-    color: '#80a0f0',
+    color: 'c0d0ff',
 };
 
 const glass: VoxelType = {
     id: 'glass',
     name: 'Glass',
-    opacity: 0.3,
+    opacity: 0.4,
     collidable: true,
-    color: '#b0d8e8',
+    color: 'f0f8ff',
 };
 
 export const DEFAULT_VOXEL_TYPES = {

src/state/root.ts

@@ -19,5 +19,3 @@ export class RootState {
 }
 
 export const state = new RootState();
-
-state.world.load();

src/state/world.ts

@@ -2,8 +2,8 @@ import { makeAutoObservable } from "mobx";
 import { WorldFactory } from "../model/worldFactory";
 import type { ObjectType, RunningGameState, Scene, World } from "../types";
 import { CharacterState } from "./character";
-import type { Pos3 } from "../types/3d";
+import type { Pos3, V3 } from "../types/3d";
-import { clone } from "../utils";
+import { clone, randomId } from "../utils";
 import type { VoxelType } from "../types/voxel";
 import { state } from "./root";
 import { DEFAULT_VOXEL_TYPES } from "../model/defaultVoxelTypes";
@@ -14,19 +14,19 @@ export class WorldState {
     public character = new CharacterState(this);
 
     constructor() {
+        this.load();
         makeAutoObservable(this);
     }
 
     public reset() {
-        state.worldEditor.resetSelectedObject();
         this.data = WorldFactory.create();
     }
 
     public loadMock() {
+
         const objTypeId = 'test1';
-        const voxelTypeId = 'glass';
+        const voxelTypeId = 'water';
-        const objectId1 = 'object1';
+        const objectId = 'object1';
-        const objectId2 = 'object2';
 
         this.data = {
             objectTypes: {
@@ -52,19 +52,11 @@ export class WorldState {
                     look: [0, 0, 0],
                 },
                 objects: {
-                    [objectId1]: {
+                    [objectId]: {
-                        id: objectId1,
+                        id: objectId,
                         typeId: objTypeId,
                         position: [0, 0, 0],
                         rotation: [0, 0, 0],
-                        scale: [1, 1, 1],
-                    },
-                    [objectId2]: {
-                        id: objectId2,
-                        typeId: objTypeId,
-                        position: [1, 0, 0],
-                        rotation: [0, 0, 0],
-                        scale: [1, 1, 1],
                     },
                 },
             },
@@ -75,13 +67,10 @@ export class WorldState {
                 playing: false,
             },
         };
-        state.worldEditor.resetSelectedObject();
-        this.save();
     }
 
     public load() {
         this.data = WorldFactory.load() ?? WorldFactory.create();
-        state.worldEditor.resetSelectedObject();
     }
 
     public save(): void {
@@ -125,7 +114,8 @@ export class WorldState {
                 scene: clone(this.data.initialScene),
             }
         }
-        state.worldEditor.resetSelectedObject();
+
+        state.worldEditor.setSelectedObjectId(undefined);
     }
 
     public pause(): void {

src/state/worldEditor.ts

@@ -3,29 +3,12 @@ import type { WorldState } from "./world";
 import type { ObjectInstance, Scene, World } from "../types";
 import { createObjectInstance } from "../utils/object";
 import { randomId } from "../utils";
-import type { Pos3, R3, V3 } from "../types/3d";
+import type { Pos3, V3 } from "../types/3d";
-
-export const SelectionEditModeEnum = [
-    'translate',
-    'rotate',
-    'scale',
-] as const;
-type SelectionEditModeTuple = typeof SelectionEditModeEnum;
-export type SelectionEditMode = SelectionEditModeTuple[number];
-
-export function nextSelectionEditMode(mode: SelectionEditMode | undefined): SelectionEditMode {
-    if (mode === undefined)
-        return 'translate';
-
-    const idx = SelectionEditModeEnum.indexOf(mode);
-    return SelectionEditModeEnum[(idx + 1) % SelectionEditModeEnum.length];
-}
 
 export class WorldEditorState {
     private readonly world: WorldState;
 
     public selectedObjectId: string | undefined;
-    public selectedObjectMode: SelectionEditMode | undefined;
     public isDragging: boolean = false;
 
     constructor(world: WorldState) {
@@ -42,14 +25,8 @@ export class WorldEditorState {
         this.world.save();
     }
 
-    public setSelectedObject(id: string, mode: SelectionEditMode): void {
+    public setSelectedObjectId(value: string | undefined): void {
-        this.selectedObjectId = id;
+        this.selectedObjectId = value;
-        this.selectedObjectMode = mode;
-    }
-
-    public resetSelectedObject(): void {
-        this.selectedObjectId = undefined;
-        this.selectedObjectMode = undefined;
     }
 
     public setIsDragging(value: boolean): void {
@@ -90,22 +67,13 @@ export class WorldEditorState {
         });
     }
 
-    public setObjectTransform(
+    public setObjectPosition(id: string, pos: V3): void {
-        id: string,
-        position: V3,
-        rotation: R3,
-        scale: V3,
-    ): void {
         const obj = this.scene.objects[id];
         if (!obj)
             return;
 
-        this.mutateObject({
+        obj.position = pos;
-            ...obj,
+        this.mutateObject(obj);
-            position,
-            rotation,
-            scale,
-        });
     }
 
     public addObjectCloneAtRandomPosition(typeId: string): ObjectInstance {

src/types/object.ts

@@ -1,4 +1,3 @@
-import type { R3, V3 } from "./3d";
 import type { Voxel } from "./voxel";
 
 export type ObjectType = {
@@ -10,7 +9,6 @@ export type ObjectType = {
 export type ObjectInstance = {
     id: string;
     typeId: string;
-    position: V3;
+    position: [number, number, number];
-    rotation: R3;
+    rotation: [number, number, number];
-    scale: V3;
 }