| Server IP : 167.235.224.122 / Your IP : 216.73.216.110 Web Server : Apache/2.4.58 (Ubuntu) System : Linux newplayground 6.8.0-136-generic #136-Ubuntu SMP PREEMPT_DYNAMIC Wed Jul 1 21:33:11 UTC 2026 aarch64 User : deploy ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/html/planetscifi2/storage/framework/views/ |
Upload File : |
<?php $__env->startSection('content'); ?>
<?php $__env->startPush('scripts'); ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<?php $__env->stopPush(); ?>
<?php $__env->startPush('styles'); ?>
<style>
.cursor {
display: inline-block;
margin-left: 5px;
background-color: white;
width: 2px;
height: 1em;
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
to {
visibility: hidden;
}
}
#typewriter{
cursor: pointer;
font-size: 2rem;
color: white;
text-decoration: underline;
}
#globe-container {
width: 100%;
height: 100vh;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
border-radius: 0%;
}
</style>
<?php $__env->stopPush(); ?>
<div class="container-fluid vh-100">
<div class="row">
<div class="col-12 text-center align-top">
<div id="globe-container"></div> <!-- Container for the globe -->
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Get the globe container
const container = document.getElementById('globe-container');
const globeRadius = 4.75;
// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
// Load Earth texture
const textureLoader = new THREE.TextureLoader();
const earthTexture = textureLoader.load("/images/8081_earthmap10k.jpg");
// Create the globe with texture and bump map for surface details
const globeGeometry = new THREE.SphereGeometry(4.75, 32, 32);
const globeMaterial = new THREE.MeshPhongMaterial({
map: earthTexture,
bumpMap: earthTexture,
bumpScale: 0.05,
shininess: 10
});
const globe = new THREE.Mesh(globeGeometry, globeMaterial);
scene.add(globe);
// Set initial rotation to show Europe
const targetLongitude = -10; // Europe roughly around 10 degrees longitude
const targetLatitude = 50; // Europe roughly around 45 degrees latitude
globe.rotation.y = -Math.PI / 1.6; // Rotate Y-axis to bring Europe to the center horizontally
globe.rotation.x = 0.6; // Slight tilt on the X-axis to adjust for latitude
// Add ambient light for general illumination
const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);
// Add directional light to simulate sunlight
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 3, 5).normalize();
scene.add(directionalLight);
// Function to convert latitude and longitude to 3D position on globe
function latLongToVector3(lat, lon, radius) {
const phi = (90 - lat) * (Math.PI / 180); // Convert latitude to radians
const theta = (lon + 180) * (Math.PI / 180); // Convert longitude to radians
const x = -radius * Math.sin(phi) * Math.cos(theta);
const z = radius * Math.sin(phi) * Math.sin(theta);
const y = radius * Math.cos(phi);
return new THREE.Vector3(x, y, z);
}
// Add markers to the globe with correct lat/lon positions
const markers = [
<?php $__currentLoopData = $stores; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $store): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
{ lat: <?php echo e($store->latitude); ?>, lon: <?php echo e($store->longitude); ?>, info: <?php echo json_encode(html_entity_decode($store->name)); ?>, url: <?php echo json_encode(html_entity_decode($store->description)); ?> },
// { lat: 52.4888813, lon: 13.392099, info: "The Otherland Bookshop in Berlin" }
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
];
markers.forEach(marker => {
console.log(marker); // Log each marker to verify lat, lon, info, and url
});
const clickableMarkers = [];
markers.forEach(marker => {
const position = latLongToVector3(marker.lat, marker.lon, globeRadius);
// Create the pin head with smaller size to match the updated globe radius
const pinHeadGeometry = new THREE.SphereGeometry(0.05, 16, 16); // Adjusted pin head size
const pinHeadMaterial = new THREE.MeshBasicMaterial({ color: "yellow" });
const pinHead = new THREE.Mesh(pinHeadGeometry, pinHeadMaterial);
pinHead.position.copy(position);
// Store the info in pinHead's userData for access on click
pinHead.info = marker.info;
pinHead.url = marker.url;
// Create pin body positioned slightly below the pin head
const pinBodyGeometry = new THREE.CylinderGeometry(0.03, 0.03, 0.2, 16); // Adjusted to fit smaller pin head
const pinBodyMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const pinBody = new THREE.Mesh(pinBodyGeometry, pinBodyMaterial);
// Position the pin body directly below the pin head, using the new radius
pinBody.position.set(position.x, position.y - 0.2, position.z); // Slightly below pin head
pinBody.lookAt(new THREE.Vector3(0, 0, 0)); // Align towards globe center
// Group pin components
const pin = new THREE.Group();
pin.add(pinHead);
pin.add(pinBody);
// Add pin to the globe and register pinHead for click events
globe.add(pin);
clickableMarkers.push(pinHead); // Add only pinHead to clickable markers
});
// Set camera distance to fit the globe comfortably within 90% of the viewport
function adjustCameraToFitGlobe() {
const distance = 8; // Fixed distance for better control
camera.position.z = distance;
camera.updateProjectionMatrix();
}
adjustCameraToFitGlobe(); // Initial camera adjustment
// Resize handling
window.addEventListener('resize', () => {
renderer.setSize(container.clientWidth, container.clientHeight);
camera.aspect = container.clientWidth / container.clientHeight;
adjustCameraToFitGlobe(); // Recalculate camera distance
});
// Variables for tracking mouse drag and rotation velocity
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let velocity = { x: 0.001, y: 0 }; // Default y-rotation for initial automatic rotation
const decayFactor = 0.95; // Adjust decay for smoothness
// Mouse event listeners
container.addEventListener('mousedown', (event) => {
isDragging = true;
previousMousePosition = { x: event.clientX, y: event.clientY };
});
container.addEventListener('mousemove', (event) => {
if (isDragging) {
const deltaX = event.clientX - previousMousePosition.x;
const deltaY = event.clientY - previousMousePosition.y;
// Rotate the globe with mouse drag
globe.rotation.y += deltaX * 0.005;
globe.rotation.x += deltaY * 0.005;
// Limit the x rotation to prevent flipping over
globe.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, globe.rotation.x));
previousMousePosition = { x: event.clientX, y: event.clientY };
// Store the drag speed for momentum effect
velocity.x = deltaX * 0.005;
velocity.y = deltaY * 0.005;
}
});
container.addEventListener('mouseup', () => {
isDragging = false;
});
// Animate and apply momentum
function animate() {
requestAnimationFrame(animate);
// Apply momentum rotation if not dragging
if (!isDragging) {
globe.rotation.y += velocity.x;
globe.rotation.x += velocity.y;
// Gradually reduce velocity for a smooth stop
velocity.x *= decayFactor;
velocity.y *= decayFactor;
// Limit x rotation for consistent view
globe.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, globe.rotation.x));
// Smoothly transition to slow rotation when velocity is low
if (Math.abs(velocity.x) < 0.001 && Math.abs(velocity.y) < 0.001) {
velocity.x = 0.001; // Resume slow rotation in y-direction
velocity.y = 0;
}
}
renderer.render(scene, camera);
}
animate();
// Click event for markers
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
container.addEventListener('click', (event) => {
// Get container bounds and adjust mouse position relative to it
const bounds = container.getBoundingClientRect();
mouse.x = ((event.clientX - bounds.left) / bounds.width) * 2 - 1;
mouse.y = -((event.clientY - bounds.top) / bounds.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(clickableMarkers);
if (intersects.length > 0) {
const clickedMarker = intersects[0].object;
alert(clickedMarker.info + "\n" + (clickedMarker.url || "No URL available"));
}
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/planetscifi/resources/views/welcome2.blade.php ENDPATH**/ ?>