DevLog250330

DevLog 250330 – First 3D Scene with Three.js

Date: 2025-03-30 Focus: Setting up a basic Three.js environment for the Metaverse Sandbox. The goal was to render a 3D land tile scene in the browser that can later be connected to smart contracts for NFT-based land ownership.

Goal

To initialize a clean and expandable 3D space using Three.js, where land parcels could be visualized, clicked, and eventually tied to wallet-owned NFTs.

Files Created

• index.html
  
• main.js
  
• style.css

Scene Preview

The script renders a flat 10x10 grid of 3D tiles (cubes) on a plane with a basic camera and lighting setup.

Code: main.js

// main.js

import * as THREE from 'three'

// Scene: where all objects live
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xf0f0f0)

// Camera: field of view, aspect ratio, near/far clipping
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.set(0, 20, 20)
camera.lookAt(0, 0, 0)

// Renderer: draws everything
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// Light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6)
scene.add(ambientLight)

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6)
directionalLight.position.set(5, 10, 7.5)
scene.add(directionalLight)

// Grid of cubes (land parcels)
const tileSize = 1
const spacing = 1.5
const tilesX = 10
const tilesZ = 10

const tileGeometry = new THREE.BoxGeometry(tileSize, 0.2, tileSize)
const tileMaterial = new THREE.MeshStandardMaterial({ color: 0x3aa6b9 })

for (let x = 0; x < tilesX; x++) {
  for (let z = 0; z < tilesZ; z++) {
    const tile = new THREE.Mesh(tileGeometry, tileMaterial.clone())
    tile.position.set(
      (x - tilesX / 2) * spacing,
      0,
      (z - tilesZ / 2) * spacing
    )
    scene.add(tile)
  }
}

// Render loop
function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

// Handle window resize
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

Code Explained

Scene & Renderer

• scene is the 3D world container.
• renderer handles drawing the scene to a canvas.

Camera

• A perspective camera mimics human vision.
• Positioned high and angled to see the grid.

Lighting

• Ambient light brightens all objects.
• Directional light simulates sunlight and adds depth/shadows.

Grid of Tiles

• Creates 10x10 cube “parcels.”
• Spaced apart evenly using tileSize and spacing.
• MeshStandardMaterial gives them a colored surface with lighting response.

Animation Loop

• Continuously renders the scene for smooth interactivity.
• Resize handler ensures responsiveness.

How to Run

1. Create a basic HTML/JS/CSS project.
2. Add the Three.js CDN or install with a bundler (npm install three).
3. Link your scripts correctly in index.html.
4. Open index.html in your browser.

Next Steps

• Add raycasting to make each tile clickable.
• Overlay ownership data (owned vs. unowned).
• Connect to wallet using ethers.js or wagmi.
• Load metadata and images from IPFS to decorate owned tiles.

Summary
Today’s work laid the foundation for a 3D land parcel viewer. Three.js will be the visual layer for the Metaverse Sandbox, with NFTs tied to specific tile locations. Next dev session will focus on interactivity and wallet integration.