JSON for Object Placement in the Metaverse

Today I’m exploring how to use JSON files inside JavaScript to reduce load time and streamline object placement in a metaverse-style 3D project. This devlog explains where JSON comes from, its role in data-driven design, and when to break logic into new JavaScript modules.

When you're building your own metaverse project, especially something immersive like a metaphysical shop, performance matters. If you're loading too much hard-coded content into your main script, you’ll tank your framerate and delay asset rendering. Enter: .json.

What is JSON?

JSON stands for JavaScript Object Notation. It’s a lightweight data-interchange format that’s easy to read and write. Structurally, it looks like a JavaScript object but is stored as plain text. Browsers and engines parse it quickly and easily.

{
  "name": "Amethyst Crystal",
  "position": [2, 1, -4],
  "price": 18,
  "type": "crystal"
}

That’s an example of a single crystal item inside a crystals.json file. With a well-structured set of JSON files, you can offload object definitions, placement, and UI info while keeping your main JS lean and focused on logic.

Folder Structure for a Metaphysical Shop

/assets/
  /data/
    herbs.json
    crystals.json
    wands.json
    books.json
    art.json
  /textures/
    herb_1.jpg
    crystal_amethyst.jpg
/main.js
/register.js

Each category of item in the shop has its own JSON file. These are used to dynamically populate both the 3D world and the e-commerce layer.

How to Load JSON in JavaScript

In your main JavaScript file, fetch your data using fetch():

// Load crystals into the scene
fetch('./assets/data/crystals.json')
  .then(response => response.json())
  .then(data => {
    data.forEach(item => {
      placeItemInScene(item);
    });
  });

function placeItemInScene(item) {
  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xaa88ff })
  );
  mesh.position.set(...item.position);
  scene.add(mesh);
}

This approach keeps data external and clean. You can even regenerate or edit your inventory without touching your JavaScript logic.

When to Use JavaScript Files Instead

JSON is excellent for static or semi-static data—anything that doesn't involve behavior. But when you need methods, conditions, or real-time logic (e.g., cart totals, sales logic, player interaction), that’s when JavaScript modules come into play.

For example:

// register.js
export function processPurchase(itemId, inventory) {
  const item = inventory.find(i => i.id === itemId);
  if (item && item.price > 0) {
    console.log(`Purchased: ${item.name} for $${item.price}`);
  }
}

JSON Limitations

• No functions or methods allowed—just data
• Everything must be a string, number, array, object, boolean, or null
• Can't reference other files or logic natively
• Needs to be parsed before use in JS

Think of JSON as the blueprint and JavaScript as the contractor. JSON tells you what objects exist, where they go, and how they’re labeled. JavaScript brings them to life and runs the business logic behind the scenes.

Conclusion

If you’re building your own immersive shop in the metaverse—herbs floating in glass jars, crystals glowing, books whispering spells—structure your data in JSON and write modular JS logic to interact with it. This not only improves loading performance, but also gives you better control over expanding your virtual world down the road.

Here’s a link to my live project: arynwood.com/gallery3d

Back to the blog index: Arynwood DevLog