<![CDATA[
<p>/** <br><!DOCTYPE html> <br><html lang="ko"> <br><head> <br>    <meta charset="UTF-8"> <br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <br>    <title>TERRA - 전 세계 실시간 탐사 시스템</title> <br>     <br>    <meta property="og:title" content="TERRA: 지구 탐사 시스템"> <br>    <meta property="og:description" content="클릭 한 번으로 전 세계 어디든 거리뷰로 착륙하세요."> <br>    <meta property="og:image" content="<a href="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1200" target="_blank" class="ke-link">https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1200</a>"> <br>     <br>    <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js</a>"></script> <br>    <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js</a>"></script> <br>    <style> <br>        body { margin: 0; background: #000; color: #fff; font-family: 'Inter', 'Noto Sans KR', sans-serif; overflow: hidden; } <br>        #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } <br>         <br>        .ui-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; display: flex; flex-direction: column; align-items: center; } <br>        .interactive { pointer-events: auto; } <br>        .search-area { margin-top: 30px; width: 90%; max-width: 500px; } <br>        .search-box { display: flex; background: rgba(0,0,0,0.85); border: 2px solid #4ade80; border-radius: 50px; padding: 5px; box-shadow: 0 0 30px rgba(74, 222, 128, 0.4); } <br>        input { background: transparent; border: none; color: white; padding: 12px 20px; flex-grow: 1; outline: none; font-size: 1rem; width: 100px; } <br>        button#scanBtn { background: #4ade80; color: #000; border: none; padding: 10px 25px; border-radius: 50px; font-weight: bold; cursor: pointer; transition: 0.3s; } <br>        button#scanBtn:hover { background: #fff; transform: scale(1.05); } <br><br>        /* 상태 메시지 */ <br>        #status-msg { margin-top: 15px; font-family: monospace; color: #4ade80; font-size: 0.9rem; opacity: 0; text-align: center; } <br><br>        #scanner-overlay { <br>            position: fixed; top: 55%; left: 50%; transform: translate(-50%, -50%) scale(0.95); <br>            width: 90%; height: 75%; border: 2px solid #4ade80; border-radius: 20px; <br>            overflow: hidden; opacity: 0; visibility: hidden; transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1); <br>            z-index: 50; background: #000; box-shadow: 0 0 100px rgba(0,0,0,1); <br>        } <br>        #scanner-overlay.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } <br>         <br>        .view-controls { position: absolute; top: 15px; left: 15px; display: flex; gap: 8px; z-index: 60; } <br>        .view-btn { background: rgba(0,0,0,0.8); color: #fff; border: 1px solid #4ade80; padding: 8px 15px; border-radius: 8px; cursor: pointer; font-size: 0.8rem; font-weight: bold; } <br>        .view-btn.active { background: #4ade80; color: #000; } <br>         <br>        iframe { width: 100%; height: 100%; border: none; background: #111; } <br>        .close-btn { position: absolute; top: 15px; right: 15px; background: #ff4757; color: white; border: none; padding: 8px 15px; border-radius: 8px; cursor: pointer; z-index: 60; font-weight: bold; } <br><br>        @media (max-width: 600px) { <br>            .search-box { width: 100%; } <br>            #scanner-overlay { width: 95%; height: 80%; top: 58%; } <br>            .view-btn { padding: 6px 10px; font-size: 0.7rem; } <br>        } <br>    </style> <br></head> <br><body> <br><br>    <div id="canvas-container"></div> <br><br>    <div id="scanner-overlay"> <br>        <div class="view-controls"> <br>            <button class="view-btn active" id="btnStreet" xxonclick="updateFrame('street')">STREET</button> <br>            <button class="view-btn" id="btnSat" xxonclick="updateFrame('satellite')">AERIAL</button> <br>        </div> <br>        <button class="close-btn" xxonclick="closeScanner()">CLOSE</button> <br>        <iframe id="viewerFrame" allow="fullscreen; geolocation;"></iframe> <br>    </div> <br><br>    <div class="ui-layer"> <br>        <div class="search-area interactive"> <br>            <div class="search-box"> <br>                <input type="text" id="cityInput" placeholder="탐사 장소 입력..." xxonkeypress="if(event.keyCode==13) initiateScan()"> <br>                <button id="scanBtn" xxonclick="initiateScan()">SCAN</button> <br>            </div> <br>            <div id="status-msg">TARGET ACQUIRING...</div> <br>        </div> <br>    </div> <br><br>    <script> <br>        let scene, camera, renderer, earth, isRotating = true; <br>        let currentLat, currentLon, currentAddress; <br>        let timeline; <br><br>        function init() { <br>            scene = new THREE.Scene(); <br>            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); <br>            renderer = new THREE.WebGLRenderer({ antialias: true }); <br>            renderer.setSize(window.innerWidth, window.innerHeight); <br>            document.getElementById('canvas-container').appendChild(renderer.domElement); <br><br>            scene.add(new THREE.AmbientLight(0xffffff, 1.2)); <br>            const loader = new THREE.TextureLoader(); <br>            const texture = loader.load('<a href="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_2048.jpg');" target="_blank" class="ke-link">https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_2048.jpg');</a><br>            earth = new THREE.Mesh(new THREE.SphereGeometry(2, 64, 64), new THREE.MeshPhongMaterial({ map: texture })); <br>            earth.rotation.y = -Math.PI / 2; <br>            scene.add(earth); <br><br>            camera.position.z = 7; <br>            animate(); <br>        } <br><br>        function animate() { <br>            requestAnimationFrame(animate); <br>            if (isRotating) earth.rotation.y += 0.0015; <br>            renderer.render(scene, camera); <br>        } <br><br>        async function initiateScan() { <br>            const query = document.getElementById('cityInput').value; <br>            if(!query) return; <br><br>            const msg = document.getElementById('status-msg'); <br>            msg.style.opacity = 1; <br>            msg.innerText = "COORDINATING TARGET..."; <br><br>            const res = await fetch(`<a href="https://nominatim.openstreetmap.org/search?format=json&q=$" target="_blank" class="ke-link">https://nominatim.openstreetmap.org/search?format=json&q=$</a>{query}&addressdetails=1`); <br>            const data = await res.json(); <br><br>            if (data && data.length > 0) { <br>                currentLat = parseFloat(data[0].lat); <br>                currentLon = parseFloat(data[0].lon); <br>                currentAddress = data[0].address; <br>                isRotating = false; <br>                 <br>                if(timeline) timeline.kill(); <br>                const overlay = document.getElementById('scanner-overlay'); <br>                if(overlay.classList.contains('active')) gsap.to(overlay, { opacity: 0.1, duration: 0.3 }); <br><br>                const targetX = currentLat * (Math.PI / 180); <br>                const targetY = -(currentLon * (Math.PI / 180)) - (Math.PI / 2); <br><br>                timeline = gsap.timeline(); <br>                timeline.to(earth.rotation, { x: targetX, y: targetY, duration: 1.8, ease: "power3.inOut" }) <br>                .to(camera.position, { z: 2.8, duration: 1.2, ease: "power2.inOut" }, "-=1.5") <br>                .add(() => {  <br>                    updateFrame('street'); <br>                    overlay.classList.add('active'); <br>                    gsap.to(overlay, { opacity: 1, duration: 0.5 }); <br>                    msg.innerText = "SCAN COMPLETE."; <br>                    setTimeout(() => msg.style.opacity = 0, 2000); <br>                }); <br>            } else { <br>                msg.innerText = "TARGET NOT FOUND."; <br>            } <br>        } <br><br>        function updateFrame(type) { <br>            const frame = document.getElementById('viewerFrame'); <br>            const isKorea = currentAddress && currentAddress.country_code === 'kr'; <br>             <br>            document.getElementById('btnStreet').classList.toggle('active', type === 'street'); <br>            document.getElementById('btnSat').classList.toggle('active', type === 'satellite'); <br><br>            if (type === 'street') { <br>                if (isKorea) { <br>                    frame.src = `<a href="https://map.kakao.com/link/roadview/$" target="_blank" class="ke-link">https://map.kakao.com/link/roadview/$</a>{currentLat},${currentLon}`; <br>                } else { <br>                    frame.src = `<a href="https://www.google.com/maps/embed/v1/streetview?key=YOUR_API_KEY_OPTIONAL&location=$" target="_blank" class="ke-link">https://www.google.com/maps/embed/v1/streetview?key=YOUR_API_KEY_OPTIONAL&location=$</a>{currentLat},${currentLon}&heading=210&pitch=10&fov=90`.replace('key=YOUR_API_KEY_OPTIONAL&', ''); <br>                    if(!frame.src || frame.src.includes('key=')) { <br>                        frame.src = `<a href="https://maps.google.com/maps?q=$" target="_blank" class="ke-link">https://maps.google.com/maps?q=$</a>{currentLat},${currentLon}&layer=c&cbll=${currentLat},${currentLon}&output=svembed`; <br>                    } <br>                } <br>            } else { <br>                frame.src = `<a href="https://maps.google.com/maps?q=$" target="_blank" class="ke-link">https://maps.google.com/maps?q=$</a>{currentLat},${currentLon}&t=k&z=19&output=embed`; <br>            } <br>        } <br><br>        function closeScanner() { <br>            document.getElementById('scanner-overlay').classList.remove('active'); <br>            document.getElementById('viewerFrame').src = ""; <br>            isRotating = true; <br>            gsap.to(camera.position, { z: 7, duration: 1.5 }); <br>            gsap.to(earth.rotation, { x: 0, duration: 1.5 }); <br>        } <br><br>        init(); <br>    </script> <br></body> <br></html> <br>**/</p><p> </p><p> </p>
<!-- -->
]]>
카페 게시글
Android
테라 맵
은원명
추천 0
조회 46
26.01.17 20:04
댓글 0
다음검색
