default voxel colors and transparency fixed

src/components/ObjectView.tsx

@@ -56,10 +56,16 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
             {
                 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 color={(v.color ?? vt?.color) ?? 'white'} opacity={(v.opacity ?? vt?.opacity) ?? 1} />
+                            <meshStandardMaterial
+                                color={color}
+                                opacity={opacity}
+                                transparent={opacity < 1}
+                            />
                             {isSelected && <Edges color="white" lineWidth={3} stencilWrite={false} />}
                         </mesh>
                     );

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: 'c0d0ff',
+    color: '#80a0f0',
 };
 
 const glass: VoxelType = {
     id: 'glass',
     name: 'Glass',
-    opacity: 0.4,
+    opacity: 0.3,
     collidable: true,
-    color: 'f0f8ff',
+    color: '#b0d8e8',
 };
 
 export const DEFAULT_VOXEL_TYPES = {

src/state/world.ts

@@ -25,8 +25,9 @@ export class WorldState {
     public loadMock() {
 
         const objTypeId = 'test1';
-        const voxelTypeId = 'water';
-        const objectId = 'object1';
+        const voxelTypeId = 'glass';
+        const objectId1 = 'object1';
+        const objectId2 = 'object2';
 
         this.data = {
             objectTypes: {
@@ -52,12 +53,18 @@ export class WorldState {
                     look: [0, 0, 0],
                 },
                 objects: {
-                    [objectId]: {
-                        id: objectId,
+                    [objectId1]: {
+                        id: objectId1,
                         typeId: objTypeId,
                         position: [0, 0, 0],
                         rotation: [0, 0, 0],
                     },
+                    [objectId2]: {
+                        id: objectId2,
+                        typeId: objTypeId,
+                        position: [1, 0, 0],
+                        rotation: [0, 0, 0],
+                    },
                 },
             },
             gameRules: {
@@ -67,6 +74,7 @@ export class WorldState {
                 playing: false,
             },
         };
+        this.save();
     }
 
     public load() {