效果图

全景图下载网站

krpano.scenegram.cn/
单张全景图切割为6张工具

不能直接用,需要用下面网站,格式转化一下
链接：pan.baidu.com/s/1JmNkUSGX… 提取码：6666
图片格式转换器

www.gaitubao.com/jpg-gif-png…
代码

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

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* // 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.module.js"></script>
</head>

<body>
    <script>
        /**
         * 创建场景对象
         */
        var camera;
        var renderer;
        var scene;

        init();
        animate();

        function init() {

            // var document.body = document.getElementById('document.body');

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);
            camera.position.set(0, 0, 0);

            var materials = [];
            var texturepx = new THREE.TextureLoader().load('./img/3.jpg');
            materials.push(new THREE.MeshBasicMaterial({ map: texturepx }));
            var texturenx = new THREE.TextureLoader().load('./img/1.jpg');
            materials.push(new THREE.MeshBasicMaterial({ map: texturenx }));
            var texturepy = new THREE.TextureLoader().load('./img/6.jpg');
            materials.push(new THREE.MeshBasicMaterial({ map: texturepy }));
            var textureny = new THREE.TextureLoader().load('./img/2.jpg');
            materials.push(new THREE.MeshBasicMaterial({ map: textureny }));
            var texturepz = new THREE.TextureLoader().load('./img/4.jpg');
            materials.push(new THREE.MeshBasicMaterial({ map: texturepz }));
            var texturenz = new THREE.TextureLoader().load('./img/5.jpg');
            materials.push(new THREE.MeshBasicMaterial({ map: texturenz }));

            var skyBox = new THREE.Mesh(new THREE.BoxBufferGeometry(100, 100, 100), materials);
            skyBox.geometry.scale(1, 1, - 1);
            scene.add(skyBox);

            window.addEventListener('resize', onWindowResize, false);

            var bMouseDown = false;
            var x = -1;
            var y = -1;
            document.body.onmousedown = function (event) {
                event.preventDefault();
                x = event.clientX;
                y = event.clientY;
                bMouseDown = true;
            }
            document.body.onmouseup = function (event) {
                event.preventDefault();
                bMouseDown = false;
            }
            document.body.onmousemove = function (event) {
                event.preventDefault();
                if (bMouseDown) {
                    skyBox.rotation.y += -0.005 * (event.clientX - x);
                    skyBox.rotation.x += -0.005 * (event.clientY - y);
                    if (skyBox.rotation.x > Math.PI / 2) {
                        skyBox.rotation.x = Math.PI / 2
                    }
                    if (skyBox.rotation.x < -Math.PI / 2) {
                        skyBox.rotation.x = -Math.PI / 2
                    }
                    x = event.clientX;
                    y = event.clientY;
                }
            }
            document.body.onmousewheel = function (event) {
                event.preventDefault();
                if (event.wheelDelta != 0) {
                    camera.fov += event.wheelDelta > 0 ? 1 : -1;
                    if (camera.fov > 150) {
                        camera.fov = 150;
                    }
                    else if (camera.fov < 30) {
                        camera.fov = 30;
                    }
                    camera.updateProjectionMatrix();
                }
            }
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
    </script>
</body>

</html>
three.js全景图

效果图

全景图下载网站

单张全景图切割为6张工具

图片格式转换器

代码
