SweetAR/basic.html at master · gtjeffw/SweetAR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html lang="en">
    <head>
        <title>Argon Basic AR Web App</title>
        <link rel="apple-touch-icon" href="assets/sample_icon_57x57.png" />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
        <meta name="arenabled" />
        <script>


            var myAppController =
            {

            /*
                geoObject : null,

                cube : null,


                createContent : function()
                {


                    var cubeGeometry, cubeMaterial;
                    cubeGeometry = new THREE.CubeGeometry(100, 100, 100, 2, 2, 2);
                    cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFF00, shading: THREE.FlatShading, overdraw: true });

                    cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
                    cube.position.x = 0;
                    cube.position.y = 0;
                    cube.position.z = 0;
                    cube.scale.x = 10;
                    cube.scale.y = 10;
                    cube.scale.z = 10;

                    var ori = new THREE.Object3D();
                    ori.position.x = 0;
                    ori.position.y = 0;
                    ori.position.z = 500.0;
                    ori.scale.x = 1;
                    ori.scale.y = 1;
                    ori.scale.z = 1;

                    geoObject = ARGON.createGeoObject(33.7772722222222,-84.3895361111111, 0);
                    geoObject.add( cube );

                    ARGON.World.add( geoObject );
                },

                */
                onArgonReady : function()
                {
                    //smyAppController.createContent();
                    //ARGON.loadDataset("/vuforia/StonesAndChips.xml");

					ARGON.loadDataset("http://argon.gatech.edu/demos/StonesAndChips.xml");

					//ARGON.loadDataset("http://www2.imtc.gatech.edu/jeff/sweetar/vuforia/StonesAndChips.xml");

                },

                onDataSetLoaded : function(event)
                {
                    var dataset, stonesTarget, trackedObject;
                    //var redCube, redMaterial, redGeometry;

                    dataset      = event.dataset;
                    stonesTarget = dataset.targets["stones"];

                    if (stonesTarget)
                    {
                        trackedObject        = new ARGON.TrackedObject();
                        trackedObject.name   = "AttachedToStonesTarget";

                        trackedObject.autoHideAfterFrames = 1;
                        trackedObject.setTarget( stonesTarget );

                        //redGeometry = new THREE.CubeGeometry(100, 100, 100, 2, 2, 2);
                        //redMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000, shading: THREE.FlatShading, overdraw: true });
                        //redCube = new THREE.Mesh( redGeometry, redMaterial );
                        //redCube.position.z = 50.0;

                        var divEl = document.createElement('div');
                        divEl.id = "cssContent";
                        divEl.style.width = "100px";
                        divEl.style.height = "100px";
                        divEl.style.backgroundColor = "red";
                        divEl.style.position = 'absolute';
                        divEl.style.fontSize = "16px";
                        divEl.innerText = "AR + HTML5";

                        var cssObject;
                        cssObject = new THREE.CSSObject(divEl);
                        cssObject.width = 50;
                        cssObject.height = 50;
                        cssObject.position.x = 0.0;
                        cssObject.position.y = 0.0;
                        cssObject.position.z = 0.0;
                        cssObject.visible = false;

                        //redCube.add(cssObject);

                        //trackedObject.add( redCube );

                        trackedObject.add( cssObject );
                    }
                }
            };

            document.addEventListener("AR.DataSetLoadedEvent", myAppController.onDataSetLoaded);
			document.addEventListener("AR.ArgonReadyEvent", myAppController.onArgonReady);

        </script>
    </head>
    <body>
    	<script src="jslog/jslog.js"></script>
        <script src="http://argon.gatech.edu/argon_o.js"></script>
    </body>


</html>