Merge version_2 into main #8
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
|
||||
const IDMSLogo3D = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
@@ -10,201 +11,198 @@ const IDMSLogo3D = () => {
|
||||
const groupRef = useRef<THREE.Group | null>(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 (
|
||||
|
||||
Reference in New Issue
Block a user