Model-Editor/index.html at master · ElsaXing/Model-Editor · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Model Editor</title>
    <link rel="stylesheet" href="css/index.css" >
</head>
<body>
    <div id="container"></div>
    <a href="ModelViewPage.html" id="linkButton">Model View Page</a>
    <div id="menuBar">
        <form>
            <input type="file" id="btn_inputModel"><br>
            <button type="button" id="btn_defaultBackground" onclick="defaultBackground()">add default background</button><br>
            <button type="button" class="btn_addMesh" onclick="addPreMesh('cube')">cube</button>
            <button type="button" class="btn_addMesh" onclick="addPreMesh('sphere')">sphere</button>
            <button type="button" class="btn_addMesh" onclick="addPreMesh('cylinder')">cylinder</button><br>
            <button type="button" id="btn_saveScene" onclick="addDataToDatabase()">save scene</button>
            <button type="button" id="btn_getScene" onclick="getDataFromDatabase()">get scene</button>
            <!--<button type="button" id="btn_clearScene" onclick="clearScene()">clear scene</button>-->
        </form>
        <div id="menu"></div>
    </div>


    <script src="js/three.js"></script>
    <script src="js/TransformControls.js"></script>
    <script src="js/EditorControls.js"></script>
    <script src="js/ColladaLoader.js"></script>


    <script src="js/basicScene.js"></script>
    <script src="js/loadModel.js"></script>
    <script src="js/editScene.js"></script>
    <script src="js/getDataFromDatabase.js"></script>
    <script src="js/modelData.js"></script>
    <script src="js/transformForEditPage.js"></script>


    <script>
        var scene,
                defaultCamera,
                renderer,
                light,
                backgroundLight,
                skyLight;
        var DEFAULT,
                userSceneElements,
                sensingElements;
        var transformGroup;
        var groundGeo,
                groundMat,
                ground,
                skyGeo,
                skyMat,
                sky;
        var INTERSECTED;
        var deletedObject = [];
        var transformControls;
        var container =document.getElementById('container');


        //set up renderer
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor(0xccffff);
        renderer.setSize(window.innerWidth * 2/3, window.innerHeight * 3/4);
        container.appendChild(renderer.domElement);


        if (!localStorage.getItem('scene')) {
            init();

        } else {
            init();
//            getDataFromDatabase();
        }
        transform();
        //render
        function animate () {
            requestAnimationFrame(animate );
            transformControls.update();
            render();
        }

        function render () {
            renderer.render(scene,defaultCamera);
        }

        animate();

    </script>

</body>
</html>