Skip to main content

​
Model Files

Gitlantis uses GLB (GL Transmission Format Binary) models for 3D objects. All models are stored in the /public/models/ directory.

​
Boat Model

Location: /public/models/boat/boat.glb Description: The player’s boat with multiple customizable parts. Model Structure:
  • Object_2 - Walls
  • Object_3 - Floaters (pontoons)
  • Object_5 - Hull
  • Object_9 - Miscellaneous parts
  • Object_10 - Roof
  • Object_12 - Rails
  • Object_15 - Body
Customizable Materials:
  • Walls color
  • Floaters color
  • Hull color
  • Roof color
  • Rails color
  • Body color
Default Scale:
  • Normal view: 0.03
  • Minimap fullscreen: 0.06
Usage: 
import { useGLTF } from '@react-three/drei';
import { BOAT_MODEL_PATH } from '@/browser/config';

const { nodes, materials } = useGLTF(BOAT_MODEL_PATH);
Source: src/browser/components/world/boat/index.tsx:16

​
File Model

Location: /public/models/file/file.glb Description: Represents a file in the 3D world. Default Scale:
  • Normal view: 27
  • Minimap fullscreen: 30
Position:
  • Y offset (normal): 13
  • Y offset (minimap): 20
Features:
  • Single mesh object
  • Appears as a document/paper icon
  • Includes collision detection
  • Rotates to face the boat
  • Floating animation with sine wave
Usage: 
import { useGLTF } from '@react-three/drei';
import { FILE_MODEL_PATH } from '@/browser/config';

const model = useGLTF(FILE_MODEL_PATH);

​
Folder Model

Location: /public/models/folder/folder.glb Description: Represents a folder/directory in the 3D world. Default Scale:
  • Normal view: 7
  • Minimap fullscreen: 9
Position:
  • Y offset: 2.5
Features:
  • Single mesh object
  • Appears as a folder icon
  • Larger than file models
  • Includes collision detection
  • Rotates to face the boat
  • Floating animation with sine wave
Usage: 
import { useGLTF } from '@react-three/drei';
import { FOLDER_MODEL_PATH } from '@/browser/config';

const model = useGLTF(FOLDER_MODEL_PATH);

​
Birds Model

Location: /public/models/birds/birds.glb Description: Decorative birds for the sky (if implemented). Features:
  • Ambient decoration
  • May include animation

​
Model Loading

All models are loaded using @react-three/drei’s useGLTF hook.

​
Browser vs Extension Environment

When running in the browser (demo mode), models are loaded from CloudFront: 
const globalUris = (window as any).__GLOBAL_URIS__ || {
  boat: BOAT_MODEL_PATH,
  file: FILE_MODEL_PATH,
  folder: FOLDER_MODEL_PATH,
};

const { nodes, materials } = useGLTF(
  `${isBrowserEnvironment ? CLOUDFRONT_ROOT_URL : ""}${globalUris.boat}`
);
In the VS Code extension, models are loaded from the local filesystem.

​
Model Optimization

​
Instancing

Files and folders use instancing for performance: 
import { Clone } from '@react-three/drei';

<Clone
  object={model}
  position={instance.position}
  scale={27}
/>

​
Geometry Sharing

The ocean uses shared geometry for all tiles: 
const planeGeometry = new PlaneGeometry(TILE_SIZE, TILE_SIZE);

// Reused across all ocean tiles
tiles.map(tile => (
  <water args={[planeGeometry, sceneConfig]} />
));

​
Texture Assets

​
Water Normals

Location: Referenced by OCEAN_MODEL_PATH config Description: Normal map texture for water surface. Features:
  • Repeating wrapping mode (RepeatWrapping)
  • Used by Water material shader
  • Animated over time for wave effect
Usage: 
import { TextureLoader, RepeatWrapping } from 'three';
import { useLoader } from '@react-three/fiber';

const waterNormals = useLoader(TextureLoader, OCEAN_MODEL_PATH);
waterNormals.wrapS = waterNormals.wrapT = RepeatWrapping;
Source: src/browser/hooks/useOcean/regen/index.ts:17

​
Model File Formats

All 3D models use the GLB format (Binary glTF). Advantages of GLB:
  • Single file containing geometry, materials, textures
  • Efficient binary format
  • Standard format for web 3D
  • Supported by Three.js and React Three Fiber

​
Adding Custom Models

  1. Export your model as GLB from Blender, Maya, or other 3D software
  2. Place the .glb file in /public/models/[model-name]/
  3. Add a constant to src/browser/config/index.ts: 
    export const MY_MODEL_PATH = '/models/my-model/model.glb';
  4. Load using useGLTF: 
    const { nodes, materials } = useGLTF(MY_MODEL_PATH);
  5. Render in your component: 
    <mesh geometry={nodes.MyMesh.geometry} material={materials.MyMaterial} />

Build docs developers (and LLMs) love

Get started for freeTalk to us