examples/web_mix_reality.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>增强现实</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;
            padding: 0px;
            overflow: hidden;
        }
        a {
            color: #ffffff;
        }

    </style>

</head>
<body>
<button id="takePhoto" style="position: absolute;bottom:10px;left: 50%">takePhoto</button>
<div id="container"></div>
<script src="../build/three.js"></script>
<script src="../build/mxreality.js?id=cc"></script>
<script>

    window.onload=function () {
        init();//初始化
    }
    function init() {
        var scene, renderer;
        var container, mesh;
        container = document.getElementById( 'container' );
        renderer = new THREE.WebGLRenderer();
        scene = new THREE.Scene();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );
        var ar=new AR(scene,renderer,container);
        ar.openAudio=false;
        ar.cameraIndex=1;

        ar.init();//初始化AR
        //ar.showVedio();
        ar.play();

        /*document.getElementById("showpic").addEventListener("click",function () {
            alert(ar.video);
            ar.video.play();
        },false);*/
        var envLight=new THREE.AmbientLight(0xffffff,1);
        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( 50, 60, 40 );

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

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

        function animate() {
            requestAnimationFrame(animate);
            mesh.rotation.y +=0.01;

        }
        animate();
        document.getElementById('takePhoto').addEventListener("click",function () {
            var wi = window.open('about:blank', '_blank');
            ar.takeScreenShot(function (screenshot) {
                wi.location.href=screenshot;
            });
        },false)

    }


</script>

</body>
</html>