examples/pano_scene_earth.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>VR 地球</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px; width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family:Monospace;
            font-size:13px;
            font-weight: bold;
            text-align:center;
        }

        a {
            color: #ffffff;
        }
    </style>

</head>
<body>

<div id="container"></div>
<div id="info">
</div>

<script src="../build/three.js"></script>
<script src="./js/controls/OrbitControls.js"></script>
<script src="../build/mxreality.js"></script>
<script>

    var scene, renderer;
    var container, mesh;
    var VR;
    init();//初始化
    animate();//动画

    function init() {
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer();
        container = document.getElementById( 'container' );
        VR=new VR(scene,renderer,container);
        VR.init(function () {
            
        });

        var envLight=new THREE.AmbientLight(0xffffff,0.5);
        scene.add(envLight);

        light = new THREE.DirectionalLight(0xffffff, 1.0, 0);//设置平行光源
        light.position.set( 400, 700, -800 );//设置光源向量
        scene.add( light );

        var geometry = new THREE.SphereGeometry( 5, 60, 40 );

        var material = new THREE.MeshLambertMaterial( {
            map: new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' )
        } );

        mesh = new THREE.Mesh( geometry, material );
        mesh.position.set(12,0,12);
        scene.add( mesh );


        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );


    }
    function animate() {
        //document.getElementById("info").innerHTML ="alpha:"+parseInt(V_R._alpha)+",beta:"+parseInt(V_R._beta)+",gama:"+parseInt(V_R._gamma)+",gammaFace:"+V_R._gammaFace;
        requestAnimationFrame( animate );
        update();

    }


    function update() {
        mesh.rotation.y += 0.01;
    }

</script>

</body>
</html>