3D Ring Configurator

Brand

Diamond Type

Carat Weight

Halo Setting

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .configurator { display: flex; flex-direction: column; background-color: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; } #canvas-container { width: 100%; height: 60vh; background-color: #f8f8f8; } .controls { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .control-section { margin-bottom: 20px; } h3 { margin-bottom: 10px; font-size: 18px; color: #444; } .options { display: flex; flex-wrap: wrap; gap: 10px; } .option { padding: 8px 16px; background-color: #f0f0f0; border: 2px solid #ddd; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; } .option:hover { background-color: #e0e0e0; } .option.active { background-color: #4a90e2; color: white; border-color: #3a80d2; } @media (min-width: 768px) { .configurator { flex-direction: row; } #canvas-container { width: 60%; height: 80vh; } .controls { width: 40%; overflow-y: auto; display: block; } } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { RingConfigurator } from './RingConfigurator.js'; import { UIController } from './UIController.js'; // Initialize the scene const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf8f8f8); // Create camera const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 10); // Create renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Add renderer to DOM const container = document.getElementById('canvas-container'); container.appendChild(renderer.domElement); // Add controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.minDistance = 5; controls.maxDistance = 15; controls.maxPolarAngle = Math.PI / 1.5; // Add lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 5, 5); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; scene.add(directionalLight); // Add spotlight for diamond sparkle const spotLight = new THREE.SpotLight(0xffffff, 1.5); spotLight.position.set(-5, 10, 5); spotLight.angle = Math.PI / 6; spotLight.penumbra = 0.2; spotLight.decay = 2; spotLight.distance = 50; spotLight.castShadow = true; scene.add(spotLight); // Initialize ring configurator const ringConfigurator = new RingConfigurator(scene); // Initialize UI controller const uiController = new UIController(ringConfigurator); // Handle window resize function onWindowResize() { const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; camera.aspect = containerWidth / containerHeight; camera.updateProjectionMatrix(); renderer.setSize(containerWidth, containerHeight); } window.addEventListener('resize', onWindowResize); onWindowResize(); // Initial sizing // Animation loop function animate() { requestAnimationFrame(animate); controls.update(); // Add subtle rotation to make diamond sparkle if (ringConfigurator.diamond) { ringConfigurator.diamond.rotation.y += 0.001; } renderer.render(scene, camera); } animate(); import * as THREE from 'three'; export class RingConfigurator { constructor(scene) { this.scene = scene; this.ring = null; this.diamond = null; this.halo = null; this.currentConfig = { brand: 'classic', diamondType: 'round', caratWeight: '1', haloSetting: 'none' }; // Materials this.materials = { gold: new THREE.MeshStandardMaterial({ color: 0xFFD700, metalness: 1, roughness: 0.2 }), diamond: new THREE.MeshPhysicalMaterial({ color: 0xffffff, metalness: 0.1, roughness: 0.1, transmission: 0.9, transparent: true, clearcoat: 1.0, clearcoatRoughness: 0.1 }), smallDiamond: new THREE.MeshPhysicalMaterial({ color: 0xffffff, metalness: 0.1, roughness: 0.1, transmission: 0.9, transparent: true }) }; this.createInitialRing(); } createInitialRing() { this.updateRing( this.currentConfig.brand, this.currentConfig.diamondType, this.currentConfig.caratWeight, this.currentConfig.haloSetting ); } updateRing(brand, diamondType, caratWeight, haloSetting) { // Update current configuration this.currentConfig.brand = brand; this.currentConfig.diamondType = diamondType; this.currentConfig.caratWeight = caratWeight; this.currentConfig.haloSetting = haloSetting; // Clear existing objects if (this.ring) this.scene.remove(this.ring); if (this.diamond) this.scene.remove(this.diamond); if (this.halo) this.scene.remove(this.halo); // Create new ring based on brand this.createRingBand(brand); // Create diamond based on type and carat this.createDiamond(diamondType, caratWeight); // Create halo if needed if (haloSetting !== 'none') { this.createHalo(haloSetting, diamondType); } } createRingBand(brand) { let geometry; switch (brand) { case 'classic': geometry = new THREE.TorusGeometry(1.5, 0.2, 16, 100); break; case 'modern': geometry = new THREE.TorusGeometry(1.5, 0.15, 16, 100, Math.PI * 1.8); break; case 'vintage': geometry = new THREE.TorusKnotGeometry(1, 0.2, 100, 16, 2, 3); break; default: geometry = new THREE.TorusGeometry(1.5, 0.2, 16, 100); } this.ring = new THREE.Mesh(geometry, this.materials.gold); // Position and rotate the ring if (brand === 'vintage') { this.ring.scale.set(0.8, 0.8, 0.8); this.ring.rotation.x = Math.PI / 2; } else { this.ring.rotation.x = Math.PI / 2; } this.ring.castShadow = true; this.ring.receiveShadow = true; this.scene.add(this.ring); } createDiamond(diamondType, caratWeight) { let geometry; const caratScale = parseFloat(caratWeight); switch (diamondType) { case 'round': geometry = new THREE.OctahedronGeometry(0.5 * Math.sqrt(caratScale), 2); break; case 'princess': geometry = new THREE.BoxGeometry( 0.5 * caratScale, 0.5 * caratScale, 0.7 * caratScale ); break; case 'emerald': geometry = new THREE.BoxGeometry( 0.6 * caratScale, 0.4 * caratScale, 0.8 * caratScale ); // Bevel the edges geometry = new THREE.BufferGeometry().fromGeometry(geometry); break; default: geometry = new THREE.OctahedronGeometry(0.5 * Math.sqrt(caratScale), 2); } this.diamond = new THREE.Mesh(geometry, this.materials.diamond); // Position the diamond on top of the ring if (this.currentConfig.brand === 'vintage') { this.diamond.position.set(0, 1.2, 0); } else { this.diamond.position.set(0, 1.5, 0); } // Rotate the diamond for better appearance this.diamond.rotation.x = Math.PI / 6; this.diamond.castShadow = true; this.scene.add(this.diamond); } createHalo(haloSetting, diamondType) { this.halo = new THREE.Group(); const radius = (diamondType === 'round') ? 0.7 : 0.8; const smallDiamondSize = 0.1; const count = (haloSetting === 'single') ? 16 : 24; // Create small diamonds around the main diamond for (let i = 0; i < count; i++) { const angle = (i / count) * Math.PI * 2; const smallDiamond = new THREE.Mesh( new THREE.OctahedronGeometry(smallDiamondSize, 1), this.materials.smallDiamond ); if (haloSetting === 'single') { smallDiamond.position.x = Math.cos(angle) * radius; smallDiamond.position.z = Math.sin(angle) * radius; } else { // For double halo, create two rings const isOuterRing = i >= count / 2; const ringRadius = isOuterRing ? radius * 1.3 : radius; const ringAngle = isOuterRing ? (i - count / 2) / (count / 2) * Math.PI * 2 : (i / (count / 2)) * Math.PI * 2; smallDiamond.position.x = Math.cos(ringAngle) * ringRadius; smallDiamond.position.z = Math.sin(ringAngle) * ringRadius; } // Position at the same height as the main diamond smallDiamond.position.y = this.diamond.position.y; this.halo.add(smallDiamond); } this.scene.add(this.halo); } } export class UIController { constructor(ringConfigurator) { this.ringConfigurator = ringConfigurator; this.initEventListeners(); } initEventListeners() { // Brand options const brandOptions = document.querySelectorAll('#brand-options .option'); brandOptions.forEach(option => { option.addEventListener('click', () => { this.setActiveOption(brandOptions, option); this.updateRingConfiguration(); }); }); // Diamond options const diamondOptions = document.querySelectorAll('#diamond-options .option'); diamondOptions.forEach(option => { option.addEventListener('click', () => { this.setActiveOption(diamondOptions, option); this.updateRingConfiguration(); }); }); // Carat options const caratOptions = document.querySelectorAll('#carat-options .option'); caratOptions.forEach(option => { option.addEventListener('click', () => { this.setActiveOption(caratOptions, option); this.updateRingConfiguration(); }); }); // Halo options const haloOptions = document.querySelectorAll('#halo-options .option'); haloOptions.forEach(option => { option.addEventListener('click', () => { this.setActiveOption(haloOptions, option); this.updateRingConfiguration(); }); }); } setActiveOption(options, selectedOption) { options.forEach(option => { option.classList.remove('active'); }); selectedOption.classList.add('active'); } updateRingConfiguration() { const brand = document.querySelector('#brand-options .active').dataset.value; const diamondType = document.querySelector('#diamond-options .active').dataset.value; const caratWeight = document.querySelector('#carat-options .active').dataset.value; const haloSetting = document.querySelector('#halo-options .active').dataset.value; this.ringConfigurator.updateRing(brand, diamondType, caratWeight, haloSetting); } } I've created a 3D ring configurator with the following features: 1. A responsive UI with options for: - Brand styles (Classic, Modern, Vintage) - Diamond types (Round, Princess, Emerald) - Carat weights (1, 1.5, 2) - Halo settings (None, Single, Double) 2. The 3D scene includes: - Realistic materials for gold and diamonds - Proper lighting for diamond sparkle - OrbitControls for interactive viewing - Responsive design that works on different screen sizes 3. The code is organized into modules: - RingConfigurator.js handles the 3D model creation and updates - UIController.js manages the user interface interactions - main.js sets up the Three.js scene and animation loop To view the configurator, open the index.html file in a browser. You can interact with the ring by dragging to rotate the view, and use the UI controls to customize the ring's appearance.