DevLog 250420 – Visual Item Placement

> Log Date: 2025-04-20

Today I documented my plan for laying out a full interactive 3D boutique using Three.js. This devlog covers the first steps of spatial item placement and outlines the gallery concept I'm building.

The gallery will evolve into a stylized metaphysical boutique—a blend of e-commerce, art gallery, and Web3 experience. I’ll be integrating:

Clothes racks for print-on-demand apparel
A card holder rack for selling prints and postcards
Gift shop shelving featuring Etsy listings
A custom cashier desk with checkout interface
Built-in NFT minting wall with interactive smart contract integration

Some assets will be imported from libraries, while others will be modeled and coded by hand. Here’s how I’m setting up item placement and visual layout within the scene.

Step 1: Prepare Your 3D Assets

Use .glb or .gltf formats for best compatibility
Export assets from Blender or download free models from open libraries

Step 2: Plan Object Positions

You can visually determine placement using one of two approaches:

Blender: Move objects in 3D space, press N to view transform values, then copy X/Y/Z
JSFiddle Scene Preview: Use placeholder meshes like BoxGeometry and manually tweak .position.set(x, y, z)

Step 3: Import Items into Your Three.js Scene

// Import a GLB model with GLTFLoader
import { GLTFLoader } from 'https://esm.sh/three@0.158.0/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('models/clothing_rack.glb', function (gltf) {
  const item = gltf.scene;
  item.position.set(2, 0, -3);  // Adjust XYZ for spatial placement
  item.scale.set(1.1, 1.1, 1.1);
  scene.add(item);
});

Step 4: Use Grid and Axis Helpers

These overlays help with positioning and navigation as the gallery grows:

const grid = new THREE.GridHelper(20, 20);
scene.add(grid);

const axes = new THREE.AxesHelper(5);
scene.add(axes);

Quick Tips

X = left/right
Y = up/down
Z = forward/backward
Scale with: item.scale.set(x, y, z)
Rotate with: item.rotation.set(x, y, z)

This devlog will evolve as I begin constructing the boutique. My plan is to work iteratively—using placeholders where needed—and slowly replace each with a textured, animated model optimized for performance. The end goal is a fully interactive VR-ready metaphysical e-commerce space with Web3 integration.

Here's a link to the scene: arynwood.com/gallery3d

And any links you want: Back to Arynwood Blog