78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
"use client";
|
|
|
|
import React, { useRef, useEffect } from "react";
|
|
import * as THREE from "three";
|
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
|
|
|
|
export default function SimpleGlobe() {
|
|
const mountRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const width = 400;
|
|
const height = 400;
|
|
|
|
// إنشاء المشهد
|
|
const scene = new THREE.Scene();
|
|
|
|
// الكاميرا
|
|
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
|
|
camera.position.z = 3;
|
|
|
|
// الرندرر
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
renderer.setSize(width, height);
|
|
mountRef.current.appendChild(renderer.domElement);
|
|
|
|
// الكرة الزرقاء
|
|
const geometry = new THREE.SphereGeometry(1, 32, 32);
|
|
const material = new THREE.MeshStandardMaterial({
|
|
color: "#007bff",
|
|
metalness: 0.3,
|
|
roughness: 0.7,
|
|
});
|
|
const sphere = new THREE.Mesh(geometry, material);
|
|
scene.add(sphere);
|
|
|
|
// إضاءة
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
|
|
scene.add(ambientLight);
|
|
|
|
// تحكم الماوس
|
|
const controls = new OrbitControls(camera, renderer.domElement);
|
|
controls.enableDamping = true; // يجعل الحركة سلسة
|
|
controls.dampingFactor = 0.05;
|
|
|
|
// دالة التحديث والرسوم
|
|
const animate = () => {
|
|
requestAnimationFrame(animate);
|
|
|
|
sphere.rotation.y += 0.005; // دوران تلقائي بسيط
|
|
|
|
controls.update(); // تحديث تحكمات الماوس
|
|
|
|
renderer.render(scene, camera);
|
|
};
|
|
|
|
animate();
|
|
|
|
// تنظيف عند إزالة المكون
|
|
return () => {
|
|
controls.dispose();
|
|
mountRef.current.removeChild(renderer.domElement);
|
|
renderer.dispose();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
ref={mountRef}
|
|
style={{
|
|
width: "400px",
|
|
height: "400px",
|
|
margin: "0 auto",
|
|
backgroundColor: "#010217",
|
|
}}
|
|
/>
|
|
);
|
|
}
|