Goldberg/gbexportScene.html at main · BabylonJSGuide/Goldberg · 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
124
125
126
127
128
129
130
131
132
133
134
135
 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>

        <script src="babylon.max.js"></script>
		<script src="babylon.gui.js"></script>

    </head>

   <body>

    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->

    <script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
const createScene = function () {
	const scene = new BABYLON.Scene(engine);

    const light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);

	const camera = new BABYLON.ArcRotateCamera("camera1",  -Math.PI / 2, Math.PI / 2.2, 5, new BABYLON.Vector3(0, 0, 0), scene);
	camera.attachControl(canvas, true);

    let m = 7;
    let n = 3;

	const radius = 1 / 8;

    const makeGoldberg = function(m, n) {
        const goldberg = BABYLON.MeshBuilder.CreateGoldberg("g", {m: m, n: n});

	    let center = new BABYLON.Vector2(3 / 8, 1 / 8);

	    const uvset = [];

	    uvset.push([0, goldberg.goldbergData.nbSharedFaces + goldberg.goldbergData.nbUnsharedFaces - 1, center.clone(), radius, 0]);

	    for (let k = 0; k < 12; k++) {
		    const row = 3 - Math.floor( k / 4);
		    const col = k % 4;
		    center.x = (2 * col + 1) / 8;
		    center.y = (2 * row + 1) / 8;
		    uvset.push([k, k, center.clone(), radius, 0]);
		    uvset.push([goldberg.relatedGoldbergFace(k, 0), goldberg.relatedGoldbergFace(k, goldberg.nbFacesAtPole), center.clone(), radius, 0]);
		    center.x = 5 / 8;
		    center.y = 5 / 8;
		    uvset.push([goldberg.relatedGoldbergFace(0), goldberg.relatedGoldbergFace(goldberg.goldbergData.nbSharedFaces), center.clone(), radius, 0]);
	    }

	    goldberg.setGoldbergFaceUVs(uvset);

	    goldberg.material = new BABYLON.StandardMaterial("");
	    goldberg.material.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/hexworld.jpg");

        return goldberg;
    }

    let g = makeGoldberg(m, n);

	if (confirm('Do you want to download the scene?')) {
		doDownload('scene', scene);
	} else {
	    // Do nothing!
	}


	return scene;
};

var objectUrl;
function doDownload(filename, scene) {
    if(objectUrl) {
        window.URL.revokeObjectURL(objectUrl);
    }

    var serializedScene = BABYLON.SceneSerializer.Serialize(scene);

    var strMesh = JSON.stringify(serializedScene);

    if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9){
        filename += ".babylon";
    }

	var blob = new Blob ( [ strMesh ], { type : "octet/stream" } );

    // turn blob into an object URL; saved as a member, so can be cleaned out later
    objectUrl = (window.webkitURL || window.URL).createObjectURL(blob);

    var link = window.document.createElement('a');
    link.href = objectUrl;
    link.download = filename;
    var click = document.createEvent("MouseEvents");
    click.initEvent("click", true, false);
    link.dispatchEvent(click);
}


        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>

   </body>

</html>