From 2cdc5ce56adddbd6e5b26d9d7b351f48d6224939 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 5 Mar 2026 14:58:48 +0000 Subject: [PATCH] Update src/components/3d/IDMSLogo3D.tsx --- src/components/3d/IDMSLogo3D.tsx | 366 +++++++++++++++---------------- 1 file changed, 182 insertions(+), 184 deletions(-) diff --git a/src/components/3d/IDMSLogo3D.tsx b/src/components/3d/IDMSLogo3D.tsx index c9d8807..766ff84 100644 --- a/src/components/3d/IDMSLogo3D.tsx +++ b/src/components/3d/IDMSLogo3D.tsx @@ -1,6 +1,7 @@ "use client"; import React, { useEffect, useRef } from "react"; +import * as THREE from "three"; const IDMSLogo3D = () => { const containerRef = useRef(null); @@ -10,201 +11,198 @@ const IDMSLogo3D = () => { const groupRef = useRef(null); useEffect(() => { - // Dynamically import THREE to avoid SSR issues - import("three").then((THREE) => { - if (!containerRef.current) return; + // Scene setup + if (!containerRef.current) return; - // Scene setup - const scene = new THREE.Scene(); - scene.background = new THREE.Color(0x000000); - sceneRef.current = scene; + const scene = new THREE.Scene(); + scene.background = new THREE.Color(0x000000); + sceneRef.current = scene; - const camera = new THREE.PerspectiveCamera( - 75, - containerRef.current.clientWidth / containerRef.current.clientHeight, - 0.1, - 1000 - ); - camera.position.z = 8; - cameraRef.current = camera; + const camera = new THREE.PerspectiveCamera( + 75, + containerRef.current.clientWidth / containerRef.current.clientHeight, + 0.1, + 1000 + ); + camera.position.z = 8; + cameraRef.current = camera; - const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); - renderer.setSize( - containerRef.current.clientWidth, - containerRef.current.clientHeight - ); - renderer.shadowMap.enabled = true; - renderer.shadowMap.type = THREE.PCFShadowShadowMap; - containerRef.current.appendChild(renderer.domElement); - rendererRef.current = renderer; + const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); + renderer.setSize( + containerRef.current.clientWidth, + containerRef.current.clientHeight + ); + renderer.shadowMap.enabled = true; + renderer.shadowMap.type = THREE.PCFShadowMap; + containerRef.current.appendChild(renderer.domElement); + rendererRef.current = renderer; - // Create group for rotation - const group = new THREE.Group(); - scene.add(group); - groupRef.current = group; + // Create group for rotation + const group = new THREE.Group(); + scene.add(group); + groupRef.current = group; - // Lighting - const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); - scene.add(ambientLight); + // Lighting + const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); + scene.add(ambientLight); - const pointLight1 = new THREE.PointLight(0x00ffff, 2, 100); - pointLight1.position.set(10, 10, 10); - scene.add(pointLight1); + const pointLight1 = new THREE.PointLight(0x00ffff, 2, 100); + pointLight1.position.set(10, 10, 10); + scene.add(pointLight1); - const pointLight2 = new THREE.PointLight(0xff00ff, 2, 100); - pointLight2.position.set(-10, -10, 10); - scene.add(pointLight2); + const pointLight2 = new THREE.PointLight(0xff00ff, 2, 100); + pointLight2.position.set(-10, -10, 10); + scene.add(pointLight2); - const pointLight3 = new THREE.PointLight(0xff1493, 1.5, 100); - pointLight3.position.set(0, 10, -10); - scene.add(pointLight3); + const pointLight3 = new THREE.PointLight(0xff1493, 1.5, 100); + pointLight3.position.set(0, 10, -10); + scene.add(pointLight3); - // Create interconnected geometric shapes representing IDMS systems - const geometry1 = new THREE.IcosahedronGeometry(1.5, 3); - const geometry2 = new THREE.OctahedronGeometry(1.2, 2); - const geometry3 = new THREE.TetrahedronGeometry(1, 1); + // Create interconnected geometric shapes representing IDMS systems + const geometry1 = new THREE.IcosahedronGeometry(1.5, 3); + const geometry2 = new THREE.OctahedronGeometry(1.2, 2); + const geometry3 = new THREE.TetrahedronGeometry(1, 1); - // Chrome metallic material with chromatic reflections - const chromeMatPrimary = new THREE.MeshStandardMaterial({ - color: 0xcccccc, - metalness: 0.95, - roughness: 0.05, - emissive: 0x0066ff, - emissiveIntensity: 0.3, - }); - - const chromeMatSecondary = new THREE.MeshStandardMaterial({ - color: 0xdddddd, - metalness: 0.92, - roughness: 0.08, - emissive: 0xff00ff, - emissiveIntensity: 0.25, - }); - - const chromeMatTertiary = new THREE.MeshStandardMaterial({ - color: 0xbbbbbb, - metalness: 0.93, - roughness: 0.06, - emissive: 0xff1493, - emissiveIntensity: 0.2, - }); - - const mesh1 = new THREE.Mesh(geometry1, chromeMatPrimary); - mesh1.position.set(0, 0, 0); - mesh1.castShadow = true; - mesh1.receiveShadow = true; - - const mesh2 = new THREE.Mesh(geometry2, chromeMatSecondary); - mesh2.position.set(2, 1, 0); - mesh2.scale.set(0.7, 0.7, 0.7); - mesh2.castShadow = true; - mesh2.receiveShadow = true; - - const mesh3 = new THREE.Mesh(geometry3, chromeMatTertiary); - mesh3.position.set(-1.5, -1.2, 0); - mesh3.scale.set(0.6, 0.6, 0.6); - mesh3.castShadow = true; - mesh3.receiveShadow = true; - - group.add(mesh1); - group.add(mesh2); - group.add(mesh3); - - // Create connecting lines (edges) with glow - const lineMaterial = new THREE.LineBasicMaterial({ - color: 0x00ffff, - linewidth: 2, - }); - - const linePoints = [ - new THREE.Vector3(0, 0, 0), - new THREE.Vector3(2, 1, 0), - new THREE.Vector3(-1.5, -1.2, 0), - new THREE.Vector3(0, 0, 0), - ]; - - const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints); - const lines = new THREE.Line(lineGeometry, lineMaterial); - group.add(lines); - - // Glow effect around objects - const glowGeometry = new THREE.IcosahedronGeometry(1.8, 3); - const glowMaterial = new THREE.MeshBasicMaterial({ - color: 0x00ffff, - transparent: true, - opacity: 0.15, - side: THREE.BackSide, - }); - const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial); - glowMesh.position.set(0, 0, 0); - group.add(glowMesh); - - // Secondary glow with pink/purple - const glowGeometry2 = new THREE.OctahedronGeometry(1.5, 2); - const glowMaterial2 = new THREE.MeshBasicMaterial({ - color: 0xff00ff, - transparent: true, - opacity: 0.1, - side: THREE.BackSide, - }); - const glowMesh2 = new THREE.Mesh(glowGeometry2, glowMaterial2); - glowMesh2.position.set(0, 0, 0); - group.add(glowMesh2); - - // Animation loop - const animate = () => { - requestAnimationFrame(animate); - - // Slow ambient rotation - if (groupRef.current) { - groupRef.current.rotation.x += 0.0008; - groupRef.current.rotation.y += 0.001; - groupRef.current.rotation.z += 0.0005; - } - - // Subtle mesh movements for dynamic effect - mesh1.rotation.x += 0.002; - mesh1.rotation.y += 0.003; - - mesh2.rotation.x -= 0.001; - mesh2.rotation.z += 0.0025; - - mesh3.rotation.y -= 0.0015; - mesh3.rotation.z += 0.001; - - // Pulsing glow effect - const pulse = Math.sin(Date.now() * 0.001) * 0.05 + 0.15; - glowMaterial.opacity = pulse; - glowMaterial2.opacity = pulse * 0.65; - - if (rendererRef.current) { - rendererRef.current.render(scene, camera); - } - }; - - animate(); - - // Handle resize - const handleResize = () => { - if (!containerRef.current || !cameraRef.current || !rendererRef.current) - return; - - const width = containerRef.current.clientWidth; - const height = containerRef.current.clientHeight; - cameraRef.current.aspect = width / height; - cameraRef.current.updateProjectionMatrix(); - rendererRef.current.setSize(width, height); - }; - - window.addEventListener("resize", handleResize); - - return () => { - window.removeEventListener("resize", handleResize); - if (containerRef.current && rendererRef.current) { - containerRef.current.removeChild(rendererRef.current.domElement); - } - }; + // Chrome metallic material with chromatic reflections + const chromeMatPrimary = new THREE.MeshStandardMaterial({ + color: 0xcccccc, + metalness: 0.95, + roughness: 0.05, + emissive: 0x0066ff, + emissiveIntensity: 0.3, }); + + const chromeMatSecondary = new THREE.MeshStandardMaterial({ + color: 0xdddddd, + metalness: 0.92, + roughness: 0.08, + emissive: 0xff00ff, + emissiveIntensity: 0.25, + }); + + const chromeMatTertiary = new THREE.MeshStandardMaterial({ + color: 0xbbbbbb, + metalness: 0.93, + roughness: 0.06, + emissive: 0xff1493, + emissiveIntensity: 0.2, + }); + + const mesh1 = new THREE.Mesh(geometry1, chromeMatPrimary); + mesh1.position.set(0, 0, 0); + mesh1.castShadow = true; + mesh1.receiveShadow = true; + + const mesh2 = new THREE.Mesh(geometry2, chromeMatSecondary); + mesh2.position.set(2, 1, 0); + mesh2.scale.set(0.7, 0.7, 0.7); + mesh2.castShadow = true; + mesh2.receiveShadow = true; + + const mesh3 = new THREE.Mesh(geometry3, chromeMatTertiary); + mesh3.position.set(-1.5, -1.2, 0); + mesh3.scale.set(0.6, 0.6, 0.6); + mesh3.castShadow = true; + mesh3.receiveShadow = true; + + group.add(mesh1); + group.add(mesh2); + group.add(mesh3); + + // Create connecting lines (edges) with glow + const lineMaterial = new THREE.LineBasicMaterial({ + color: 0x00ffff, + linewidth: 2, + }); + + const linePoints = [ + new THREE.Vector3(0, 0, 0), + new THREE.Vector3(2, 1, 0), + new THREE.Vector3(-1.5, -1.2, 0), + new THREE.Vector3(0, 0, 0), + ]; + + const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints); + const lines = new THREE.Line(lineGeometry, lineMaterial); + group.add(lines); + + // Glow effect around objects + const glowGeometry = new THREE.IcosahedronGeometry(1.8, 3); + const glowMaterial = new THREE.MeshBasicMaterial({ + color: 0x00ffff, + transparent: true, + opacity: 0.15, + side: THREE.BackSide, + }); + const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial); + glowMesh.position.set(0, 0, 0); + group.add(glowMesh); + + // Secondary glow with pink/purple + const glowGeometry2 = new THREE.OctahedronGeometry(1.5, 2); + const glowMaterial2 = new THREE.MeshBasicMaterial({ + color: 0xff00ff, + transparent: true, + opacity: 0.1, + side: THREE.BackSide, + }); + const glowMesh2 = new THREE.Mesh(glowGeometry2, glowMaterial2); + glowMesh2.position.set(0, 0, 0); + group.add(glowMesh2); + + // Animation loop + const animate = () => { + requestAnimationFrame(animate); + + // Slow ambient rotation + if (groupRef.current) { + groupRef.current.rotation.x += 0.0008; + groupRef.current.rotation.y += 0.001; + groupRef.current.rotation.z += 0.0005; + } + + // Subtle mesh movements for dynamic effect + mesh1.rotation.x += 0.002; + mesh1.rotation.y += 0.003; + + mesh2.rotation.x -= 0.001; + mesh2.rotation.z += 0.0025; + + mesh3.rotation.y -= 0.0015; + mesh3.rotation.z += 0.001; + + // Pulsing glow effect + const pulse = Math.sin(Date.now() * 0.001) * 0.05 + 0.15; + glowMaterial.opacity = pulse; + glowMaterial2.opacity = pulse * 0.65; + + if (rendererRef.current) { + rendererRef.current.render(scene, camera); + } + }; + + animate(); + + // Handle resize + const handleResize = () => { + if (!containerRef.current || !cameraRef.current || !rendererRef.current) + return; + + const width = containerRef.current.clientWidth; + const height = containerRef.current.clientHeight; + cameraRef.current.aspect = width / height; + cameraRef.current.updateProjectionMatrix(); + rendererRef.current.setSize(width, height); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + if (containerRef.current && rendererRef.current) { + containerRef.current.removeChild(rendererRef.current.domElement); + } + }; }, []); return ( -- 2.49.1