Goldberg/importFromSceneOldFile.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
 <!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 light1 = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, -1, 0), scene);

	light.intensity = 0.5;
	light1.intensity = 0.5;

	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);

	BABYLON.SceneLoader.ImportMeshAsync("", "https://raw.githubusercontent.com/BabylonJSGuide/Goldberg/main/", "gbtest.babylon").then((result) =>{
		const goldberg = result.meshes[0];

        console.log(goldberg.goldbergData);

        for (let f = 12; f < 12 + goldberg.goldbergData.nbFacesAtPole ; f++) {
			const box = BABYLON.MeshBuilder.CreateBox("", {height: 1, size: 0.015});
			goldberg.placeOnGoldbergFaceAt(box, f, new BABYLON.Vector3(0, 0.55, 0));
		}

		const radius = 1 / 2;
		let center = new BABYLON.Vector2(1 / 2, 1 / 2);

		const uvset = [];

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

		for (let f = 12; f < goldberg.goldbergData.nbSharedFaces + goldberg.goldbergData.nbUnsharedFaces; f++) {
			uvset.push([f, f, center.clone(), radius, f * Math.PI / 3]);
		}

		center = new BABYLON.Vector2(1 / 8, 1 / 8);
		uvset.push([0, 11, center.clone(), 1 / 8, 0]);
		goldberg.setGoldbergFaceUVs(uvset);
		goldberg.material = new BABYLON.StandardMaterial("");

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

    })

	return scene;
};

        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>