tgoop.com/nextcode1/220
Create:
Last Update:
Last Update:
سورس کد کره 👇
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>کره زمین</title>
<style>
body, html {
margin: 0; padding: 0; overflow: hidden;
background: black;
height: 100vh;
display: flex; justify-content: center; align-items: center;
}
#container {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://photo2.tgoop.com/u/cdn.jsdelivr.net/npm/three@0.153.0/build/three.min.js"></script>
<script>
const container = document.getElementById('container');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
camera.position.z = 3;
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(500, 500);
container.appendChild(renderer.domElement);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 3, 5);
scene.add(directionalLight);
const geometry = new THREE.SphereGeometry(1, 64, 64);
const loader = new THREE.TextureLoader();
const earthTexture = loader.load('https://raw.githubusercontent.com/turban/webgl-earth/master/images/2_no_clouds_4k.jpg');
const bumpTexture = loader.load('https://raw.githubusercontent.com/turban/webgl-earth/master/images/elev_bump_4k.jpg');
const material = new THREE.MeshPhongMaterial({
map: earthTexture,
bumpMap: bumpTexture,
bumpScale: 0.05,
shininess: 10
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let rotation = { x: 0, y: 0 };
renderer.domElement.addEventListener('mousedown', function(e) {
isDragging = true;
previousMousePosition = { x: e.clientX, y: e.clientY };
});
renderer.domElement.addEventListener('mouseup', function() {
isDragging = false;
});
renderer.domElement.addEventListener('mousemove', function(e) {
if (isDragging) {
const deltaMove = {
x: e.clientX - previousMousePosition.x,
y: e.clientY - previousMousePosition.y
};
rotation.y += deltaMove.x * 0.005;
rotation.x += deltaMove.y * 0.005;
rotation.x = Math.min(Math.max(rotation.x, -Math.PI / 2), Math.PI / 2);
previousMousePosition = { x: e.clientX, y: e.clientY };
}
});
let autoRotateSpeed = 0.002;
function animate() {
requestAnimationFrame(animate);
if (!isDragging) {
rotation.y += autoRotateSpeed;
}
earth.rotation.y = rotation.y;
earth.rotation.x = rotation.x;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
اگه خوب هست ری اکشن بدید
BY NEXT CODE
Share with your friend now:
tgoop.com/nextcode1/220