A 3D Watermelon Built with Three.js and Procedural Canvas Textures

Procedural Canvas textures sidestep asset pipelines for small 3D web scenes, keeping the bundle light and every visual parameter tweakable in code. The iteration log — removing a slice, killing fog, tuning a radial gradient — is a concrete map of how to turn a generic 3D model into a specific, convincing object.

A single interactive 3D watermelon scene, built with Three.js and Vite, renders a ripe, chilled half-melon without any external texture files. The rind's irregular stripes and the flesh's radial gradient are both generated at runtime on HTML Canvas elements and mapped onto the geometry as CanvasTextures. The scene supports mouse and touch drag rotation, a subtle auto-rotate idle state, and an optional ambient soundscape triggered by a button.

The most instructive part of the build was the iterative refinement away from an uncanny first draft. An extra slice was removed because it distracted from the main subject. The rind was rebuilt to replace uniform stripes with procedurally varied widths, curves, and shades. Flesh colors were adjusted through several radial-gradient passes to eliminate a pale, unripe look and a hard plastic-like edge between the red and white. Disabling a scene-wide fog effect that washed out contrast was the final step that made the model read as clean and cold.

This workflow demonstrates that for stylized 3D web pieces, code-generated textures offer more control than downloaded images. The entire visual identity — stripe irregularity, flesh saturation, droplet transparency — stays adjustable in a few lines of JavaScript, and the page loads with zero texture requests.