正方体全景图

作者: lesliefang | 来源:发表于2017-09-13 15:11 被阅读68次

正方体全景图
流浪画家追逐的梦——盛世文藏网签约画家邓关心笔中的情怀
全景图全景球处理工具
小学数学最难的13种典型题
消息轨迹全景图详解-独门秘籍
android vr全景图片初探（仿微博360全景图片的实现）
一、正方体展开图
全景开发-图片制作-利用3DMax导出全景图
iPad绘画-芦苇
毕业规划全景图

正方体全景图是把一个全景图切成 6 张图片分别贴到一个正方体的 6 个面上。相机放在正方体中间，旋转时改变相机的指向即可。

texture.png

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正方体全景图</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>

<script>
    var scene, camera, renderer;
    var controls;

    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 0.01;

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

        controls = new THREE.OrbitControls(camera);
        controls.enableZoom = false;
        controls.enablePan = false;

        var textures = getTexturesFromFile('sun_temple_stripe.jpg', 6);
        var materials = [];

        for (var i = 0; i < 6; i++) {
            materials.push(new THREE.MeshBasicMaterial({map: textures[i]}));
        }

        // 经测试 6 个面的排列顺序是 左右 上下 前后  （从屏幕里面往  Z 轴正方向看）
        var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), materials);
        cube.applyMatrix(new THREE.Matrix4().makeScale(1, 1, -1));
        scene.add(cube);

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

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

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

    function getTexturesFromFile(imgUrl, tilesNum) {
        var textures = [];
        for (var i = 0; i < tilesNum; i++) {
            textures[i] = new THREE.Texture();
        }

        var image = new Image();
        image.onload = function () {
            var canvas, context;
            var tileWidth = image.height;

            for (var i = 0; i < textures.length; i++) {
                canvas = document.createElement('canvas');
                context = canvas.getContext('2d');
                canvas.width = tileWidth;
                canvas.height = tileWidth;
                context.drawImage(image, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth);
                textures[i].image = canvas;
                textures[i].needsUpdate = true;
            }
        };

        image.src = imgUrl;
        return textures;
    }
</script>
</body>
</html>