利用threejs实现3D全景图

2016-06-25 10:10:00

threejs下载位置：http://www.threejs.org
我在Facebook上看到Facebook实现了3D全景图，然后，一直很好奇，最后，我发现threejs里面有一个库竟然可以实现，一下我贴出代码：

    three.js css3d - panorama        body {            background-color: # 000000;            margin: 0;            cursor: move;            overflow: hidden;        }        a {            color: # ffffff;        }        # info {            position: absolute;            width: 100%;            color: # ffffff;            padding: 5px;            font-family: Monospace;            font-size: 13px;            font-weight: bold;            text-align: center;            z-index: 1;        }    var camera, scene, renderer;    var geometry, material, mesh;    var target = new THREE.Vector3();    var lon = 90, lat = 0;    var phi = 0, theta = 0;    var touchX, touchY;    init();    animate();    function init() {        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );        scene = new THREE.Scene();/  次数是重点说明的 * 这个sides对应的是六张图位于立体坐标轴内的位置，里面的position又包含x,y,三个轴 * 然后ratation是三个轴上的变换 */         var sides = [            {                position: [ 512, 0, 0 ], // 1                rotation: [ 0, -Math.PI / 2, 0 ]            },            {                position: [ -512, 0, 0 ], // 2                rotation: [ 0, Math.PI / 2, 0 ]            },            {                position: [ 0,  512, 0 ], // 3                rotation: [ Math.PI / 2, 0, Math.PI ]            },            {                position: [ 0, -512, 0 ], // 4                rotation: [ - Math.PI / 2, 0, Math.PI ]            },            {                position: [ 0, 0,  512 ], // 5                rotation: [ 0, Math.PI, 0 ]            },            {                position: [ 0, 0, -512 ], // 6                rotation: [ 0, 0, 0 ]            }        ];        var canvas = document.createElement('canvas');        var image = document.createElement('img');        image.src = 'picture/360photos.jpg'; // 画图，这里引入的这张图片，是一张图上集合了6张图片        image.height = 6144;        image.width = 1024;        canvas.width = 1024;        canvas.height = 1024;        // 这里有判断image.onload，这里是判断创建的image节点是否把引入的图片加载进来            image.onload = function() {                for ( var i = 0; i

以上，我把重要的说明点都写上了注释，然后，注意，我这里的图片是去facebook上下载下来的，我把Facebook上的图片手动进行了左右翻转实现的程序，如果不需要手动翻转，如果是渲染Facebook上的图片的话，需要把Facebook的图片用程序进行翻转再分割才能渲染出正常的图片，否则渲染出来的全景是不正常的。
我下面附上的图很大，宽度是1024像素的，然后高度是1024像素*6；原图是这张图的左右翻转。
下面，我附上图，此图来自简书上传的，可能会有盗链导致加载不出来：

关键字：three.js, 程序员, facebook, threejs

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！