<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Potree Three.js Example</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        #potree_container {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id=“potree_container”></div>
    <button onclick="showPointCloud()">Show PointCloud</button>
    <button onclick="showPanorama()">Show Panorama</button>

    <script src="js\three.js\build\three.min.js"></script>
    <script src="js\potree\potree.js"></script>

    <script>
        // 创建一个Three.js场景
        var scene = new THREE.Scene();

        // 创建一个Three.js相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 10);

        // 创建一个Three.js渲染器
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('potree_container').appendChild(renderer.domElement);

        // 创建Potree视图器
        var viewer = new Potree.Viewer(document.getElementById("potree_container"));
        viewer.setEDLEnabled(true);
        viewer.setFOV(60);
        viewer.setPointBudget(1 * 1000 * 1000);

		// 创建点云对象和全景图对象
        var pointcloud;
        var panoramaMesh;

        // 加载点云数据
        Potree.loadPointCloud("E:\\桌面\\partical\\pointcloud\\metadata.json", "pointcloud", e => {
            pointcloud = e.pointcloud;

            // 添加点云到Potree视图器中
            viewer.scene.addPointCloud(pointcloud);

            // 自适应相机参数
            var controls = viewer.getControls(viewer.scene.view);
            controls.setGetPosition(e.position);
            controls.setGetTarget(e.target);
            controls.setGetRadius(e.radius);
            controls.update(0);

            // 渲染Potree视图器
            animate();
        });

        // 加载全景图像
        var panoramaTexture = new THREE.TextureLoader().load("00000-pano.jpg");

        // 创建全景球体并添加到场景中
        var panoramaGeometry = new THREE.SphereBufferGeometry(500, 60, 40);
        panoramaGeometry.scale(-1, 1, 1);
        var panoramaMaterial = new THREE.MeshBasicMaterial({ map: panoramaTexture, side: THREE.DoubleSide });
        panoramaMesh = new THREE.Mesh(panoramaGeometry, panoramaMaterial);

       // 声明全局变量来跟踪当前显示的内容
        var isPointCloudVisible = true;

        function showPointCloud() {
            if (!isPointCloudVisible) {
             // 显示点云并隐藏全景图
                viewer.scene.addPointCloud(pointcloud);
            if (scene.contains(panoramaMesh)) {
                scene.remove(panoramaMesh);
            }
            isPointCloudVisible = true;
            }
        }

        function showPanorama() {
            if (isPointCloudVisible) {
            // 隐藏点云并显示全景图
            viewer.scene.removePointCloud(pointcloud);
            if (!scene.contains(panoramaMesh)) {
                scene.add(panoramaMesh);
            }
            isPointCloudVisible = false;
            }
        }


        // 相机控制器
        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        function animate() {
            requestAnimationFrame(animate);

            // 更新控制器
            controls.update();

            // 渲染场景
            renderer.render(scene, camera);
        }

    </script>
</body>

</html>全景图未显示