360全景图three.js

1.three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。

2.three.js制作官网demo全景图

一.引入js文件

<script src="three.js-dev/build/three.js"></script>
<script src="three.js-dev/examples/js/renderers/Projector.js"></script>
<script src="three.js-dev/examples/js/renderers/CanvasRenderer.js"></script>

二.使用pano2vr软件制作6张全景图

官网demo中需要6张图片, 这里使用pano2vr生成, 但可以用, 网上搜索都是千篇一律的使用blender, 不会搞

在官网demo的全景图中的6张图在, 我在ps里还原成 (https://threejs.org/examples/?q=pano#canvas_geometry_panorama)

360全景图three.js

nx.jpg ==> 左1
pz.jpg ==> 左2
px.jpg ==> 左3
nz.jpg ==> 左4
py.jpg ==> 上5
ny.jpg ==> 下6
1.pano生成的顶部图,在ps中先将py逆时针处理90度
2.pano生成的顶部图, 在ps中先将ny顺时针处理90度

然后在pano2vr生成的6张图分别按照以上命名, py.jpg与ny.jpg需要重新处理下

三.复制官网demo的panorama例子

var camera, scene, renderer;

var texture_placeholder,
isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 90, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0,
target = new THREE.Vector3();

init();
animate();

function init() {

    var container, mesh;

    container = document.getElementById( 'container' );

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

    scene = new THREE.Scene();

    texture_placeholder = document.createElement( 'canvas' );
    texture_placeholder.width = 128;
    texture_placeholder.height = 128;

    var context = texture_placeholder.getContext( '2d' );
    context.fillStyle = 'rgb( 200, 200, 200 )';
    context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );

    var materials = [

        loadTexture( 'images/skybox/px.jpg' ), // right
        loadTexture( 'images/skybox/nx.jpg' ), // left

        /* pano生成的顶部图, 底部图, 在ps中先将py逆时针处理90度 */
        loadTexture( 'images/skybox/py.jpg' ), // top

        /* pano生成的顶部图, 底部图, 在ps中先将ny顺时针处理90度 */
        loadTexture( 'images/skybox/ny.jpg' ), // bottom

        loadTexture( 'images/skybox/pz.jpg' ), // back
        loadTexture( 'images/skybox/nz.jpg' )  // front

    ];

    mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), materials );
    mesh.scale.x = - 1;
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    document.addEventListener( 'wheel', onDocumentMouseWheel, false );

    document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    document.addEventListener( 'touchmove', onDocumentTouchMove, false );

    //

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

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function loadTexture( path ) {

    var texture = new THREE.Texture( texture_placeholder );
    var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );

    var image = new Image();
    image.onload = function () {

        texture.image = this;
        texture.needsUpdate = true;

    };
    image.src = path;

    return material;

}

function onDocumentMouseDown( event ) {

    event.preventDefault();

    isUserInteracting = true;

    onPointerDownPointerX = event.clientX;
    onPointerDownPointerY = event.clientY;

    onPointerDownLon = lon;
    onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

    if ( isUserInteracting === true ) {

        lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
        lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

    }

}

function onDocumentMouseUp( event ) {

    isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

    var fov = camera.fov + event.deltaY * 0.05;

    camera.fov = THREE.Math.clamp( fov, 10, 75 );

    camera.updateProjectionMatrix();

}


function onDocumentTouchStart( event ) {

    if ( event.touches.length == 1 ) {

        event.preventDefault();

        onPointerDownPointerX = event.touches[ 0 ].pageX;
        onPointerDownPointerY = event.touches[ 0 ].pageY;

        onPointerDownLon = lon;
        onPointerDownLat = lat;

    }

}

function onDocumentTouchMove( event ) {

    if ( event.touches.length == 1 ) {

        event.preventDefault();

        lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
        lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

    }

}

function animate() {

    requestAnimationFrame( animate );
    update();

}

function update() {

    // 自动旋转
    // if ( isUserInteracting === false ) {

    //     lon += 0.1;

    // }

    lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - lat );
    theta = THREE.Math.degToRad( lon );

    target.x = 500 * Math.sin( phi ) * Math.cos( theta );
    target.y = 500 * Math.cos( phi );
    target.z = 500 * Math.sin( phi ) * Math.sin( theta );

    camera.lookAt( target );

    renderer.render( scene, camera );

}

360全景图three.js

相关推荐