Development Environment Setup

Sangmin SHIM

October 19, 2025

1. Digest

Four distinct approaches to Three.js development environments showcase different workflows tailored for various development needs and preferences. CDN imports with modern import maps offer immediate Three.js access without build tools or complex setup, perfect for rapid prototyping and learning. Vite emerges as a modern build tool providing lightning-fast development with hot reload capabilities, while Webpack demonstrates traditional yet powerful bundling with comprehensive configuration for production-ready applications.

An advanced Webpack setup extends the configuration with modular JavaScript classes and enhanced project organization, showing enterprise-level development patterns. All approaches successfully create the same fundamental Three.js scene - a rotating cube - while demonstrating vastly different development workflows, from quick prototyping to sophisticated project structures. Essential patterns like proper canvas positioning, responsive design considerations, and the core Three.js rendering pipeline remain consistent across all setups, providing developers with a solid foundation regardless of their chosen development approach.

2. What is the purpose

Multiple pathways to Three.js development provide developers with comprehensive understanding of build tool trade-offs and development approach decisions. Learning encompasses setting up Three.js projects using modern import maps with CDN for rapid prototyping, configuring Vite for fast development with hot module replacement, implementing traditional Webpack bundling with Babel transpilation for broader browser support, and understanding advanced project structures with modular JavaScript classes.

This knowledge enables developers to make informed decisions about their development environment based on project requirements, team preferences, and deployment constraints. These foundational skills ensure students can create and run Three.js applications in their preferred development setup for all subsequent learning.

3. Some code block and its explanation

Example 1: CDN Setup with Import Maps

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
    "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
    "gsap": "https://cdn.skypack.dev/gsap",
    "cannon-es": "https://cdn.jsdelivr.net/npm/[email protected]/dist/cannon-es.js"
  }
}
</script>

This code demonstrates the modern way to use Three.js from CDN without build tools. Import maps allow clean ES module imports while loading libraries directly from CDN. This approach is perfect for learning, prototyping, and simple projects. It includes popular Three.js ecosystem libraries like GSAP for animations and Cannon.js for physics, making it immediately useful for advanced features.

Example 2: Vite Configuration

export default {
	root: 'src/',
	publicDir: 'src/',
	base: './',
	build:
	{
		outDir: '../dist',
		emptyOutDir: true,
		sourcemap: true
	}
}

This Vite configuration shows how to set up a modern build tool for Three.js development. The custom root directory points to 'src/', the build output goes to '../dist', and source maps are enabled for debugging. This setup provides lightning-fast hot module replacement during development and optimized production builds. Vite's native ES module support makes it ideal for modern Three.js development.

Example 3: Webpack Production Optimization

optimization: {
	minimizer: webpackMode === 'production' ? [
		new TerserPlugin({
			terserOptions: {
				compress: {
					drop_console: true
				}
			}
		})
	] : [],
	splitChunks: {
		chunks: 'all'
	}
}

This Webpack configuration demonstrates production-ready optimization for Three.js applications. The Terser plugin removes console.log statements in production builds, reducing file size and improving performance. Code splitting separates vendor libraries from application code, enabling better caching strategies. This setup is essential for deploying Three.js applications to production environments where performance and bundle size matter.

Example 4: Canvas Positioning CSS

body {
	margin: 0;
}
#three-canvas {
	position: absolute;
	left: 0;
	top: 0;
}

This CSS is crucial for Three.js applications as it ensures the canvas fills the entire viewport without scrollbars or margins. The body margin reset prevents default browser spacing, while absolute positioning places the canvas at the exact top-left corner. This pattern is consistent across all setup methods and represents a fundamental requirement for immersive 3D experiences that should fill the entire browser window.