Icicles the Snowman

Okay, I can help you create a 3D snowman scene using Three.js, which runs directly in the browser without needing any downloads. Icicles the Snowman

Not Always

My Name Narnenay

body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #add8e6; /* Light blue background */ font-family: sans-serif; } .container { display: flex; flex-direction: column; align-items: center; } #snowmanCanvas { display: block; width: 80vw; height: 70vh; max-width: 800px; max-height: 600px; background-color: #f0f0f0; /* Canvas background */ border-radius: 8px; } .text-above, .text-below { font-size: 1.5em; font-weight: bold; color: #333; margin: 10px 0; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // --- Scene Setup --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0xadd8e6); // Match body background // --- Camera --- const camera = new THREE.PerspectiveCamera( 75, // Field of view window.innerWidth / window.innerHeight, // Aspect ratio (will be updated) 0.1, // Near clipping plane 1000 // Far clipping plane ); camera.position.z = 10; camera.position.y = 3; // --- Renderer --- const canvas = document.getElementById('snowmanCanvas'); const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.shadowMap.enabled = true; // Enable shadows // Function to handle resizing function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const parent = canvas.parentElement; // Get container element if (!parent) return false; // Exit if no parent // Use parent dimensions for aspect ratio calculation const width = parent.clientWidth * 0.8; // Match CSS width (80vw approx) const height = parent.clientHeight * 0.7; // Match CSS height (70vh approx) // Check if the canvas size needs to be updated const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); // Set size without updating style canvas.style.width = `${width}px`; // Update display style width canvas.style.height = `${height}px`; // Update display style height // Update camera aspect ratio camera.aspect = width / height; camera.updateProjectionMatrix(); } return needResize; } // Initial size setup resizeRendererToDisplaySize(renderer); // --- Controls --- const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Smooth camera movement controls.target.set(0, 1, 0); // Point controls towards the snowman's center // --- Lighting --- const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Soft white light scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; // Configure shadow properties for better quality directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; scene.add(directionalLight); // --- Materials --- const snowMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.8, metalness: 0.1, }); const eyeMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.5, }); const noseMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, // Orange roughness: 0.7, }); const buttonMaterial = new THREE.MeshStandardMaterial({ color: 0x222222, // Dark gray/black roughness: 0.6, }); const armMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513, // Saddle brown roughness: 0.9, }); // --- Snowman Geometry --- const snowmanGroup = new THREE.Group(); snowmanGroup.position.y = -1.5; // Adjust base position // Base const baseRadius = 1.5; const baseGeometry = new THREE.SphereGeometry(baseRadius, 32, 32); const base = new THREE.Mesh(baseGeometry, snowMaterial); base.castShadow = true; base.receiveShadow = true; base.position.y = baseRadius; snowmanGroup.add(base); // Middle const middleRadius = 1; const middleGeometry = new THREE.SphereGeometry(middleRadius, 32, 32); const middle = new THREE.Mesh(middleGeometry, snowMaterial); middle.castShadow = true; middle.receiveShadow = true; middle.position.y = baseRadius * 2 + middleRadius * 0.8; // Stacked slightly overlapping snowmanGroup.add(middle); // Head const headRadius = 0.7; const headGeometry = new THREE.SphereGeometry(headRadius, 32, 32); const head = new THREE.Mesh(headGeometry, snowMaterial); head.castShadow = true; head.receiveShadow = true; head.position.y = middle.position.y + middleRadius + headRadius * 0.8; // Stacked snowmanGroup.add(head); // Eyes const eyeRadius = 0.1; const eyeGeometry = new THREE.SphereGeometry(eyeRadius, 16, 16); const eyeL = new THREE.Mesh(eyeGeometry, eyeMaterial); const eyeR = new THREE.Mesh(eyeGeometry, eyeMaterial); eyeL.position.set(-0.25, head.position.y + 0.1, headRadius - 0.05); eyeR.position.set(0.25, head.position.y + 0.1, headRadius - 0.05); eyeL.castShadow = true; eyeR.castShadow = true; snowmanGroup.add(eyeL); snowmanGroup.add(eyeR); // Nose const noseRadius = 0.1; const noseHeight = 0.5; const noseGeometry = new THREE.ConeGeometry(noseRadius, noseHeight, 16); const nose = new THREE.Mesh(noseGeometry, noseMaterial); nose.castShadow = true; nose.position.set(0, head.position.y, headRadius); nose.rotation.x = Math.PI / 2; // Point forward snowmanGroup.add(nose); // Buttons const buttonRadius = 0.08; const buttonGeometry = new THREE.SphereGeometry(buttonRadius, 16, 16); for (let i = 0; i < 3; i++) { const button = new THREE.Mesh(buttonGeometry, buttonMaterial); button.castShadow = true; button.position.set( 0, middle.position.y + middleRadius * 0.5 - i * 0.4, // Space buttons vertically middleRadius - 0.05 // Place on the front surface ); snowmanGroup.add(button); } // Arms const armLength = 1.5; const armRadius = 0.08; const armGeometry = new THREE.CylinderGeometry(armRadius, armRadius * 0.8, armLength, 16); const armL = new THREE.Mesh(armGeometry, armMaterial); armL.castShadow = true; armL.position.set(-middleRadius + 0.1, middle.position.y + 0.2, 0); armL.rotation.z = Math.PI / 3; // Angle upwards armL.rotation.y = -Math.PI / 12; // Angle slightly forward snowmanGroup.add(armL); const armR = new THREE.Mesh(armGeometry, armMaterial); armR.castShadow = true; armR.position.set(middleRadius - 0.1, middle.position.y + 0.2, 0); armR.rotation.z = -Math.PI / 3; // Angle upwards armR.rotation.y = Math.PI / 12; // Angle slightly forward snowmanGroup.add(armR); scene.add(snowmanGroup); // --- Ground Plane --- const groundGeometry = new THREE.PlaneGeometry(20, 20); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xeeeeee, // Light gray ground roughness: 1, metalness: 0, }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; // Rotate to be horizontal ground.position.y = 0; // Position at the base ground.receiveShadow = true; // Allow ground to receive shadows scene.add(ground); // --- Animation Loop --- function animate() { requestAnimationFrame(animate); // Handle window resize dynamically resizeRendererToDisplaySize(renderer); controls.update(); // Required if enableDamping is true // Optional: Add subtle animation // snowmanGroup.rotation.y += 0.005; renderer.render(scene, camera); } // --- Start Animation --- animate(); // --- Handle Window Resize Event --- window.addEventListener('resize', () => { // No need to explicitly call resizeRendererToDisplaySize here // as it's handled within the animation loop. // However, we might need to update the initial aspect ratio calculation // if the initial render is significantly delayed. const canvas = renderer.domElement; const parent = canvas.parentElement; if (parent) { const width = parent.clientWidth * 0.8; const height = parent.clientHeight * 0.7; camera.aspect = width / height; camera.updateProjectionMatrix(); } }); This sets up the HTML page, basic styles, and the JavaScript code using Three.js to create and display the snowman. You can interact with the model using your mouse (click and drag to rotate, scroll to zoom). The text appears above and below the 3D canvas.