Three.js 全景球体与遥感控制_js 遥感-优快云博客

本文链接：https://blog.youkuaiyun.com/luoruowen/article/details/143748242
废话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 全景球体与遥感控制</title>
    <style>
        body, html {
            margin: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color: #000;
        }

        /* 遥感外圈 */
        #outer-circle {
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 255, 0.1);
            border: 2px solid blue;
            border-radius: 50%;
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 遥感中心按钮 */
        #inner-button {
            width: 40px;
            height: 40px;
            background-color: blue;
            border-radius: 50%;
            position: absolute;
            cursor: pointer;
        }

        /* 遥感箭头 */
        .arrow {
            width: 0;
            height: 0;
            border-style: solid;
            position: absolute;
        }

        /* 上箭头 */
        .arrow-up {
            border-width: 0 10px 15px 10px;
            border-color: transparent transparent blue transparent;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* 下箭头 */
        .arrow-down {
            border-width: 15px 10px 0 10px;
            border-color: blue transparent transparent transparent;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* 左箭头 */
        .arrow-left {
            border-width: 10px 15px 10px 0;
            border-color: transparent blue transparent transparent;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* 右箭头 */
        .arrow-right {
            border-width: 10px 0 10px 15px;
            border-color: transparent transparent transparent blue;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* 刻度样式 */
        .tick {
            position: absolute;
            width: 4px;
            height: 15px;
            background-color: blue;
        }
        .tick-up { top: 5px; left: 50%; transform: translateX(-50%); }
        .tick-down { bottom: 5px; left: 50%; transform: translateX(-50%); }
        .tick-left { left: 5px; top: 50%; transform: translateY(-50%) rotate(90deg); }
        .tick-right { right: 5px; top: 50%; transform: translateY(-50%) rotate(90deg); }
    </style>
</head>
<body>

<!-- 遥感 UI -->
<div id="outer-circle">
    <div id="inner-button"></div>
    <div class="arrow arrow-up"></div>
    <div class="arrow arrow-down"></div>
    <div class="arrow arrow-left"></div>
    <div class="arrow arrow-right"></div>
    <div class="tick tick-up"></div>
    <div class="tick tick-down"></div>
    <div class="tick tick-left"></div>
    <div class="tick tick-right"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
    // 初始化 Three.js 场景、相机和渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建球体和贴图
    const geometry = new THREE.SphereGeometry(500, 64, 64);
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load('http://www.fztteng.com/FILE3D/s3d_upload/scene/AIShengChengQuanJing5/img/fantasy_lands_solar_system1.jpg'); // 替换为你的全景图路径
    const material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.BackSide, // 贴图在球体内部显示
    });
    const sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);

    // 初始视角和目标
    const radius = 500;
    let target = new THREE.Vector3(0, 0, -1); // 初始目标方向
    camera.position.set(0, 0, 0);

    // 遥感控制
    const outerCircle = document.getElementById('outer-circle');
    const innerButton = document.getElementById('inner-button');
    const outerRadius = outerCircle.offsetWidth / 2;
    const centerX = outerCircle.offsetLeft + outerRadius;
    const centerY = outerCircle.offsetTop + outerRadius;

    let horizontalAngle = 0; // 水平角度
    let verticalAngle = 0; // 垂直角度
    let rotationSpeedX = 0; // 水平旋转速度
    let rotationSpeedY = 0; // 垂直旋转速度
    let isDragging = false;

    function startDrag(event) {
        event.preventDefault();
        isDragging = true;
        const isTouchEvent = event.type.includes('touch');
        if (isTouchEvent) {
            document.addEventListener('touchmove', onDrag);
            document.addEventListener('touchend', stopDrag);
        } else {
            document.addEventListener('mousemove', onDrag);
            document.addEventListener('mouseup', stopDrag);
        }
    }

    function onDrag(event) {
        const isTouchEvent = event.type.includes('touch');
        const clientX = isTouchEvent ? event.touches[0].clientX : event.clientX;
        const clientY = isTouchEvent ? event.touches[0].clientY : event.clientY;

        let dx = clientX - centerX;
        let dy = clientY - centerY;

        const distance = Math.sqrt(dx * dx + dy * dy);
        const angle = Math.atan2(dy, dx);

        if (distance > outerRadius - 20) {
            dx = Math.cos(angle) * (outerRadius - 20);
            dy = Math.sin(angle) * (outerRadius - 20);
        }

        innerButton.style.transform = `translate(${dx}px, ${dy}px)`;

        // 根据遥感位置偏移，设置旋转速度
        const speedFactor = distance / (outerRadius - 20);
        rotationSpeedX = dx * speedFactor * 0.001;
        rotationSpeedY = dy * speedFactor * 0.001;
    }

    function updateCameraRotation() {
        if (!isDragging) {
            // 停止拖动时缓慢衰减速度
            rotationSpeedX *= 0.9;
            rotationSpeedY *= 0.9;
        }

        // 累积旋转角度
        horizontalAngle -= rotationSpeedX;
        verticalAngle -= rotationSpeedY;

        // 限制垂直角度在合理范围
        const maxVerticalAngle = Math.PI / 2;
        verticalAngle = Math.max(-maxVerticalAngle, Math.min(maxVerticalAngle, verticalAngle));

        // 计算 target 的新位置
        const targetX = radius * Math.sin(horizontalAngle) * Math.cos(verticalAngle);
        const targetY = radius * Math.sin(verticalAngle);
        const targetZ = radius * Math.cos(horizontalAngle) * Math.cos(verticalAngle);

        // 更新目标点位置并调整视角
        target.set(targetX, targetY, targetZ);
        camera.lookAt(target);
    }

    function stopDrag() {
        isDragging = false;
        document.removeEventListener('mousemove', onDrag);
        document.removeEventListener('mouseup', stopDrag);
        document.removeEventListener('touchmove', onDrag);
        document.removeEventListener('touchend', stopDrag);

        innerButton.style.transform = 'translate(0, 0)';
    }

    innerButton.addEventListener('mousedown', startDrag);
    innerButton.addEventListener('touchstart', startDrag);

    // 渲染循环
    function animate() {
        updateCameraRotation(); // 每帧更新相机旋转
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
</script>

</body>
</html>