├── .github └── workflows │ └── dotnet-desktop.yml ├── .gitignore ├── Assets └── Blazor3D.jpg ├── Examples ├── Blazor3D.Examples.Server │ ├── App.razor │ ├── Blazor3D.Examples.Server.csproj │ ├── Pages │ │ ├── Error.cshtml │ │ ├── Error.cshtml.cs │ │ ├── Example01.razor │ │ ├── Example02.razor │ │ ├── Example03.razor │ │ ├── Example04.razor │ │ ├── Example05.razor │ │ ├── Example06.razor │ │ ├── Index.razor │ │ ├── _Host.cshtml │ │ └── _Layout.cshtml │ ├── Program.cs │ ├── Properties │ │ └── launchSettings.json │ ├── Shared │ │ ├── MainLayout.razor │ │ ├── MainLayout.razor.css │ │ ├── NavMenu.razor │ │ └── NavMenu.razor.css │ ├── _Imports.razor │ ├── appsettings.Development.json │ ├── appsettings.json │ └── wwwroot │ │ ├── assets │ │ └── blazor3d.glb │ │ ├── css │ │ ├── bootstrap │ │ │ ├── bootstrap.min.css │ │ │ └── bootstrap.min.css.map │ │ ├── open-iconic │ │ │ ├── FONT-LICENSE │ │ │ ├── ICON-LICENSE │ │ │ ├── README.md │ │ │ └── font │ │ │ │ ├── css │ │ │ │ └── open-iconic-bootstrap.min.css │ │ │ │ └── fonts │ │ │ │ ├── open-iconic.eot │ │ │ │ ├── open-iconic.otf │ │ │ │ ├── open-iconic.svg │ │ │ │ ├── open-iconic.ttf │ │ │ │ └── open-iconic.woff │ │ └── site.css │ │ └── favicon.ico ├── Blazor3D.Examples.WebAsm │ ├── App.razor │ ├── Blazor3D.Examples.WebAsm.csproj │ ├── Pages │ │ ├── Example01.razor │ │ ├── Example02.razor │ │ ├── Example03.razor │ │ ├── Example04.razor │ │ ├── Example05.razor │ │ ├── Example06.razor │ │ └── Index.razor │ ├── Program.cs │ ├── Properties │ │ └── launchSettings.json │ ├── Shared │ │ ├── MainLayout.razor │ │ ├── MainLayout.razor.css │ │ ├── NavMenu.razor │ │ └── NavMenu.razor.css │ ├── _Imports.razor │ └── wwwroot │ │ ├── assets │ │ └── blazor3d.glb │ │ ├── css │ │ ├── app.css │ │ ├── bootstrap │ │ │ ├── bootstrap.min.css │ │ │ └── bootstrap.min.css.map │ │ └── open-iconic │ │ │ ├── FONT-LICENSE │ │ │ ├── ICON-LICENSE │ │ │ ├── README.md │ │ │ └── font │ │ │ ├── css │ │ │ └── open-iconic-bootstrap.min.css │ │ │ └── fonts │ │ │ ├── open-iconic.eot │ │ │ ├── open-iconic.otf │ │ │ ├── open-iconic.svg │ │ │ ├── open-iconic.ttf │ │ │ └── open-iconic.woff │ │ ├── favicon.ico │ │ └── index.html └── Blazor3D.Examples.sln ├── LICENSE ├── Readme.md └── Tutorials ├── Blazor3DTutorials.sln └── GettingStarted ├── Server ├── .vscode │ ├── launch.json │ └── tasks.json ├── App.razor ├── Blazor3DGettingStartedSrv.csproj ├── Pages │ ├── Error.cshtml │ ├── Error.cshtml.cs │ ├── Index.razor │ ├── _Host.cshtml │ └── _Layout.cshtml ├── Program.cs ├── Properties │ └── launchSettings.json ├── Shared │ ├── MainLayout.razor │ ├── MainLayout.razor.css │ ├── NavMenu.razor │ └── NavMenu.razor.css ├── _Imports.razor ├── appsettings.Development.json ├── appsettings.json └── wwwroot │ ├── css │ ├── bootstrap │ │ ├── bootstrap.min.css │ │ └── bootstrap.min.css.map │ ├── open-iconic │ │ ├── FONT-LICENSE │ │ ├── ICON-LICENSE │ │ ├── README.md │ │ └── font │ │ │ ├── css │ │ │ └── open-iconic-bootstrap.min.css │ │ │ └── fonts │ │ │ ├── open-iconic.eot │ │ │ ├── open-iconic.otf │ │ │ ├── open-iconic.svg │ │ │ ├── open-iconic.ttf │ │ │ └── open-iconic.woff │ └── site.css │ └── favicon.ico └── WASM ├── .vscode ├── launch.json └── tasks.json ├── App.razor ├── Blazor3DGettingStartedWASM.csproj ├── Pages └── Index.razor ├── Program.cs ├── Properties └── launchSettings.json ├── Shared ├── MainLayout.razor ├── MainLayout.razor.css ├── NavMenu.razor └── NavMenu.razor.css ├── _Imports.razor └── wwwroot ├── css ├── app.css ├── bootstrap │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── open-iconic │ ├── FONT-LICENSE │ ├── ICON-LICENSE │ ├── README.md │ └── font │ ├── css │ └── open-iconic-bootstrap.min.css │ └── fonts │ ├── open-iconic.eot │ ├── open-iconic.otf │ ├── open-iconic.svg │ ├── open-iconic.ttf │ └── open-iconic.woff ├── favicon.ico ├── icon-192.png ├── index.html └── sample-data └── weather.json /.github/workflows/dotnet-desktop.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | # Run workflow on every push to the master branch 4 | on: 5 | push: 6 | branches: [ main ] 7 | 8 | jobs: 9 | deploy-to-github-pages: 10 | # use ubuntu-latest image to run steps on 11 | runs-on: ubuntu-latest 12 | steps: 13 | # uses GitHub's checkout action to checkout code form the master branch 14 | - uses: actions/checkout@v2 15 | 16 | # sets up .NET Core SDK 3.1 17 | - name: Setup .NET Core SDK 18 | uses: actions/setup-dotnet@v1 19 | with: 20 | dotnet-version: 6.x 21 | 22 | # publishes Blazor project to the release-folder 23 | - name: Publish .NET Core Project 24 | run: dotnet publish ./Examples/Blazor3D.Examples.WebAsm/Blazor3D.Examples.WebAsm.csproj -c Release -o release --nologo 25 | 26 | # changes the base-tag in index.html from '/' to 'Blazor3D' to match GitHub Pages repository subdirectory 27 | - name: Change base-tag in index.html from / to Blazor3D 28 | run: sed -i 's///g' release/wwwroot/index.html 29 | 30 | # copy index.html to 404.html to serve the same file when a file is not found 31 | - name: copy index.html to 404.html 32 | run: cp release/wwwroot/index.html release/wwwroot/404.html 33 | 34 | # add .nojekyll file to tell GitHub pages to not treat this as a Jekyll project. (Allow files and folders starting with an underscore) 35 | - name: Add .nojekyll file 36 | run: touch release/wwwroot/.nojekyll 37 | 38 | - name: Commit wwwroot to GitHub Pages 39 | uses: JamesIves/github-pages-deploy-action@3.7.1 40 | with: 41 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 42 | BRANCH: gh-pages 43 | FOLDER: release/wwwroot 44 | -------------------------------------------------------------------------------- /Assets/Blazor3D.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Assets/Blazor3D.jpg -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Blazor3D.Examples.Server.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | net6.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | PreserveNewest 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/Error.cshtml: -------------------------------------------------------------------------------- 1 | @page 2 | @model Blazor3D.Examples.Server.Pages.ErrorModel 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Error 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Error.

19 |

An error occurred while processing your request.

20 | 21 | @if (Model.ShowRequestId) 22 | { 23 |

24 | Request ID: @Model.RequestId 25 |

26 | } 27 | 28 |

Development Mode

29 |

30 | Swapping to the Development environment displays detailed information about the error that occurred. 31 |

32 |

33 | The Development environment shouldn't be enabled for deployed applications. 34 | It can result in displaying sensitive information from exceptions to end users. 35 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 36 | and restarting the app. 37 |

38 |
39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/Error.cshtml.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Mvc; 2 | using Microsoft.AspNetCore.Mvc.RazorPages; 3 | using System.Diagnostics; 4 | 5 | namespace Blazor3D.Examples.Server.Pages 6 | { 7 | [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] 8 | [IgnoreAntiforgeryToken] 9 | public class ErrorModel : PageModel 10 | { 11 | public string? RequestId { get; set; } 12 | 13 | public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); 14 | 15 | private readonly ILogger _logger; 16 | 17 | public ErrorModel(ILogger logger) 18 | { 19 | _logger = logger; 20 | } 21 | 22 | public void OnGet() 23 | { 24 | RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier; 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/Example02.razor: -------------------------------------------------------------------------------- 1 | @page "/example02" 2 | @implements IDisposable 3 | 4 |

Example02

5 | 6 |
7 | This example shows how to: 8 |
    9 |
  • Control the Blazor3D Viewer component's dimensions with CSS and HTML element style
    • 10 |
  • Add user-defined scene and lights
    • 11 |
  • Import obj, Collada, Fbx, Gltf or Stl model on button click asyncronously
    • 12 |
  • Control loaded object by its uuid with ObjectLoaded event
    • 13 |
  • Import file when all required JS modules already loaded (inital load)
    • 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |

23 |

24 |

25 |

26 |

27 |

28 |
29 |

30 |

31 |
32 | 33 |
@msg
34 |
35 | 36 | @code { 37 | private Viewer View3D1 = null!; 38 | private Scene scene = new Scene(); 39 | private Guid loadedObjectGuid = Guid.NewGuid(); 40 | private string msg = string.Empty; 41 | 42 | public void Dispose() 43 | { 44 | View3D1.ObjectLoaded -= OnObjectLoaded; 45 | View3D1.JsModuleLoaded -= OnJsModuleLoaded; 46 | } 47 | 48 | protected override Task OnInitializedAsync() 49 | { 50 | AddLights(); 51 | return base.OnInitializedAsync(); 52 | } 53 | 54 | private void AddLights(){ 55 | scene.Add(new AmbientLight()); 56 | scene.Add(new PointLight() 57 | { 58 | Intensity = 0.5f, 59 | Position = new Vector3(100, 200, 100) 60 | }); 61 | scene.Add(new PointLight() 62 | { 63 | Intensity = 1f, 64 | Position = new Vector3(5, 5, 5) 65 | }); 66 | } 67 | 68 | protected override Task OnAfterRenderAsync(bool firstRender) 69 | { 70 | if (firstRender) 71 | { 72 | // subscribe events only once 73 | View3D1.ObjectLoaded += OnObjectLoaded; 74 | View3D1.JsModuleLoaded += OnJsModuleLoaded; 75 | } 76 | 77 | return base.OnAfterRenderAsync(firstRender); 78 | } 79 | 80 | private async Task OnJsModuleLoaded() 81 | { 82 | var settings = new ImportSettings 83 | { 84 | Format = Import3DFormats.Gltf, 85 | FileURL = "/assets/blazor3d.glb", 86 | }; 87 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 88 | await View3D1.SetCameraPositionAsync(new Vector3(0, 0, 1), new Vector3(0, 0, 0)); 89 | } 90 | 91 | private async Task OnLoadObjButtonClick() 92 | { 93 | // if you need to control the loaded object uuid, generate it here. 94 | loadedObjectGuid = Guid.NewGuid(); 95 | var settings = new ImportSettings 96 | { 97 | Format = Import3DFormats.Obj,//choose appropriate format 98 | FileURL = "https://threejs.org/examples/models/obj/male02/male02.obj",// link to your model file 99 | TextureURL = "https://threejs.org/examples/textures/uv_grid_opengl.jpg", // link to the texture or skip this, 100 | Uuid = loadedObjectGuid //// skip this, or set null if you don't care the uuid of loaded mesh or group 101 | }; 102 | await View3D1.Import3DModelAsync(settings); 103 | 104 | // set camera position to view your loaded model 105 | await View3D1.SetCameraPositionAsync( 106 | new Vector3(0, 100, 250),// camera position 107 | new Vector3(0, 50, 0));// optional camera target 108 | } 109 | 110 | private async Task OnLoadObjNoTexturesButtonClick() 111 | { 112 | var settings = new ImportSettings 113 | { 114 | Format = Import3DFormats.Obj, 115 | FileURL = "https://threejs.org/examples/models/obj/male02/male02.obj", 116 | }; 117 | // Also you can get the uuid of object to be imported before its loaded completely 118 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 119 | await View3D1.SetCameraPositionAsync(new Vector3(0, 100, 250), new Vector3(0, 50, 0)); 120 | } 121 | 122 | private async Task OnLoadColladaButtonClick() 123 | { 124 | var settings = new ImportSettings 125 | { 126 | Format = Import3DFormats.Collada, 127 | FileURL = "https://threejs.org/examples/models/collada/elf/elf.dae", 128 | }; 129 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 130 | await View3D1.SetCameraPositionAsync(new Vector3(0, 5, 10), new Vector3(0, 3, 0)); 131 | } 132 | 133 | private async Task OnLoadFbxButtonClick() 134 | { 135 | var settings = new ImportSettings 136 | { 137 | Format = Import3DFormats.Fbx, 138 | FileURL = "https://threejs.org/examples/models/fbx/Samba%20Dancing.fbx", 139 | }; 140 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 141 | 142 | await View3D1.SetCameraPositionAsync(new Vector3(0, 100, 250), new Vector3(0, 50, 0)); 143 | } 144 | 145 | private async Task OnLoadGltfButtonClick() 146 | { 147 | var settings = new ImportSettings 148 | { 149 | Format = Import3DFormats.Gltf, 150 | FileURL = "https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf", 151 | }; 152 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 153 | await View3D1.SetCameraPositionAsync(new Vector3(0, 1, 5), new Vector3(0, 0.5f, 0)); 154 | } 155 | private async Task OnLoadStlButtonClick() 156 | { 157 | var settings = new ImportSettings 158 | { 159 | Format = Import3DFormats.Stl, 160 | FileURL = "https://threejs.org/examples/models/stl/ascii/slotted_disk.stl", 161 | }; 162 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 163 | await View3D1.SetCameraPositionAsync(new Vector3(0, 3, 3), new Vector3(0, 1, 0)); 164 | } 165 | 166 | private Task OnObjectLoaded(Object3DArgs e) 167 | { 168 | // After object is loaded to component scene, you can locate it's C# clone in the scene.Children 169 | // At the moment, only Object3D.Uuid and Object3D.Type properties are syncronized. 170 | foreach (var item in scene.Children) 171 | { 172 | if (item.Uuid == e.UUID) 173 | { 174 | this.msg = $"loaded object with id = {e.UUID} and type {item.Type}. Initial guid was {loadedObjectGuid}"; 175 | StateHasChanged(); 176 | break; 177 | } 178 | } 179 | return Task.CompletedTask; 180 | } 181 | 182 | // this one clears scene completely. it removes all items: lights, helpers, meshes, etc. 183 | private async Task OnClearAllClick() 184 | { 185 | await View3D1.ClearSceneAsync(); 186 | AddLights(); 187 | await View3D1.UpdateScene(); 188 | } 189 | 190 | // this one removes last item in scene.Children collection. 191 | // notice, that first two items are lights 192 | private async Task OnDeleteLast() 193 | { 194 | if (scene.Children.Count > 0) 195 | { 196 | var last = scene.Children.Last(); 197 | // removes item by its unique identifier 198 | await View3D1.RemoveByUuidAsync(last.Uuid); 199 | } 200 | } 201 | } -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/Example03.razor: -------------------------------------------------------------------------------- 1 | @page "/example03" 2 | 3 |

Example03

4 |
5 | This example shows how to: 6 |
    7 |
  • Control the Blazor3D Viewer component's dimensions with CSS
    • 8 |
  • Use animated orthographic camera
    • 9 |
  • Use helpers
    • 10 |
  • Camera toggling
    • 11 |
  • Stop camera animation on start using orbit control
    • 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | @code { 26 | private Viewer View3D1 = null!; 27 | private Scene scene = new Scene(); 28 | private bool toggler = false; 29 | 30 | private Camera camera = new OrthographicCamera(left: -2, right: 2, top: 2, bottom: -2, zoom: 0.5f, near: -10) 31 | { 32 | Position = new Vector3(1, 1, 1), 33 | AnimateRotationSettings = new AnimateRotationSettings(true, 0.1, 0, 0.1, radius: 3) 34 | { 35 | StopAnimationOnOrbitControlMove = true 36 | }, 37 | LookAt = new Vector3(0.5f, 0, 0) 38 | }; 39 | 40 | protected override Task OnInitializedAsync() 41 | { 42 | FillScene(); 43 | return base.OnInitializedAsync(); 44 | } 45 | 46 | private void FillScene() 47 | { 48 | scene.Add(new AmbientLight()); 49 | 50 | var capsule = new Mesh 51 | { 52 | Geometry = new CapsuleGeometry(radius: 1, length: 2), 53 | Position = new Vector3(-3, 0, -3), 54 | Material = new MeshStandardMaterial() 55 | { 56 | Color = "blue" 57 | } 58 | }; 59 | scene.Add(capsule); 60 | scene.Add(new ArrowHelper(new Vector3(1, 1, 1), new Vector3(1, 1, 1), 3, "red", 1, 0.2)); 61 | scene.Add(new AxesHelper(5)); 62 | 63 | // Mesh for box helper must be already added to the scene. 64 | scene.Add(new BoxHelper(capsule, "black")); 65 | 66 | scene.Add(new GridHelper(2, 6, "red", "orange") 67 | { 68 | Position = new Vector3(-2, 0, 0) 69 | }); 70 | 71 | scene.Add(new PolarGridHelper(radius: 2, radials: 8, circles: 6, divisions: 32, "red", "orange") 72 | { 73 | Position = new Vector3(2, 0, 0) 74 | }); 75 | 76 | var plane = new Plane(new Vector3(-1, 1, 1), 3); 77 | scene.Add(new PlaneHelper(plane, 2, "green")); 78 | 79 | var plight = new PointLight() 80 | { 81 | Color = "red", 82 | Decay = 2, 83 | Position = new Vector3(-1, 2, -1) 84 | }; 85 | scene.Add(plight); 86 | 87 | // Point light must be already added to the scene. 88 | scene.Add(new PointLightHelper(plight, 0.5)); 89 | } 90 | 91 | private async Task OnToggleCameraClick() 92 | { 93 | if (toggler == true) 94 | { 95 | await View3D1.UpdateCamera(new OrthographicCamera(left: -2, right: 2, top: 2, bottom: -2, zoom: 0.5f, near: -10) 96 | { 97 | Position = new Vector3(1, 1, 1), 98 | AnimateRotationSettings = new AnimateRotationSettings(true, 0.1, 0, 0.1, radius: 3) 99 | { 100 | StopAnimationOnOrbitControlMove = true 101 | }, 102 | LookAt = new Vector3(0.5f, 0, 0) 103 | }); 104 | } 105 | else 106 | { 107 | await View3D1.UpdateCamera(new PerspectiveCamera 108 | { 109 | Position = new Vector3(3, 3, 3), 110 | LookAt = new Vector3(0, 0.5f, 0) 111 | }); 112 | } 113 | toggler = !toggler; 114 | } 115 | 116 | private async Task OnShowCameraInfo() 117 | { 118 | await View3D1.ShowCurrentCameraInfo(); 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/Example04.razor: -------------------------------------------------------------------------------- 1 | @page "/example04" 2 | @implements IDisposable 3 | 4 | 5 |

Example04

6 | 7 |
8 | This example shows how to: 9 |
    10 |
  • Add new cubes (or it can be any mech) with specified positions
    • 11 |
  • Update selected cube (or any mech) position (in fact the complete scene is updated)
    • 12 |
  • Delete selected cube (or any mech) from the scene
    • 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 |
@msg
40 |
41 | 42 | 43 | @code { 44 | private Viewer View3D1 = null!; 45 | private Scene scene = new Scene(); 46 | private Guid lastSelectedGuid; 47 | private Guid lastCubeGuid; 48 | private string msg = string.Empty; 49 | 50 | private double xCoord { get; set; } 51 | private double yCoord { get; set; } 52 | private double zCoord { get; set; } 53 | 54 | private ViewerSettings settings = new ViewerSettings() 55 | { 56 | CanSelect = true, 57 | CanSelectHelpers = false 58 | }; 59 | 60 | 61 | protected override Task OnInitializedAsync() 62 | { 63 | AddLights(); 64 | return base.OnInitializedAsync(); 65 | } 66 | 67 | protected override Task OnAfterRenderAsync(bool firstRender) 68 | { 69 | if (firstRender) 70 | { 71 | View3D1.ObjectSelected += OnObjectSelected; 72 | } 73 | 74 | return base.OnAfterRenderAsync(firstRender); 75 | } 76 | 77 | private void AddLights() 78 | { 79 | scene.Add(new AmbientLight()); 80 | scene.Add(new PointLight() 81 | { 82 | Intensity = 0.5f, 83 | Position = new Vector3(100, 200, 100) 84 | }); 85 | scene.Add(new PointLight() 86 | { 87 | Intensity = 1f, 88 | Position = new Vector3(5, 5, 5) 89 | }); 90 | } 91 | private async Task OnClearAllClick() 92 | { 93 | await View3D1.ClearSceneAsync(); 94 | AddLights(); 95 | await View3D1.UpdateScene(); 96 | } 97 | 98 | private async Task OnClearLast() 99 | { 100 | if (scene.Children.Count == 0) 101 | { 102 | return; 103 | } 104 | var last = scene.Children.Last(); 105 | await View3D1.RemoveByUuidAsync(last.Uuid); 106 | } 107 | 108 | private void OnObjectSelected(Object3DArgs e) 109 | { 110 | lastSelectedGuid = e.UUID; 111 | } 112 | 113 | private async Task OnCreateCubeButtonClick() 114 | { 115 | var mesh = new Mesh 116 | { 117 | Geometry = new BoxGeometry(), 118 | Position = new Vector3(xCoord, yCoord, zCoord) 119 | }; 120 | 121 | scene.Add(mesh); 122 | await View3D1.UpdateScene(); 123 | lastCubeGuid = mesh.Uuid; 124 | msg = $"created new cube with id = {lastCubeGuid}"; 125 | StateHasChanged(); 126 | lastCubeGuid = Guid.Empty; 127 | } 128 | 129 | private async Task OnUpdateCubeButtonClick() 130 | { 131 | var selected = scene.Children.Find(x => x.Uuid == lastSelectedGuid); 132 | if (selected == null) 133 | { 134 | msg = $"nothing selected yet"; 135 | StateHasChanged(); 136 | return; 137 | } 138 | 139 | if (selected is Mesh) 140 | { 141 | var mesh = selected as Mesh; 142 | mesh.Position = new Vector3(xCoord, yCoord, zCoord); 143 | } 144 | 145 | await View3D1.UpdateScene(); 146 | msg = $"updated cube with id = {selected.Uuid}"; 147 | StateHasChanged(); 148 | lastCubeGuid = Guid.Empty; 149 | } 150 | 151 | private async Task OnDeleteSelected() 152 | { 153 | var selected = scene.Children.Find(x => x.Uuid == lastSelectedGuid); 154 | if (selected == null) 155 | { 156 | msg = $"nothing selected yet"; 157 | StateHasChanged(); 158 | return; 159 | } 160 | await View3D1.RemoveByUuidAsync(selected.Uuid); 161 | 162 | msg = $"deleted cube with id = {lastSelectedGuid}"; 163 | StateHasChanged(); 164 | lastCubeGuid = Guid.Empty; 165 | } 166 | 167 | public void Dispose() 168 | { 169 | View3D1.ObjectSelected -= OnObjectSelected; 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/Example05.razor: -------------------------------------------------------------------------------- 1 | @page "/example05" 2 | @using HomagGroup.Blazor3D.Textures; 3 | 4 |

Example05

5 | 6 |
7 | This example shows how to: 8 |
    9 |
  • Load a bitmap texture to the mesh using URL
    • 10 |
  • Use different wrapping types
    • 11 |
  • Use texture repeating, offset and rotation
    • 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | @code { 22 | private Viewer View3D1 = null!; 23 | 24 | private Scene scene = new Scene(); 25 | 26 | 27 | protected override Task OnInitializedAsync() 28 | { 29 | scene.Add(new AmbientLight()); 30 | scene.Add(new PointLight() 31 | { 32 | Position = new Vector3(1, 3, 0) 33 | }); 34 | 35 | scene.Add(new Mesh 36 | { 37 | Geometry = new BoxGeometry(), 38 | Position = new Vector3(-2, 0, -2), 39 | Material = new MeshStandardMaterial() 40 | { 41 | Color = "white", 42 | Map = CreateTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg") 43 | } 44 | }); 45 | 46 | scene.Add(new Mesh 47 | { 48 | Geometry = new BoxGeometry(), 49 | Position = new Vector3(0, 0, -2), 50 | Material = new MeshStandardMaterial() 51 | { 52 | Color = "lightgreen", 53 | Map = CreateTexture( 54 | "https://threejs.org/examples/textures/uv_grid_opengl.jpg", 55 | WrappingType.MirroredRepeatWrapping, 56 | WrappingType.MirroredRepeatWrapping, 57 | new Vector2(4, 4), 58 | null, 59 | Math.PI / 4 60 | ) 61 | } 62 | }); 63 | 64 | scene.Add(new Mesh 65 | { 66 | Geometry = new BoxGeometry(), 67 | Position = new Vector3(2, 0, -2), 68 | Material = new MeshStandardMaterial() 69 | { 70 | Color = "orange", 71 | Map = CreateTexture( 72 | "https://threejs.org/examples/textures/uv_grid_opengl.jpg", 73 | WrappingType.RepeatWrapping, 74 | WrappingType.RepeatWrapping, 75 | new Vector2(2, 2), 76 | new Vector2(0.25f, 0.25f) 77 | ) 78 | } 79 | }); 80 | 81 | scene.Add(new Mesh 82 | { 83 | Geometry = new SphereGeometry(radius: 0.6f), 84 | Position = new Vector3(-2, 0, 0), 85 | Material = new MeshStandardMaterial() 86 | { 87 | Color = "white", 88 | Map = CreateTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg") 89 | }, 90 | }); 91 | 92 | scene.Add(new Mesh 93 | { 94 | Geometry = new TorusGeometry(radius: 0.5f, tube: 0.3f, radialSegments: 12, tubularSegments: 12), 95 | Position = new Vector3(0, 0, 0), 96 | Material = new MeshStandardMaterial() 97 | { 98 | Color = "white", 99 | Map = CreateTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg") 100 | } 101 | }); 102 | 103 | scene.Add(new Mesh 104 | { 105 | Geometry = new OctahedronGeometry(radius: 0.75f), 106 | Position = new Vector3(2, 0, 0), 107 | Material = new MeshStandardMaterial() 108 | { 109 | Color = "white", 110 | Map = CreateTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg") 111 | } 112 | }); 113 | 114 | return base.OnInitializedAsync(); 115 | } 116 | 117 | private Texture CreateTexture( 118 | string url, 119 | WrappingType wraps = WrappingType.ClampToEdgeWrapping, 120 | WrappingType wrapt = WrappingType.ClampToEdgeWrapping, 121 | Vector2? repeat = null, 122 | Vector2? offset = null, 123 | double? rotation = null) 124 | { 125 | var texture = new Texture() 126 | { 127 | TextureUrl = url, 128 | WrapS = wraps, 129 | WrapT = wrapt 130 | }; 131 | 132 | texture.Repeat = repeat == null ? texture.Repeat : repeat; 133 | texture.Offset = offset == null ? texture.Offset : offset; 134 | texture.Rotation = !rotation.HasValue ? texture.Rotation : rotation.Value; 135 | 136 | return texture; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/Example06.razor: -------------------------------------------------------------------------------- 1 | @page "/example06" 2 | @using HomagGroup.Blazor3D.Geometires.Text; 3 | 4 |

Example06

5 | 6 |
7 | This example shows how to: 8 |
    9 |
  • Add text object with extruded geometry
    • 10 |
  • Add text object with shaped geometry
    • 11 |
  • Add text object with stroke geometry
    • 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | @code { 22 | private Viewer View3D1 = null!; 23 | 24 | private Scene scene = new Scene(); 25 | 26 | 27 | protected override Task OnInitializedAsync() 28 | { 29 | AddLights(); 30 | FillScene(); 31 | return base.OnInitializedAsync(); 32 | } 33 | 34 | private void AddLights() 35 | { 36 | scene.Add(new AmbientLight()); 37 | var plight = new PointLight() 38 | { 39 | //Color = "red", 40 | Decay = 2, 41 | Position = new Vector3(1, 5, 0) 42 | }; 43 | scene.Add(plight); 44 | scene.Add(new PointLightHelper(plight, 0.5)); 45 | } 46 | private void FillScene() 47 | { 48 | var text = new Text 49 | { 50 | Material = new MeshStandardMaterial 51 | { 52 | Color = "red", 53 | }, 54 | Geometry = new TextExtrudeGeometry 55 | { 56 | FontURL = "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", 57 | Size = 1, 58 | Height = 0.1, 59 | } 60 | }; 61 | 62 | scene.Add(text); 63 | 64 | text = new Text 65 | { 66 | Material = new MeshStandardMaterial 67 | { 68 | Color = "blue", 69 | }, 70 | Geometry = new TextExtrudeGeometry 71 | { 72 | FontURL = "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", 73 | Size = 1, 74 | Height = 0.5, 75 | BevelEnabled = true, 76 | BevelSegments = 2, 77 | BevelSize = 0.05, 78 | BevelThickness = 0.1 79 | }, 80 | Position = new Vector3(0, 0, -1) 81 | }; 82 | scene.Add(text); 83 | 84 | text = new Text 85 | { 86 | Material = new MeshStandardMaterial 87 | { 88 | Color = "violet", 89 | }, 90 | Geometry = new TextShapeGeometry 91 | { 92 | FontURL = "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", 93 | Size = 1, 94 | }, 95 | Position = new Vector3(0, 0, 1) 96 | }; 97 | scene.Add(text); 98 | 99 | text = new Text 100 | { 101 | Material = new MeshStandardMaterial 102 | { 103 | Color = "violet", 104 | }, 105 | Geometry = new TextStrokeGeometry 106 | { 107 | FontURL = "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", 108 | Size = 1, 109 | StrokeWidth = 0.05 110 | }, 111 | Position = new Vector3(0, 0, 2) 112 | }; 113 | scene.Add(text); 114 | 115 | } 116 | 117 | } 118 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | 3 | 4 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/_Host.cshtml: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @namespace Blazor3D.Examples.Server.Pages 3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 4 | @{ 5 | Layout = "_Layout"; 6 | } 7 | 8 | 9 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Pages/_Layout.cshtml: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components.Web 2 | @namespace Blazor3D.Examples.Server.Pages 3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | @RenderBody() 18 | 19 |
20 | 21 | An error has occurred. This application may no longer respond until reloaded. 22 | 23 | 24 | An unhandled exception has occurred. See browser dev tools for details. 25 | 26 | Reload 27 | 🗙 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.StaticFiles; 2 | 3 | var builder = WebApplication.CreateBuilder(args); 4 | 5 | // Add services to the container. 6 | builder.Services.AddRazorPages(); 7 | builder.Services.AddServerSideBlazor(); 8 | 9 | var app = builder.Build(); 10 | 11 | // Configure the HTTP request pipeline. 12 | if (!app.Environment.IsDevelopment()) 13 | { 14 | app.UseExceptionHandler("/Error"); 15 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. 16 | app.UseHsts(); 17 | } 18 | 19 | app.UseHttpsRedirection(); 20 | 21 | // allow to get assets with unknown mime types from wwwroot folder 22 | // required for server only 23 | app.UseStaticFiles(new StaticFileOptions 24 | { 25 | ServeUnknownFileTypes = true, 26 | DefaultContentType = "text/plane" 27 | }); 28 | 29 | app.UseStaticFiles(); 30 | 31 | app.UseRouting(); 32 | 33 | app.MapBlazorHub(); 34 | app.MapFallbackToPage("/_Host"); 35 | 36 | app.Run(); 37 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:57946", 7 | "sslPort": 44387 8 | } 9 | }, 10 | "profiles": { 11 | "Blazor3D.Examples.Server": { 12 | "commandName": "Project", 13 | "dotnetRunMessages": true, 14 | "launchBrowser": true, 15 | "applicationUrl": "https://localhost:7264;http://localhost:5264", 16 | "environmentVariables": { 17 | "ASPNETCORE_ENVIRONMENT": "Development" 18 | } 19 | }, 20 | "IIS Express": { 21 | "commandName": "IISExpress", 22 | "launchBrowser": true, 23 | "environmentVariables": { 24 | "ASPNETCORE_ENVIRONMENT": "Development" 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 | Blazor3D.Examples.Server 4 | 5 |
6 |
7 | 8 |
9 | 10 |
11 |
12 | About 13 |
14 | 15 |
16 | @Body 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Shared/MainLayout.razor.css: -------------------------------------------------------------------------------- 1 | .page { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | main { 8 | flex: 1; 9 | } 10 | 11 | .sidebar { 12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 13 | } 14 | 15 | .top-row { 16 | background-color: #f7f7f7; 17 | border-bottom: 1px solid #d6d5d5; 18 | justify-content: flex-end; 19 | height: 3.5rem; 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | .top-row ::deep a, .top-row .btn-link { 25 | white-space: nowrap; 26 | margin-left: 1.5rem; 27 | } 28 | 29 | .top-row a:first-child { 30 | overflow: hidden; 31 | text-overflow: ellipsis; 32 | } 33 | 34 | @media (max-width: 640.98px) { 35 | .top-row:not(.auth) { 36 | display: none; 37 | } 38 | 39 | .top-row.auth { 40 | justify-content: space-between; 41 | } 42 | 43 | .top-row a, .top-row .btn-link { 44 | margin-left: 0; 45 | } 46 | } 47 | 48 | @media (min-width: 641px) { 49 | .page { 50 | flex-direction: row; 51 | } 52 | 53 | .sidebar { 54 | width: 250px; 55 | height: 100vh; 56 | position: sticky; 57 | top: 0; 58 | } 59 | 60 | .top-row { 61 | position: sticky; 62 | top: 0; 63 | z-index: 1; 64 | } 65 | 66 | .top-row, article { 67 | padding-left: 2rem !important; 68 | padding-right: 1.5rem !important; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Shared/NavMenu.razor: -------------------------------------------------------------------------------- 1 | 
2 |
3 | Blazor3D.Examples 4 | 7 |
8 |
9 | 10 |
11 | 48 |
49 | 50 | @code { 51 | private bool collapseNavMenu = true; 52 | 53 | private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; 54 | 55 | private void ToggleNavMenu() 56 | { 57 | collapseNavMenu = !collapseNavMenu; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/Shared/NavMenu.razor.css: -------------------------------------------------------------------------------- 1 | .navbar-toggler { 2 | background-color: rgba(255, 255, 255, 0.1); 3 | } 4 | 5 | .top-row { 6 | height: 3.5rem; 7 | background-color: rgba(0,0,0,0.4); 8 | } 9 | 10 | .navbar-brand { 11 | font-size: 1.1rem; 12 | } 13 | 14 | .oi { 15 | width: 2rem; 16 | font-size: 1.1rem; 17 | vertical-align: text-top; 18 | top: -2px; 19 | } 20 | 21 | .nav-item { 22 | font-size: 0.9rem; 23 | padding-bottom: 0.5rem; 24 | } 25 | 26 | .nav-item:first-of-type { 27 | padding-top: 1rem; 28 | } 29 | 30 | .nav-item:last-of-type { 31 | padding-bottom: 1rem; 32 | } 33 | 34 | .nav-item ::deep a { 35 | color: #d7d7d7; 36 | border-radius: 4px; 37 | height: 3rem; 38 | display: flex; 39 | align-items: center; 40 | line-height: 3rem; 41 | } 42 | 43 | .nav-item ::deep a.active { 44 | background-color: rgba(255,255,255,0.25); 45 | color: white; 46 | } 47 | 48 | .nav-item ::deep a:hover { 49 | background-color: rgba(255,255,255,0.1); 50 | color: white; 51 | } 52 | 53 | @media (min-width: 641px) { 54 | .navbar-toggler { 55 | display: none; 56 | } 57 | 58 | .collapse { 59 | /* Never collapse the sidebar for wide screens */ 60 | display: block; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using Microsoft.AspNetCore.Authorization 3 | @using Microsoft.AspNetCore.Components.Authorization 4 | @using Microsoft.AspNetCore.Components.Forms 5 | @using Microsoft.AspNetCore.Components.Routing 6 | @using Microsoft.AspNetCore.Components.Web 7 | @using Microsoft.AspNetCore.Components.Web.Virtualization 8 | @using Microsoft.JSInterop 9 | @using Examples.Server 10 | @using Examples.Server.Shared 11 | @using HomagGroup.Blazor3D.Viewers 12 | @using HomagGroup.Blazor3D.Settings 13 | @using HomagGroup.Blazor3D.Scenes 14 | @using HomagGroup.Blazor3D.Lights 15 | @using HomagGroup.Blazor3D.Maths 16 | @using HomagGroup.Blazor3D.Materials 17 | @using HomagGroup.Blazor3D.Objects 18 | @using HomagGroup.Blazor3D.Geometires 19 | @using HomagGroup.Blazor3D.Enums 20 | @using HomagGroup.Blazor3D.Cameras 21 | @using HomagGroup.Blazor3D.Helpers 22 | @using HomagGroup.Blazor3D.Events 23 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "DetailedErrors": true, 3 | "Logging": { 4 | "LogLevel": { 5 | "Default": "Information", 6 | "Microsoft.AspNetCore": "Warning" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft.AspNetCore": "Warning" 6 | } 7 | }, 8 | "AllowedHosts": "*" 9 | } 10 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/assets/blazor3d.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.Server/wwwroot/assets/blazor3d.glb -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/FONT-LICENSE: -------------------------------------------------------------------------------- 1 | SIL OPEN FONT LICENSE Version 1.1 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | PREAMBLE 6 | The goals of the Open Font License (OFL) are to stimulate worldwide 7 | development of collaborative font projects, to support the font creation 8 | efforts of academic and linguistic communities, and to provide a free and 9 | open framework in which fonts may be shared and improved in partnership 10 | with others. 11 | 12 | The OFL allows the licensed fonts to be used, studied, modified and 13 | redistributed freely as long as they are not sold by themselves. The 14 | fonts, including any derivative works, can be bundled, embedded, 15 | redistributed and/or sold with any software provided that any reserved 16 | names are not used by derivative works. The fonts and derivatives, 17 | however, cannot be released under any other type of license. The 18 | requirement for fonts to remain under this license does not apply 19 | to any document created using the fonts or their derivatives. 20 | 21 | DEFINITIONS 22 | "Font Software" refers to the set of files released by the Copyright 23 | Holder(s) under this license and clearly marked as such. This may 24 | include source files, build scripts and documentation. 25 | 26 | "Reserved Font Name" refers to any names specified as such after the 27 | copyright statement(s). 28 | 29 | "Original Version" refers to the collection of Font Software components as 30 | distributed by the Copyright Holder(s). 31 | 32 | "Modified Version" refers to any derivative made by adding to, deleting, 33 | or substituting -- in part or in whole -- any of the components of the 34 | Original Version, by changing formats or by porting the Font Software to a 35 | new environment. 36 | 37 | "Author" refers to any designer, engineer, programmer, technical 38 | writer or other person who contributed to the Font Software. 39 | 40 | PERMISSION & CONDITIONS 41 | Permission is hereby granted, free of charge, to any person obtaining 42 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 43 | redistribute, and sell modified and unmodified copies of the Font 44 | Software, subject to the following conditions: 45 | 46 | 1) Neither the Font Software nor any of its individual components, 47 | in Original or Modified Versions, may be sold by itself. 48 | 49 | 2) Original or Modified Versions of the Font Software may be bundled, 50 | redistributed and/or sold with any software, provided that each copy 51 | contains the above copyright notice and this license. These can be 52 | included either as stand-alone text files, human-readable headers or 53 | in the appropriate machine-readable metadata fields within text or 54 | binary files as long as those fields can be easily viewed by the user. 55 | 56 | 3) No Modified Version of the Font Software may use the Reserved Font 57 | Name(s) unless explicit written permission is granted by the corresponding 58 | Copyright Holder. This restriction only applies to the primary font name as 59 | presented to the users. 60 | 61 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 62 | Software shall not be used to promote, endorse or advertise any 63 | Modified Version, except to acknowledge the contribution(s) of the 64 | Copyright Holder(s) and the Author(s) or with their explicit written 65 | permission. 66 | 67 | 5) The Font Software, modified or unmodified, in part or in whole, 68 | must be distributed entirely under this license, and must not be 69 | distributed under any other license. The requirement for fonts to 70 | remain under this license does not apply to any document created 71 | using the Font Software. 72 | 73 | TERMINATION 74 | This license becomes null and void if any of the above conditions are 75 | not met. 76 | 77 | DISCLAIMER 78 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 79 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 80 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 81 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 82 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 83 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 84 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 85 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 86 | OTHER DEALINGS IN THE FONT SOFTWARE. 87 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/ICON-LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/README.md: -------------------------------------------------------------------------------- 1 | [Open Iconic v1.1.1](http://useiconic.com/open) 2 | =========== 3 | 4 | ### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons) 5 | 6 | 7 | 8 | ## What's in Open Iconic? 9 | 10 | * 223 icons designed to be legible down to 8 pixels 11 | * Super-light SVG files - 61.8 for the entire set 12 | * SVG sprite—the modern replacement for icon fonts 13 | * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats 14 | * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats 15 | * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px. 16 | 17 | 18 | ## Getting Started 19 | 20 | #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections. 21 | 22 | ### General Usage 23 | 24 | #### Using Open Iconic's SVGs 25 | 26 | We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute). 27 | 28 | ``` 29 | icon name 30 | ``` 31 | 32 | #### Using Open Iconic's SVG Sprite 33 | 34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. 35 | 36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `` *tag and a unique class name for each different icon in the* `` *tag.* 37 | 38 | ``` 39 | 40 | 41 | 42 | ``` 43 | 44 | Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `` tag with equal width and height dimensions. 45 | 46 | ``` 47 | .icon { 48 | width: 16px; 49 | height: 16px; 50 | } 51 | ``` 52 | 53 | Coloring icons is even easier. All you need to do is set the `fill` rule on the `` tag. 54 | 55 | ``` 56 | .icon-account-login { 57 | fill: #f00; 58 | } 59 | ``` 60 | 61 | To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/). 62 | 63 | #### Using Open Iconic's Icon Font... 64 | 65 | 66 | ##### …with Bootstrap 67 | 68 | You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}` 69 | 70 | 71 | ``` 72 | 73 | ``` 74 | 75 | 76 | ``` 77 | 78 | ``` 79 | 80 | ##### …with Foundation 81 | 82 | You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}` 83 | 84 | ``` 85 | 86 | ``` 87 | 88 | 89 | ``` 90 | 91 | ``` 92 | 93 | ##### …on its own 94 | 95 | You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}` 96 | 97 | ``` 98 | 99 | ``` 100 | 101 | ``` 102 | 103 | ``` 104 | 105 | 106 | ## License 107 | 108 | ### Icons 109 | 110 | All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT). 111 | 112 | ### Fonts 113 | 114 | All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web). 115 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi{position:relative;top:1px;display:inline-block;speak:none;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi.oi-align-center:before{text-align:center}.oi.oi-align-left:before{text-align:left}.oi.oi-align-right:before{text-align:right}.oi.oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi.oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi.oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi-account-login:before{content:'\e000'}.oi-account-logout:before{content:'\e001'}.oi-action-redo:before{content:'\e002'}.oi-action-undo:before{content:'\e003'}.oi-align-center:before{content:'\e004'}.oi-align-left:before{content:'\e005'}.oi-align-right:before{content:'\e006'}.oi-aperture:before{content:'\e007'}.oi-arrow-bottom:before{content:'\e008'}.oi-arrow-circle-bottom:before{content:'\e009'}.oi-arrow-circle-left:before{content:'\e00a'}.oi-arrow-circle-right:before{content:'\e00b'}.oi-arrow-circle-top:before{content:'\e00c'}.oi-arrow-left:before{content:'\e00d'}.oi-arrow-right:before{content:'\e00e'}.oi-arrow-thick-bottom:before{content:'\e00f'}.oi-arrow-thick-left:before{content:'\e010'}.oi-arrow-thick-right:before{content:'\e011'}.oi-arrow-thick-top:before{content:'\e012'}.oi-arrow-top:before{content:'\e013'}.oi-audio-spectrum:before{content:'\e014'}.oi-audio:before{content:'\e015'}.oi-badge:before{content:'\e016'}.oi-ban:before{content:'\e017'}.oi-bar-chart:before{content:'\e018'}.oi-basket:before{content:'\e019'}.oi-battery-empty:before{content:'\e01a'}.oi-battery-full:before{content:'\e01b'}.oi-beaker:before{content:'\e01c'}.oi-bell:before{content:'\e01d'}.oi-bluetooth:before{content:'\e01e'}.oi-bold:before{content:'\e01f'}.oi-bolt:before{content:'\e020'}.oi-book:before{content:'\e021'}.oi-bookmark:before{content:'\e022'}.oi-box:before{content:'\e023'}.oi-briefcase:before{content:'\e024'}.oi-british-pound:before{content:'\e025'}.oi-browser:before{content:'\e026'}.oi-brush:before{content:'\e027'}.oi-bug:before{content:'\e028'}.oi-bullhorn:before{content:'\e029'}.oi-calculator:before{content:'\e02a'}.oi-calendar:before{content:'\e02b'}.oi-camera-slr:before{content:'\e02c'}.oi-caret-bottom:before{content:'\e02d'}.oi-caret-left:before{content:'\e02e'}.oi-caret-right:before{content:'\e02f'}.oi-caret-top:before{content:'\e030'}.oi-cart:before{content:'\e031'}.oi-chat:before{content:'\e032'}.oi-check:before{content:'\e033'}.oi-chevron-bottom:before{content:'\e034'}.oi-chevron-left:before{content:'\e035'}.oi-chevron-right:before{content:'\e036'}.oi-chevron-top:before{content:'\e037'}.oi-circle-check:before{content:'\e038'}.oi-circle-x:before{content:'\e039'}.oi-clipboard:before{content:'\e03a'}.oi-clock:before{content:'\e03b'}.oi-cloud-download:before{content:'\e03c'}.oi-cloud-upload:before{content:'\e03d'}.oi-cloud:before{content:'\e03e'}.oi-cloudy:before{content:'\e03f'}.oi-code:before{content:'\e040'}.oi-cog:before{content:'\e041'}.oi-collapse-down:before{content:'\e042'}.oi-collapse-left:before{content:'\e043'}.oi-collapse-right:before{content:'\e044'}.oi-collapse-up:before{content:'\e045'}.oi-command:before{content:'\e046'}.oi-comment-square:before{content:'\e047'}.oi-compass:before{content:'\e048'}.oi-contrast:before{content:'\e049'}.oi-copywriting:before{content:'\e04a'}.oi-credit-card:before{content:'\e04b'}.oi-crop:before{content:'\e04c'}.oi-dashboard:before{content:'\e04d'}.oi-data-transfer-download:before{content:'\e04e'}.oi-data-transfer-upload:before{content:'\e04f'}.oi-delete:before{content:'\e050'}.oi-dial:before{content:'\e051'}.oi-document:before{content:'\e052'}.oi-dollar:before{content:'\e053'}.oi-double-quote-sans-left:before{content:'\e054'}.oi-double-quote-sans-right:before{content:'\e055'}.oi-double-quote-serif-left:before{content:'\e056'}.oi-double-quote-serif-right:before{content:'\e057'}.oi-droplet:before{content:'\e058'}.oi-eject:before{content:'\e059'}.oi-elevator:before{content:'\e05a'}.oi-ellipses:before{content:'\e05b'}.oi-envelope-closed:before{content:'\e05c'}.oi-envelope-open:before{content:'\e05d'}.oi-euro:before{content:'\e05e'}.oi-excerpt:before{content:'\e05f'}.oi-expand-down:before{content:'\e060'}.oi-expand-left:before{content:'\e061'}.oi-expand-right:before{content:'\e062'}.oi-expand-up:before{content:'\e063'}.oi-external-link:before{content:'\e064'}.oi-eye:before{content:'\e065'}.oi-eyedropper:before{content:'\e066'}.oi-file:before{content:'\e067'}.oi-fire:before{content:'\e068'}.oi-flag:before{content:'\e069'}.oi-flash:before{content:'\e06a'}.oi-folder:before{content:'\e06b'}.oi-fork:before{content:'\e06c'}.oi-fullscreen-enter:before{content:'\e06d'}.oi-fullscreen-exit:before{content:'\e06e'}.oi-globe:before{content:'\e06f'}.oi-graph:before{content:'\e070'}.oi-grid-four-up:before{content:'\e071'}.oi-grid-three-up:before{content:'\e072'}.oi-grid-two-up:before{content:'\e073'}.oi-hard-drive:before{content:'\e074'}.oi-header:before{content:'\e075'}.oi-headphones:before{content:'\e076'}.oi-heart:before{content:'\e077'}.oi-home:before{content:'\e078'}.oi-image:before{content:'\e079'}.oi-inbox:before{content:'\e07a'}.oi-infinity:before{content:'\e07b'}.oi-info:before{content:'\e07c'}.oi-italic:before{content:'\e07d'}.oi-justify-center:before{content:'\e07e'}.oi-justify-left:before{content:'\e07f'}.oi-justify-right:before{content:'\e080'}.oi-key:before{content:'\e081'}.oi-laptop:before{content:'\e082'}.oi-layers:before{content:'\e083'}.oi-lightbulb:before{content:'\e084'}.oi-link-broken:before{content:'\e085'}.oi-link-intact:before{content:'\e086'}.oi-list-rich:before{content:'\e087'}.oi-list:before{content:'\e088'}.oi-location:before{content:'\e089'}.oi-lock-locked:before{content:'\e08a'}.oi-lock-unlocked:before{content:'\e08b'}.oi-loop-circular:before{content:'\e08c'}.oi-loop-square:before{content:'\e08d'}.oi-loop:before{content:'\e08e'}.oi-magnifying-glass:before{content:'\e08f'}.oi-map-marker:before{content:'\e090'}.oi-map:before{content:'\e091'}.oi-media-pause:before{content:'\e092'}.oi-media-play:before{content:'\e093'}.oi-media-record:before{content:'\e094'}.oi-media-skip-backward:before{content:'\e095'}.oi-media-skip-forward:before{content:'\e096'}.oi-media-step-backward:before{content:'\e097'}.oi-media-step-forward:before{content:'\e098'}.oi-media-stop:before{content:'\e099'}.oi-medical-cross:before{content:'\e09a'}.oi-menu:before{content:'\e09b'}.oi-microphone:before{content:'\e09c'}.oi-minus:before{content:'\e09d'}.oi-monitor:before{content:'\e09e'}.oi-moon:before{content:'\e09f'}.oi-move:before{content:'\e0a0'}.oi-musical-note:before{content:'\e0a1'}.oi-paperclip:before{content:'\e0a2'}.oi-pencil:before{content:'\e0a3'}.oi-people:before{content:'\e0a4'}.oi-person:before{content:'\e0a5'}.oi-phone:before{content:'\e0a6'}.oi-pie-chart:before{content:'\e0a7'}.oi-pin:before{content:'\e0a8'}.oi-play-circle:before{content:'\e0a9'}.oi-plus:before{content:'\e0aa'}.oi-power-standby:before{content:'\e0ab'}.oi-print:before{content:'\e0ac'}.oi-project:before{content:'\e0ad'}.oi-pulse:before{content:'\e0ae'}.oi-puzzle-piece:before{content:'\e0af'}.oi-question-mark:before{content:'\e0b0'}.oi-rain:before{content:'\e0b1'}.oi-random:before{content:'\e0b2'}.oi-reload:before{content:'\e0b3'}.oi-resize-both:before{content:'\e0b4'}.oi-resize-height:before{content:'\e0b5'}.oi-resize-width:before{content:'\e0b6'}.oi-rss-alt:before{content:'\e0b7'}.oi-rss:before{content:'\e0b8'}.oi-script:before{content:'\e0b9'}.oi-share-boxed:before{content:'\e0ba'}.oi-share:before{content:'\e0bb'}.oi-shield:before{content:'\e0bc'}.oi-signal:before{content:'\e0bd'}.oi-signpost:before{content:'\e0be'}.oi-sort-ascending:before{content:'\e0bf'}.oi-sort-descending:before{content:'\e0c0'}.oi-spreadsheet:before{content:'\e0c1'}.oi-star:before{content:'\e0c2'}.oi-sun:before{content:'\e0c3'}.oi-tablet:before{content:'\e0c4'}.oi-tag:before{content:'\e0c5'}.oi-tags:before{content:'\e0c6'}.oi-target:before{content:'\e0c7'}.oi-task:before{content:'\e0c8'}.oi-terminal:before{content:'\e0c9'}.oi-text:before{content:'\e0ca'}.oi-thumb-down:before{content:'\e0cb'}.oi-thumb-up:before{content:'\e0cc'}.oi-timer:before{content:'\e0cd'}.oi-transfer:before{content:'\e0ce'}.oi-trash:before{content:'\e0cf'}.oi-underline:before{content:'\e0d0'}.oi-vertical-align-bottom:before{content:'\e0d1'}.oi-vertical-align-center:before{content:'\e0d2'}.oi-vertical-align-top:before{content:'\e0d3'}.oi-video:before{content:'\e0d4'}.oi-volume-high:before{content:'\e0d5'}.oi-volume-low:before{content:'\e0d6'}.oi-volume-off:before{content:'\e0d7'}.oi-warning:before{content:'\e0d8'}.oi-wifi:before{content:'\e0d9'}.oi-wrench:before{content:'\e0da'}.oi-x:before{content:'\e0db'}.oi-yen:before{content:'\e0dc'}.oi-zoom-in:before{content:'\e0dd'}.oi-zoom-out:before{content:'\e0de'} -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/css/site.css: -------------------------------------------------------------------------------- 1 | @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); 2 | 3 | html, body { 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | h1:focus { 8 | outline: none; 9 | } 10 | 11 | a, .btn-link { 12 | color: #0071c1; 13 | } 14 | 15 | .btn-primary { 16 | color: #fff; 17 | background-color: #1b6ec2; 18 | border-color: #1861ac; 19 | } 20 | 21 | .content { 22 | padding-top: 1.1rem; 23 | } 24 | 25 | .valid.modified:not([type=checkbox]) { 26 | outline: 1px solid #26b050; 27 | } 28 | 29 | .invalid { 30 | outline: 1px solid red; 31 | } 32 | 33 | .validation-message { 34 | color: red; 35 | } 36 | 37 | #blazor-error-ui { 38 | background: lightyellow; 39 | bottom: 0; 40 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 41 | display: none; 42 | left: 0; 43 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 44 | position: fixed; 45 | width: 100%; 46 | z-index: 1000; 47 | } 48 | 49 | #blazor-error-ui .dismiss { 50 | cursor: pointer; 51 | position: absolute; 52 | right: 0.75rem; 53 | top: 0.5rem; 54 | } 55 | 56 | .blazor-error-boundary { 57 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 58 | padding: 1rem 1rem 1rem 3.7rem; 59 | color: white; 60 | } 61 | 62 | .blazor-error-boundary::after { 63 | content: "An error has occurred." 64 | } 65 | 66 | .v3d { 67 | display: flex; 68 | height: 600px; 69 | } 70 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.Server/wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.Server/wwwroot/favicon.ico -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Blazor3D.Examples.WebAsm.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net6.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | PreserveNewest 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Pages/Example02.razor: -------------------------------------------------------------------------------- 1 | @page "/example02" 2 | @implements IDisposable 3 | 4 |

Example02

5 | 6 |
7 | This example shows how to: 8 |
    9 |
  • Control the Blazor3D Viewer component's dimensions with CSS and HTML element style
    • 10 |
  • Add user-defined scene and lights
    • 11 |
  • Import obj, Collada, Fbx, Gltf or Stl model on button click asyncronously
    • 12 |
  • Control loaded object by its uuid with ObjectLoaded event
    • 13 |
  • Import file when all required JS modules already loaded (inital load)
    • 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |

23 |

24 |

25 |

26 |

27 |

28 |
29 |

30 |

31 |
32 | 33 |
@msg
34 |
35 | 36 | @code { 37 | private Viewer View3D1 = null!; 38 | private Scene scene = new Scene(); 39 | private Guid loadedObjectGuid = Guid.NewGuid(); 40 | private string msg = string.Empty; 41 | 42 | public void Dispose() 43 | { 44 | View3D1.ObjectLoaded -= OnObjectLoaded; 45 | View3D1.JsModuleLoaded -= OnJsModuleLoaded; 46 | } 47 | 48 | protected override Task OnInitializedAsync() 49 | { 50 | AddLights(); 51 | return base.OnInitializedAsync(); 52 | } 53 | 54 | private void AddLights() 55 | { 56 | scene.Add(new AmbientLight()); 57 | scene.Add(new PointLight() 58 | { 59 | Intensity = 0.5f, 60 | Position = new Vector3(100, 200, 100) 61 | }); 62 | scene.Add(new PointLight() 63 | { 64 | Intensity = 1f, 65 | Position = new Vector3(5, 5, 5) 66 | }); 67 | } 68 | 69 | protected override Task OnAfterRenderAsync(bool firstRender) 70 | { 71 | if (firstRender) 72 | { 73 | // subscribe events only once 74 | View3D1.ObjectLoaded += OnObjectLoaded; 75 | View3D1.JsModuleLoaded += OnJsModuleLoaded; 76 | } 77 | 78 | return base.OnAfterRenderAsync(firstRender); 79 | } 80 | 81 | private async Task OnJsModuleLoaded() 82 | { 83 | var settings = new ImportSettings 84 | { 85 | Format = Import3DFormats.Gltf, 86 | FileURL = "/assets/blazor3d.glb", 87 | }; 88 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 89 | await View3D1.SetCameraPositionAsync(new Vector3(0, 0, 1), new Vector3(0, 0, 0)); 90 | } 91 | 92 | private async Task OnLoadObjButtonClick() 93 | { 94 | // if you need to control the loaded object uuid, generate it here. 95 | loadedObjectGuid = Guid.NewGuid(); 96 | var settings = new ImportSettings 97 | { 98 | Format = Import3DFormats.Obj,//choose appropriate format 99 | FileURL = "https://threejs.org/examples/models/obj/male02/male02.obj",// link to your model file 100 | TextureURL = "https://threejs.org/examples/textures/uv_grid_opengl.jpg", // link to the texture or skip this, 101 | Uuid = loadedObjectGuid //// skip this, or set null if you don't care the uuid of loaded mesh or group 102 | }; 103 | await View3D1.Import3DModelAsync(settings); 104 | 105 | // set camera position to view your loaded model 106 | await View3D1.SetCameraPositionAsync( 107 | new Vector3(0, 100, 250),// camera position 108 | new Vector3(0, 50, 0));// optional camera target 109 | } 110 | 111 | private async Task OnLoadObjNoTexturesButtonClick() 112 | { 113 | var settings = new ImportSettings 114 | { 115 | Format = Import3DFormats.Obj, 116 | FileURL = "https://threejs.org/examples/models/obj/male02/male02.obj", 117 | }; 118 | // Also you can get the uuid of object to be imported before its loaded completely 119 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 120 | await View3D1.SetCameraPositionAsync(new Vector3(0, 100, 250), new Vector3(0, 50, 0)); 121 | } 122 | 123 | private async Task OnLoadColladaButtonClick() 124 | { 125 | var settings = new ImportSettings 126 | { 127 | Format = Import3DFormats.Collada, 128 | FileURL = "https://threejs.org/examples/models/collada/elf/elf.dae", 129 | }; 130 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 131 | await View3D1.SetCameraPositionAsync(new Vector3(0, 5, 10), new Vector3(0, 3, 0)); 132 | } 133 | 134 | private async Task OnLoadFbxButtonClick() 135 | { 136 | var settings = new ImportSettings 137 | { 138 | Format = Import3DFormats.Fbx, 139 | FileURL = "https://threejs.org/examples/models/fbx/Samba%20Dancing.fbx", 140 | }; 141 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 142 | 143 | await View3D1.SetCameraPositionAsync(new Vector3(0, 100, 250), new Vector3(0, 50, 0)); 144 | } 145 | 146 | private async Task OnLoadGltfButtonClick() 147 | { 148 | var settings = new ImportSettings 149 | { 150 | Format = Import3DFormats.Gltf, 151 | FileURL = "https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf", 152 | }; 153 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 154 | await View3D1.SetCameraPositionAsync(new Vector3(0, 1, 5), new Vector3(0, 0.5f, 0)); 155 | } 156 | private async Task OnLoadStlButtonClick() 157 | { 158 | var settings = new ImportSettings 159 | { 160 | Format = Import3DFormats.Stl, 161 | FileURL = "https://threejs.org/examples/models/stl/ascii/slotted_disk.stl", 162 | }; 163 | loadedObjectGuid = await View3D1.Import3DModelAsync(settings); 164 | await View3D1.SetCameraPositionAsync(new Vector3(0, 3, 3), new Vector3(0, 1, 0)); 165 | } 166 | 167 | private Task OnObjectLoaded(Object3DArgs e) 168 | { 169 | // After object is loaded to component scene, you can locate it's C# clone in the scene.Children 170 | // At the moment, only Object3D.Uuid and Object3D.Type properties are syncronized. 171 | foreach (var item in scene.Children) 172 | { 173 | if (item.Uuid == e.UUID) 174 | { 175 | this.msg = $"loaded object with id = {e.UUID} and type {item.Type}. Initial guid was {loadedObjectGuid}"; 176 | StateHasChanged(); 177 | break; 178 | } 179 | } 180 | return Task.CompletedTask; 181 | } 182 | 183 | // this one clears scene completely. it removes all items: lights, helpers, meshes, etc. 184 | private async Task OnClearAllClick() 185 | { 186 | await View3D1.ClearSceneAsync(); 187 | AddLights(); 188 | await View3D1.UpdateScene(); 189 | } 190 | 191 | // this one removes last item in scene.Children collection. 192 | // notice, that first two items are lights 193 | private async Task OnDeleteLast() 194 | { 195 | if (scene.Children.Count > 0) 196 | { 197 | var last = scene.Children.Last(); 198 | // removes item by its unique identifier 199 | await View3D1.RemoveByUuidAsync(last.Uuid); 200 | } 201 | } 202 | } -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Pages/Example03.razor: -------------------------------------------------------------------------------- 1 | @page "/example03" 2 | 3 |

Example03

4 |
5 | This example shows how to: 6 |
    7 |
  • Control the Blazor3D Viewer component's dimensions with CSS
    • 8 |
  • Use animated orthographic camera
    • 9 |
  • Use helpers
    • 10 |
  • Camera toggling
    • 11 |
  • Stop camera animation on start using orbit control
    • 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | @code { 26 | private Viewer View3D1 = null!; 27 | private Scene scene = new Scene(); 28 | private bool toggler = false; 29 | 30 | private Camera camera = new OrthographicCamera(left: -2, right: 2, top: 2, bottom: -2, zoom: 0.5f, near: -10) 31 | { 32 | Position = new Vector3(1, 1, 1), 33 | AnimateRotationSettings = new AnimateRotationSettings(true, 0.1, 0, 0.1, radius: 3) 34 | { 35 | StopAnimationOnOrbitControlMove = true 36 | }, 37 | LookAt = new Vector3(0.5f, 0, 0) 38 | }; 39 | 40 | protected override Task OnInitializedAsync() 41 | { 42 | FillScene(); 43 | return base.OnInitializedAsync(); 44 | } 45 | 46 | private void FillScene() 47 | { 48 | scene.Add(new AmbientLight()); 49 | 50 | var capsule = new Mesh 51 | { 52 | Geometry = new CapsuleGeometry(radius: 1, length: 2), 53 | Position = new Vector3(-3, 0, -3), 54 | Material = new MeshStandardMaterial() 55 | { 56 | Color = "blue" 57 | } 58 | }; 59 | scene.Add(capsule); 60 | scene.Add(new ArrowHelper(new Vector3(1, 1, 1), new Vector3(1, 1, 1), 3, "red", 1, 0.2)); 61 | scene.Add(new AxesHelper(5)); 62 | 63 | // Mesh for box helper must be already added to the scene. 64 | scene.Add(new BoxHelper(capsule, "black")); 65 | 66 | scene.Add(new GridHelper(2, 6, "red", "orange") 67 | { 68 | Position = new Vector3(-2, 0, 0) 69 | }); 70 | 71 | scene.Add(new PolarGridHelper(radius: 2, radials: 8, circles: 6, divisions: 32, "red", "orange") 72 | { 73 | Position = new Vector3(2, 0, 0) 74 | }); 75 | 76 | var plane = new Plane(new Vector3(-1, 1, 1), 3); 77 | scene.Add(new PlaneHelper(plane, 2, "green")); 78 | 79 | var plight = new PointLight() 80 | { 81 | Color = "red", 82 | Decay = 2, 83 | Position = new Vector3(-1, 2, -1) 84 | }; 85 | scene.Add(plight); 86 | 87 | // Point light must be already added to the scene. 88 | scene.Add(new PointLightHelper(plight, 0.5)); 89 | } 90 | 91 | private async Task OnToggleCameraClick() 92 | { 93 | if (toggler == true) 94 | { 95 | await View3D1.UpdateCamera(new OrthographicCamera(left: -2, right: 2, top: 2, bottom: -2, zoom: 0.5f, near: -10) 96 | { 97 | Position = new Vector3(1, 1, 1), 98 | AnimateRotationSettings = new AnimateRotationSettings(true, 0.1, 0, 0.1, radius: 3) 99 | { 100 | StopAnimationOnOrbitControlMove = true 101 | }, 102 | LookAt = new Vector3(0.5f, 0, 0) 103 | }); 104 | } 105 | else 106 | { 107 | await View3D1.UpdateCamera(new PerspectiveCamera 108 | { 109 | Position = new Vector3(3, 3, 3), 110 | LookAt = new Vector3(0, 0.5f, 0) 111 | }); 112 | } 113 | toggler = !toggler; 114 | } 115 | 116 | private async Task OnShowCameraInfo() 117 | { 118 | await View3D1.ShowCurrentCameraInfo(); 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Pages/Example04.razor: -------------------------------------------------------------------------------- 1 | @page "/example04" 2 | @implements IDisposable 3 | 4 | 5 |

Example04

6 | 7 |
8 | This example shows how to: 9 |
    10 |
  • Add new cubes (or it can be any mech) with specified positions
    • 11 |
  • Update selected cube (or any mech) position (in fact the complete scene is updated)
    • 12 |
  • Delete selected cube (or any mech) from the scene
    • 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 |
@msg
40 |
41 | 42 | 43 | @code { 44 | private Viewer View3D1 = null!; 45 | private Scene scene = new Scene(); 46 | private Guid lastSelectedGuid; 47 | private Guid lastCubeGuid; 48 | private string msg = string.Empty; 49 | 50 | private double xCoord { get; set; } 51 | private double yCoord { get; set; } 52 | private double zCoord { get; set; } 53 | 54 | private ViewerSettings settings = new ViewerSettings() 55 | { 56 | CanSelect = true, 57 | CanSelectHelpers = false 58 | }; 59 | 60 | 61 | protected override Task OnInitializedAsync() 62 | { 63 | AddLights(); 64 | return base.OnInitializedAsync(); 65 | } 66 | 67 | protected override Task OnAfterRenderAsync(bool firstRender) 68 | { 69 | if (firstRender) 70 | { 71 | View3D1.ObjectSelected += OnObjectSelected; 72 | } 73 | 74 | return base.OnAfterRenderAsync(firstRender); 75 | } 76 | 77 | private void AddLights() 78 | { 79 | scene.Add(new AmbientLight()); 80 | scene.Add(new PointLight() 81 | { 82 | Intensity = 0.5f, 83 | Position = new Vector3(100, 200, 100) 84 | }); 85 | scene.Add(new PointLight() 86 | { 87 | Intensity = 1f, 88 | Position = new Vector3(5, 5, 5) 89 | }); 90 | } 91 | private async Task OnClearAllClick() 92 | { 93 | await View3D1.ClearSceneAsync(); 94 | AddLights(); 95 | await View3D1.UpdateScene(); 96 | } 97 | 98 | private async Task OnClearLast() 99 | { 100 | if (scene.Children.Count == 0) 101 | { 102 | return; 103 | } 104 | var last = scene.Children.Last(); 105 | await View3D1.RemoveByUuidAsync(last.Uuid); 106 | } 107 | 108 | private void OnObjectSelected(Object3DArgs e) 109 | { 110 | lastSelectedGuid = e.UUID; 111 | } 112 | 113 | private async Task OnCreateCubeButtonClick() 114 | { 115 | var mesh = new Mesh 116 | { 117 | Geometry = new BoxGeometry(), 118 | Position = new Vector3(xCoord, yCoord, zCoord) 119 | }; 120 | 121 | scene.Add(mesh); 122 | await View3D1.UpdateScene(); 123 | lastCubeGuid = mesh.Uuid; 124 | msg = $"created new cube with id = {lastCubeGuid}"; 125 | StateHasChanged(); 126 | lastCubeGuid = Guid.Empty; 127 | } 128 | 129 | private async Task OnUpdateCubeButtonClick() 130 | { 131 | var selected = scene.Children.Find(x => x.Uuid == lastSelectedGuid); 132 | if (selected == null) 133 | { 134 | msg = $"nothing selected yet"; 135 | StateHasChanged(); 136 | return; 137 | } 138 | 139 | if (selected is Mesh) 140 | { 141 | var mesh = selected as Mesh; 142 | mesh.Position = new Vector3(xCoord, yCoord, zCoord); 143 | } 144 | 145 | await View3D1.UpdateScene(); 146 | msg = $"updated cube with id = {selected.Uuid}"; 147 | StateHasChanged(); 148 | lastCubeGuid = Guid.Empty; 149 | } 150 | 151 | private async Task OnDeleteSelected() 152 | { 153 | var selected = scene.Children.Find(x => x.Uuid == lastSelectedGuid); 154 | if (selected == null) 155 | { 156 | msg = $"nothing selected yet"; 157 | StateHasChanged(); 158 | return; 159 | } 160 | await View3D1.RemoveByUuidAsync(selected.Uuid); 161 | 162 | msg = $"deleted cube with id = {lastSelectedGuid}"; 163 | StateHasChanged(); 164 | lastCubeGuid = Guid.Empty; 165 | } 166 | 167 | public void Dispose() 168 | { 169 | View3D1.ObjectSelected -= OnObjectSelected; 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Pages/Example05.razor: -------------------------------------------------------------------------------- 1 | @page "/example05" 2 | @using HomagGroup.Blazor3D.Textures; 3 | 4 |

Example05

5 | 6 |
7 | This example shows how to: 8 |
    9 |
  • Load a bitmap texture to the mesh using URL
    • 10 |
  • Use different wrapping types
    • 11 |
  • Use texture repeating, offset and rotation
    • 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | @code { 22 | private Viewer View3D1 = null!; 23 | 24 | private Scene scene = new Scene(); 25 | 26 | 27 | protected override Task OnInitializedAsync() 28 | { 29 | scene.Add(new AmbientLight()); 30 | scene.Add(new PointLight() 31 | { 32 | Position = new Vector3(1, 3, 0) 33 | }); 34 | 35 | scene.Add(new Mesh 36 | { 37 | Geometry = new BoxGeometry(), 38 | Position = new Vector3(-2, 0, -2), 39 | Material = new MeshStandardMaterial() 40 | { 41 | Color = "white", 42 | Map = CreateTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg") 43 | } 44 | }); 45 | 46 | scene.Add(new Mesh 47 | { 48 | Geometry = new BoxGeometry(), 49 | Position = new Vector3(0, 0, -2), 50 | Material = new MeshStandardMaterial() 51 | { 52 | Color = "lightgreen", 53 | Map = CreateTexture( 54 | "https://threejs.org/examples/textures/uv_grid_opengl.jpg", 55 | WrappingType.MirroredRepeatWrapping, 56 | WrappingType.MirroredRepeatWrapping, 57 | new Vector2(4, 4), 58 | null, 59 | Math.PI / 4 60 | ) 61 | } 62 | }); 63 | 64 | scene.Add(new Mesh 65 | { 66 | Geometry = new BoxGeometry(), 67 | Position = new Vector3(2, 0, -2), 68 | Material = new MeshStandardMaterial() 69 | { 70 | Color = "orange", 71 | Map = CreateTexture( 72 | "https://threejs.org/examples/textures/uv_grid_opengl.jpg", 73 | WrappingType.RepeatWrapping, 74 | WrappingType.RepeatWrapping, 75 | new Vector2(2, 2), 76 | new Vector2(0.25f, 0.25f) 77 | ) 78 | } 79 | }); 80 | 81 | scene.Add(new Mesh 82 | { 83 | Geometry = new SphereGeometry(radius: 0.6f), 84 | Position = new Vector3(-2, 0, 0), 85 | Material = new MeshStandardMaterial() 86 | { 87 | Color = "white", 88 | Map = CreateTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg") 89 | }, 90 | }); 91 | 92 | scene.Add(new Mesh 93 | { 94 | Geometry = new TorusGeometry(radius: 0.5f, tube: 0.3f, radialSegments: 12, tubularSegments: 12), 95 | Position = new Vector3(0, 0, 0), 96 | Material = new MeshStandardMaterial() 97 | { 98 | Color = "white", 99 | Map = CreateTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg") 100 | } 101 | }); 102 | 103 | scene.Add(new Mesh 104 | { 105 | Geometry = new OctahedronGeometry(radius: 0.75f), 106 | Position = new Vector3(2, 0, 0), 107 | Material = new MeshStandardMaterial() 108 | { 109 | Color = "white", 110 | Map = CreateTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg") 111 | } 112 | }); 113 | 114 | return base.OnInitializedAsync(); 115 | } 116 | 117 | private Texture CreateTexture( 118 | string url, 119 | WrappingType wraps = WrappingType.ClampToEdgeWrapping, 120 | WrappingType wrapt = WrappingType.ClampToEdgeWrapping, 121 | Vector2? repeat = null, 122 | Vector2? offset = null, 123 | double? rotation = null) 124 | { 125 | var texture = new Texture() 126 | { 127 | TextureUrl = url, 128 | WrapS = wraps, 129 | WrapT = wrapt 130 | }; 131 | 132 | texture.Repeat = repeat == null ? texture.Repeat : repeat; 133 | texture.Offset = offset == null ? texture.Offset : offset; 134 | texture.Rotation = !rotation.HasValue ? texture.Rotation : rotation.Value; 135 | 136 | return texture; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Pages/Example06.razor: -------------------------------------------------------------------------------- 1 | @page "/example06" 2 | @using HomagGroup.Blazor3D.Geometires.Text; 3 | 4 |

Example06

5 | 6 |
7 | This example shows how to: 8 |
    9 |
  • Add text object with extruded geometry
    • 10 |
  • Add text object with shaped geometry
    • 11 |
  • Add text object with stroke geometry
    • 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | @code { 22 | private Viewer View3D1 = null!; 23 | 24 | private Scene scene = new Scene(); 25 | 26 | 27 | protected override Task OnInitializedAsync() 28 | { 29 | AddLights(); 30 | FillScene(); 31 | return base.OnInitializedAsync(); 32 | } 33 | 34 | private void AddLights() 35 | { 36 | scene.Add(new AmbientLight()); 37 | var plight = new PointLight() 38 | { 39 | //Color = "red", 40 | Decay = 2, 41 | Position = new Vector3(1, 5, 0) 42 | }; 43 | scene.Add(plight); 44 | scene.Add(new PointLightHelper(plight, 0.5)); 45 | } 46 | private void FillScene() 47 | { 48 | var text = new Text 49 | { 50 | Material = new MeshStandardMaterial 51 | { 52 | Color = "red", 53 | }, 54 | Geometry = new TextExtrudeGeometry 55 | { 56 | FontURL = "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", 57 | Size = 1, 58 | Height = 0.1, 59 | } 60 | }; 61 | 62 | scene.Add(text); 63 | 64 | text = new Text 65 | { 66 | Material = new MeshStandardMaterial 67 | { 68 | Color = "blue", 69 | }, 70 | Geometry = new TextExtrudeGeometry 71 | { 72 | FontURL = "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", 73 | Size = 1, 74 | Height = 0.5, 75 | BevelEnabled = true, 76 | BevelSegments = 2, 77 | BevelSize = 0.05, 78 | BevelThickness = 0.1 79 | }, 80 | Position = new Vector3(0, 0, -1) 81 | }; 82 | scene.Add(text); 83 | 84 | text = new Text 85 | { 86 | Material = new MeshStandardMaterial 87 | { 88 | Color = "violet", 89 | }, 90 | Geometry = new TextShapeGeometry 91 | { 92 | FontURL = "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", 93 | Size = 1, 94 | }, 95 | Position = new Vector3(0, 0, 1) 96 | }; 97 | scene.Add(text); 98 | 99 | text = new Text 100 | { 101 | Material = new MeshStandardMaterial 102 | { 103 | Color = "violet", 104 | }, 105 | Geometry = new TextStrokeGeometry 106 | { 107 | FontURL = "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", 108 | Size = 1, 109 | StrokeWidth = 0.05 110 | }, 111 | Position = new Vector3(0, 0, 2) 112 | }; 113 | scene.Add(text); 114 | 115 | } 116 | 117 | } 118 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | 3 | 4 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Program.cs: -------------------------------------------------------------------------------- 1 | using Blazor3D.Examples.WebAsm; 2 | using Microsoft.AspNetCore.Components.Web; 3 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 4 | 5 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 6 | builder.RootComponents.Add("#app"); 7 | builder.RootComponents.Add("head::after"); 8 | 9 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 10 | 11 | await builder.Build().RunAsync(); 12 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:57036", 7 | "sslPort": 44385 8 | } 9 | }, 10 | "profiles": { 11 | "Blazor3D.Examples.WebAsm": { 12 | "commandName": "Project", 13 | "dotnetRunMessages": true, 14 | "launchBrowser": true, 15 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 16 | "applicationUrl": "https://localhost:7260;http://localhost:5260", 17 | "environmentVariables": { 18 | "ASPNETCORE_ENVIRONMENT": "Development" 19 | } 20 | }, 21 | "IIS Express": { 22 | "commandName": "IISExpress", 23 | "launchBrowser": true, 24 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 25 | "environmentVariables": { 26 | "ASPNETCORE_ENVIRONMENT": "Development" 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 |
4 |
5 | 6 |
7 | 8 |
9 |
10 | About 11 |
12 | 13 |
14 | @Body 15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Shared/MainLayout.razor.css: -------------------------------------------------------------------------------- 1 | .page { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | main { 8 | flex: 1; 9 | } 10 | 11 | .sidebar { 12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 13 | } 14 | 15 | .top-row { 16 | background-color: #f7f7f7; 17 | border-bottom: 1px solid #d6d5d5; 18 | justify-content: flex-end; 19 | height: 3.5rem; 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | .top-row ::deep a, .top-row ::deep .btn-link { 25 | white-space: nowrap; 26 | margin-left: 1.5rem; 27 | text-decoration: none; 28 | } 29 | 30 | .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { 31 | text-decoration: underline; 32 | } 33 | 34 | .top-row ::deep a:first-child { 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | } 38 | 39 | @media (max-width: 640.98px) { 40 | .top-row:not(.auth) { 41 | display: none; 42 | } 43 | 44 | .top-row.auth { 45 | justify-content: space-between; 46 | } 47 | 48 | .top-row ::deep a, .top-row ::deep .btn-link { 49 | margin-left: 0; 50 | } 51 | } 52 | 53 | @media (min-width: 641px) { 54 | .page { 55 | flex-direction: row; 56 | } 57 | 58 | .sidebar { 59 | width: 250px; 60 | height: 100vh; 61 | position: sticky; 62 | top: 0; 63 | } 64 | 65 | .top-row { 66 | position: sticky; 67 | top: 0; 68 | z-index: 1; 69 | } 70 | 71 | .top-row.auth ::deep a:first-child { 72 | flex: 1; 73 | text-align: right; 74 | width: 0; 75 | } 76 | 77 | .top-row, article { 78 | padding-left: 2rem !important; 79 | padding-right: 1.5rem !important; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Shared/NavMenu.razor: -------------------------------------------------------------------------------- 1 | 
2 |
3 | Blazor3D.Examples 4 | 7 |
8 |
9 | 10 |
11 | 48 |
49 | 50 | @code { 51 | private bool collapseNavMenu = true; 52 | 53 | private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; 54 | 55 | private void ToggleNavMenu() 56 | { 57 | collapseNavMenu = !collapseNavMenu; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/Shared/NavMenu.razor.css: -------------------------------------------------------------------------------- 1 | .navbar-toggler { 2 | background-color: rgba(255, 255, 255, 0.1); 3 | } 4 | 5 | .top-row { 6 | height: 3.5rem; 7 | background-color: rgba(0,0,0,0.4); 8 | } 9 | 10 | .navbar-brand { 11 | font-size: 1.1rem; 12 | } 13 | 14 | .oi { 15 | width: 2rem; 16 | font-size: 1.1rem; 17 | vertical-align: text-top; 18 | top: -2px; 19 | } 20 | 21 | .nav-item { 22 | font-size: 0.9rem; 23 | padding-bottom: 0.5rem; 24 | } 25 | 26 | .nav-item:first-of-type { 27 | padding-top: 1rem; 28 | } 29 | 30 | .nav-item:last-of-type { 31 | padding-bottom: 1rem; 32 | } 33 | 34 | .nav-item ::deep a { 35 | color: #d7d7d7; 36 | border-radius: 4px; 37 | height: 3rem; 38 | display: flex; 39 | align-items: center; 40 | line-height: 3rem; 41 | } 42 | 43 | .nav-item ::deep a.active { 44 | background-color: rgba(255,255,255,0.25); 45 | color: white; 46 | } 47 | 48 | .nav-item ::deep a:hover { 49 | background-color: rgba(255,255,255,0.1); 50 | color: white; 51 | } 52 | 53 | @media (min-width: 641px) { 54 | .navbar-toggler { 55 | display: none; 56 | } 57 | 58 | .collapse { 59 | /* Never collapse the sidebar for wide screens */ 60 | display: block; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http 8 | @using Microsoft.JSInterop 9 | @using Blazor3D.Examples.WebAsm 10 | @using Blazor3D.Examples.WebAsm.Shared 11 | @using HomagGroup.Blazor3D.Viewers 12 | @using HomagGroup.Blazor3D.Settings 13 | @using HomagGroup.Blazor3D.Scenes 14 | @using HomagGroup.Blazor3D.Lights 15 | @using HomagGroup.Blazor3D.Maths 16 | @using HomagGroup.Blazor3D.Materials 17 | @using HomagGroup.Blazor3D.Objects 18 | @using HomagGroup.Blazor3D.Geometires 19 | @using HomagGroup.Blazor3D.Enums 20 | @using HomagGroup.Blazor3D.Cameras 21 | @using HomagGroup.Blazor3D.Helpers 22 | @using HomagGroup.Blazor3D.Events -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/assets/blazor3d.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.WebAsm/wwwroot/assets/blazor3d.glb -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/app.css: -------------------------------------------------------------------------------- 1 | @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); 2 | 3 | html, body { 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | h1:focus { 8 | outline: none; 9 | } 10 | 11 | a, .btn-link { 12 | color: #0071c1; 13 | } 14 | 15 | .btn-primary { 16 | color: #fff; 17 | background-color: #1b6ec2; 18 | border-color: #1861ac; 19 | } 20 | 21 | .content { 22 | padding-top: 1.1rem; 23 | } 24 | 25 | .valid.modified:not([type=checkbox]) { 26 | outline: 1px solid #26b050; 27 | } 28 | 29 | .invalid { 30 | outline: 1px solid red; 31 | } 32 | 33 | .validation-message { 34 | color: red; 35 | } 36 | 37 | #blazor-error-ui { 38 | background: lightyellow; 39 | bottom: 0; 40 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 41 | display: none; 42 | left: 0; 43 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 44 | position: fixed; 45 | width: 100%; 46 | z-index: 1000; 47 | } 48 | 49 | #blazor-error-ui .dismiss { 50 | cursor: pointer; 51 | position: absolute; 52 | right: 0.75rem; 53 | top: 0.5rem; 54 | } 55 | 56 | .blazor-error-boundary { 57 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 58 | padding: 1rem 1rem 1rem 3.7rem; 59 | color: white; 60 | } 61 | 62 | .blazor-error-boundary::after { 63 | content: "An error has occurred." 64 | } 65 | 66 | .v3d { 67 | display: flex; 68 | height: 600px; 69 | } 70 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/FONT-LICENSE: -------------------------------------------------------------------------------- 1 | SIL OPEN FONT LICENSE Version 1.1 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | PREAMBLE 6 | The goals of the Open Font License (OFL) are to stimulate worldwide 7 | development of collaborative font projects, to support the font creation 8 | efforts of academic and linguistic communities, and to provide a free and 9 | open framework in which fonts may be shared and improved in partnership 10 | with others. 11 | 12 | The OFL allows the licensed fonts to be used, studied, modified and 13 | redistributed freely as long as they are not sold by themselves. The 14 | fonts, including any derivative works, can be bundled, embedded, 15 | redistributed and/or sold with any software provided that any reserved 16 | names are not used by derivative works. The fonts and derivatives, 17 | however, cannot be released under any other type of license. The 18 | requirement for fonts to remain under this license does not apply 19 | to any document created using the fonts or their derivatives. 20 | 21 | DEFINITIONS 22 | "Font Software" refers to the set of files released by the Copyright 23 | Holder(s) under this license and clearly marked as such. This may 24 | include source files, build scripts and documentation. 25 | 26 | "Reserved Font Name" refers to any names specified as such after the 27 | copyright statement(s). 28 | 29 | "Original Version" refers to the collection of Font Software components as 30 | distributed by the Copyright Holder(s). 31 | 32 | "Modified Version" refers to any derivative made by adding to, deleting, 33 | or substituting -- in part or in whole -- any of the components of the 34 | Original Version, by changing formats or by porting the Font Software to a 35 | new environment. 36 | 37 | "Author" refers to any designer, engineer, programmer, technical 38 | writer or other person who contributed to the Font Software. 39 | 40 | PERMISSION & CONDITIONS 41 | Permission is hereby granted, free of charge, to any person obtaining 42 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 43 | redistribute, and sell modified and unmodified copies of the Font 44 | Software, subject to the following conditions: 45 | 46 | 1) Neither the Font Software nor any of its individual components, 47 | in Original or Modified Versions, may be sold by itself. 48 | 49 | 2) Original or Modified Versions of the Font Software may be bundled, 50 | redistributed and/or sold with any software, provided that each copy 51 | contains the above copyright notice and this license. These can be 52 | included either as stand-alone text files, human-readable headers or 53 | in the appropriate machine-readable metadata fields within text or 54 | binary files as long as those fields can be easily viewed by the user. 55 | 56 | 3) No Modified Version of the Font Software may use the Reserved Font 57 | Name(s) unless explicit written permission is granted by the corresponding 58 | Copyright Holder. This restriction only applies to the primary font name as 59 | presented to the users. 60 | 61 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 62 | Software shall not be used to promote, endorse or advertise any 63 | Modified Version, except to acknowledge the contribution(s) of the 64 | Copyright Holder(s) and the Author(s) or with their explicit written 65 | permission. 66 | 67 | 5) The Font Software, modified or unmodified, in part or in whole, 68 | must be distributed entirely under this license, and must not be 69 | distributed under any other license. The requirement for fonts to 70 | remain under this license does not apply to any document created 71 | using the Font Software. 72 | 73 | TERMINATION 74 | This license becomes null and void if any of the above conditions are 75 | not met. 76 | 77 | DISCLAIMER 78 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 79 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 80 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 81 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 82 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 83 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 84 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 85 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 86 | OTHER DEALINGS IN THE FONT SOFTWARE. 87 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/ICON-LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/README.md: -------------------------------------------------------------------------------- 1 | [Open Iconic v1.1.1](http://useiconic.com/open) 2 | =========== 3 | 4 | ### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons) 5 | 6 | 7 | 8 | ## What's in Open Iconic? 9 | 10 | * 223 icons designed to be legible down to 8 pixels 11 | * Super-light SVG files - 61.8 for the entire set 12 | * SVG sprite—the modern replacement for icon fonts 13 | * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats 14 | * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats 15 | * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px. 16 | 17 | 18 | ## Getting Started 19 | 20 | #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections. 21 | 22 | ### General Usage 23 | 24 | #### Using Open Iconic's SVGs 25 | 26 | We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute). 27 | 28 | ``` 29 | icon name 30 | ``` 31 | 32 | #### Using Open Iconic's SVG Sprite 33 | 34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. 35 | 36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `` *tag and a unique class name for each different icon in the* `` *tag.* 37 | 38 | ``` 39 | 40 | 41 | 42 | ``` 43 | 44 | Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `` tag with equal width and height dimensions. 45 | 46 | ``` 47 | .icon { 48 | width: 16px; 49 | height: 16px; 50 | } 51 | ``` 52 | 53 | Coloring icons is even easier. All you need to do is set the `fill` rule on the `` tag. 54 | 55 | ``` 56 | .icon-account-login { 57 | fill: #f00; 58 | } 59 | ``` 60 | 61 | To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/). 62 | 63 | #### Using Open Iconic's Icon Font... 64 | 65 | 66 | ##### …with Bootstrap 67 | 68 | You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}` 69 | 70 | 71 | ``` 72 | 73 | ``` 74 | 75 | 76 | ``` 77 | 78 | ``` 79 | 80 | ##### …with Foundation 81 | 82 | You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}` 83 | 84 | ``` 85 | 86 | ``` 87 | 88 | 89 | ``` 90 | 91 | ``` 92 | 93 | ##### …on its own 94 | 95 | You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}` 96 | 97 | ``` 98 | 99 | ``` 100 | 101 | ``` 102 | 103 | ``` 104 | 105 | 106 | ## License 107 | 108 | ### Icons 109 | 110 | All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT). 111 | 112 | ### Fonts 113 | 114 | All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web). 115 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi{position:relative;top:1px;display:inline-block;speak:none;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi.oi-align-center:before{text-align:center}.oi.oi-align-left:before{text-align:left}.oi.oi-align-right:before{text-align:right}.oi.oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi.oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi.oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi-account-login:before{content:'\e000'}.oi-account-logout:before{content:'\e001'}.oi-action-redo:before{content:'\e002'}.oi-action-undo:before{content:'\e003'}.oi-align-center:before{content:'\e004'}.oi-align-left:before{content:'\e005'}.oi-align-right:before{content:'\e006'}.oi-aperture:before{content:'\e007'}.oi-arrow-bottom:before{content:'\e008'}.oi-arrow-circle-bottom:before{content:'\e009'}.oi-arrow-circle-left:before{content:'\e00a'}.oi-arrow-circle-right:before{content:'\e00b'}.oi-arrow-circle-top:before{content:'\e00c'}.oi-arrow-left:before{content:'\e00d'}.oi-arrow-right:before{content:'\e00e'}.oi-arrow-thick-bottom:before{content:'\e00f'}.oi-arrow-thick-left:before{content:'\e010'}.oi-arrow-thick-right:before{content:'\e011'}.oi-arrow-thick-top:before{content:'\e012'}.oi-arrow-top:before{content:'\e013'}.oi-audio-spectrum:before{content:'\e014'}.oi-audio:before{content:'\e015'}.oi-badge:before{content:'\e016'}.oi-ban:before{content:'\e017'}.oi-bar-chart:before{content:'\e018'}.oi-basket:before{content:'\e019'}.oi-battery-empty:before{content:'\e01a'}.oi-battery-full:before{content:'\e01b'}.oi-beaker:before{content:'\e01c'}.oi-bell:before{content:'\e01d'}.oi-bluetooth:before{content:'\e01e'}.oi-bold:before{content:'\e01f'}.oi-bolt:before{content:'\e020'}.oi-book:before{content:'\e021'}.oi-bookmark:before{content:'\e022'}.oi-box:before{content:'\e023'}.oi-briefcase:before{content:'\e024'}.oi-british-pound:before{content:'\e025'}.oi-browser:before{content:'\e026'}.oi-brush:before{content:'\e027'}.oi-bug:before{content:'\e028'}.oi-bullhorn:before{content:'\e029'}.oi-calculator:before{content:'\e02a'}.oi-calendar:before{content:'\e02b'}.oi-camera-slr:before{content:'\e02c'}.oi-caret-bottom:before{content:'\e02d'}.oi-caret-left:before{content:'\e02e'}.oi-caret-right:before{content:'\e02f'}.oi-caret-top:before{content:'\e030'}.oi-cart:before{content:'\e031'}.oi-chat:before{content:'\e032'}.oi-check:before{content:'\e033'}.oi-chevron-bottom:before{content:'\e034'}.oi-chevron-left:before{content:'\e035'}.oi-chevron-right:before{content:'\e036'}.oi-chevron-top:before{content:'\e037'}.oi-circle-check:before{content:'\e038'}.oi-circle-x:before{content:'\e039'}.oi-clipboard:before{content:'\e03a'}.oi-clock:before{content:'\e03b'}.oi-cloud-download:before{content:'\e03c'}.oi-cloud-upload:before{content:'\e03d'}.oi-cloud:before{content:'\e03e'}.oi-cloudy:before{content:'\e03f'}.oi-code:before{content:'\e040'}.oi-cog:before{content:'\e041'}.oi-collapse-down:before{content:'\e042'}.oi-collapse-left:before{content:'\e043'}.oi-collapse-right:before{content:'\e044'}.oi-collapse-up:before{content:'\e045'}.oi-command:before{content:'\e046'}.oi-comment-square:before{content:'\e047'}.oi-compass:before{content:'\e048'}.oi-contrast:before{content:'\e049'}.oi-copywriting:before{content:'\e04a'}.oi-credit-card:before{content:'\e04b'}.oi-crop:before{content:'\e04c'}.oi-dashboard:before{content:'\e04d'}.oi-data-transfer-download:before{content:'\e04e'}.oi-data-transfer-upload:before{content:'\e04f'}.oi-delete:before{content:'\e050'}.oi-dial:before{content:'\e051'}.oi-document:before{content:'\e052'}.oi-dollar:before{content:'\e053'}.oi-double-quote-sans-left:before{content:'\e054'}.oi-double-quote-sans-right:before{content:'\e055'}.oi-double-quote-serif-left:before{content:'\e056'}.oi-double-quote-serif-right:before{content:'\e057'}.oi-droplet:before{content:'\e058'}.oi-eject:before{content:'\e059'}.oi-elevator:before{content:'\e05a'}.oi-ellipses:before{content:'\e05b'}.oi-envelope-closed:before{content:'\e05c'}.oi-envelope-open:before{content:'\e05d'}.oi-euro:before{content:'\e05e'}.oi-excerpt:before{content:'\e05f'}.oi-expand-down:before{content:'\e060'}.oi-expand-left:before{content:'\e061'}.oi-expand-right:before{content:'\e062'}.oi-expand-up:before{content:'\e063'}.oi-external-link:before{content:'\e064'}.oi-eye:before{content:'\e065'}.oi-eyedropper:before{content:'\e066'}.oi-file:before{content:'\e067'}.oi-fire:before{content:'\e068'}.oi-flag:before{content:'\e069'}.oi-flash:before{content:'\e06a'}.oi-folder:before{content:'\e06b'}.oi-fork:before{content:'\e06c'}.oi-fullscreen-enter:before{content:'\e06d'}.oi-fullscreen-exit:before{content:'\e06e'}.oi-globe:before{content:'\e06f'}.oi-graph:before{content:'\e070'}.oi-grid-four-up:before{content:'\e071'}.oi-grid-three-up:before{content:'\e072'}.oi-grid-two-up:before{content:'\e073'}.oi-hard-drive:before{content:'\e074'}.oi-header:before{content:'\e075'}.oi-headphones:before{content:'\e076'}.oi-heart:before{content:'\e077'}.oi-home:before{content:'\e078'}.oi-image:before{content:'\e079'}.oi-inbox:before{content:'\e07a'}.oi-infinity:before{content:'\e07b'}.oi-info:before{content:'\e07c'}.oi-italic:before{content:'\e07d'}.oi-justify-center:before{content:'\e07e'}.oi-justify-left:before{content:'\e07f'}.oi-justify-right:before{content:'\e080'}.oi-key:before{content:'\e081'}.oi-laptop:before{content:'\e082'}.oi-layers:before{content:'\e083'}.oi-lightbulb:before{content:'\e084'}.oi-link-broken:before{content:'\e085'}.oi-link-intact:before{content:'\e086'}.oi-list-rich:before{content:'\e087'}.oi-list:before{content:'\e088'}.oi-location:before{content:'\e089'}.oi-lock-locked:before{content:'\e08a'}.oi-lock-unlocked:before{content:'\e08b'}.oi-loop-circular:before{content:'\e08c'}.oi-loop-square:before{content:'\e08d'}.oi-loop:before{content:'\e08e'}.oi-magnifying-glass:before{content:'\e08f'}.oi-map-marker:before{content:'\e090'}.oi-map:before{content:'\e091'}.oi-media-pause:before{content:'\e092'}.oi-media-play:before{content:'\e093'}.oi-media-record:before{content:'\e094'}.oi-media-skip-backward:before{content:'\e095'}.oi-media-skip-forward:before{content:'\e096'}.oi-media-step-backward:before{content:'\e097'}.oi-media-step-forward:before{content:'\e098'}.oi-media-stop:before{content:'\e099'}.oi-medical-cross:before{content:'\e09a'}.oi-menu:before{content:'\e09b'}.oi-microphone:before{content:'\e09c'}.oi-minus:before{content:'\e09d'}.oi-monitor:before{content:'\e09e'}.oi-moon:before{content:'\e09f'}.oi-move:before{content:'\e0a0'}.oi-musical-note:before{content:'\e0a1'}.oi-paperclip:before{content:'\e0a2'}.oi-pencil:before{content:'\e0a3'}.oi-people:before{content:'\e0a4'}.oi-person:before{content:'\e0a5'}.oi-phone:before{content:'\e0a6'}.oi-pie-chart:before{content:'\e0a7'}.oi-pin:before{content:'\e0a8'}.oi-play-circle:before{content:'\e0a9'}.oi-plus:before{content:'\e0aa'}.oi-power-standby:before{content:'\e0ab'}.oi-print:before{content:'\e0ac'}.oi-project:before{content:'\e0ad'}.oi-pulse:before{content:'\e0ae'}.oi-puzzle-piece:before{content:'\e0af'}.oi-question-mark:before{content:'\e0b0'}.oi-rain:before{content:'\e0b1'}.oi-random:before{content:'\e0b2'}.oi-reload:before{content:'\e0b3'}.oi-resize-both:before{content:'\e0b4'}.oi-resize-height:before{content:'\e0b5'}.oi-resize-width:before{content:'\e0b6'}.oi-rss-alt:before{content:'\e0b7'}.oi-rss:before{content:'\e0b8'}.oi-script:before{content:'\e0b9'}.oi-share-boxed:before{content:'\e0ba'}.oi-share:before{content:'\e0bb'}.oi-shield:before{content:'\e0bc'}.oi-signal:before{content:'\e0bd'}.oi-signpost:before{content:'\e0be'}.oi-sort-ascending:before{content:'\e0bf'}.oi-sort-descending:before{content:'\e0c0'}.oi-spreadsheet:before{content:'\e0c1'}.oi-star:before{content:'\e0c2'}.oi-sun:before{content:'\e0c3'}.oi-tablet:before{content:'\e0c4'}.oi-tag:before{content:'\e0c5'}.oi-tags:before{content:'\e0c6'}.oi-target:before{content:'\e0c7'}.oi-task:before{content:'\e0c8'}.oi-terminal:before{content:'\e0c9'}.oi-text:before{content:'\e0ca'}.oi-thumb-down:before{content:'\e0cb'}.oi-thumb-up:before{content:'\e0cc'}.oi-timer:before{content:'\e0cd'}.oi-transfer:before{content:'\e0ce'}.oi-trash:before{content:'\e0cf'}.oi-underline:before{content:'\e0d0'}.oi-vertical-align-bottom:before{content:'\e0d1'}.oi-vertical-align-center:before{content:'\e0d2'}.oi-vertical-align-top:before{content:'\e0d3'}.oi-video:before{content:'\e0d4'}.oi-volume-high:before{content:'\e0d5'}.oi-volume-low:before{content:'\e0d6'}.oi-volume-off:before{content:'\e0d7'}.oi-warning:before{content:'\e0d8'}.oi-wifi:before{content:'\e0d9'}.oi-wrench:before{content:'\e0da'}.oi-x:before{content:'\e0db'}.oi-yen:before{content:'\e0dc'}.oi-zoom-in:before{content:'\e0dd'}.oi-zoom-out:before{content:'\e0de'} -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/fonts/open-iconic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/fonts/open-iconic.eot -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/fonts/open-iconic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/fonts/open-iconic.otf -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/fonts/open-iconic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.WebAsm/wwwroot/css/open-iconic/font/fonts/open-iconic.woff -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Examples/Blazor3D.Examples.WebAsm/wwwroot/favicon.ico -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.WebAsm/wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blazor3D.Examples.WebAsm 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Loading...
16 | 17 |
18 | An unhandled error has occurred. 19 | Reload 20 | 🗙 21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Examples/Blazor3D.Examples.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.2.32616.157 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor3D.Examples.Server", "Blazor3D.Examples.Server\Blazor3D.Examples.Server.csproj", "{1650CC04-FED2-4100-9618-42DDAFF9772C}" 7 | EndProject 8 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor3D.Examples.WebAsm", "Blazor3D.Examples.WebAsm\Blazor3D.Examples.WebAsm.csproj", "{0D1430B0-02FF-4951-88C4-8601D2E58912}" 9 | EndProject 10 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{D7BD4255-F8AB-4281-8520-DEF890656582}" 11 | ProjectSection(SolutionItems) = preProject 12 | ..\Readme.md = ..\Readme.md 13 | EndProjectSection 14 | EndProject 15 | Global 16 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 17 | Debug|Any CPU = Debug|Any CPU 18 | Release|Any CPU = Release|Any CPU 19 | EndGlobalSection 20 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 21 | {1650CC04-FED2-4100-9618-42DDAFF9772C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 22 | {1650CC04-FED2-4100-9618-42DDAFF9772C}.Debug|Any CPU.Build.0 = Debug|Any CPU 23 | {1650CC04-FED2-4100-9618-42DDAFF9772C}.Release|Any CPU.ActiveCfg = Release|Any CPU 24 | {1650CC04-FED2-4100-9618-42DDAFF9772C}.Release|Any CPU.Build.0 = Release|Any CPU 25 | {0D1430B0-02FF-4951-88C4-8601D2E58912}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 26 | {0D1430B0-02FF-4951-88C4-8601D2E58912}.Debug|Any CPU.Build.0 = Debug|Any CPU 27 | {0D1430B0-02FF-4951-88C4-8601D2E58912}.Release|Any CPU.ActiveCfg = Release|Any CPU 28 | {0D1430B0-02FF-4951-88C4-8601D2E58912}.Release|Any CPU.Build.0 = Release|Any CPU 29 | EndGlobalSection 30 | GlobalSection(SolutionProperties) = preSolution 31 | HideSolutionNode = FALSE 32 | EndGlobalSection 33 | GlobalSection(ExtensibilityGlobals) = postSolution 34 | SolutionGuid = {DC3EDAA7-29AE-4F1B-9544-A88B72A4F7C3} 35 | EndGlobalSection 36 | EndGlobal 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022-2023 Roman Simuta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Blazor3D 2 | ![Blazor3D](../main/Assets/Blazor3D.jpg) 3 | 4 | ## Source code 5 | 6 | You can find the source code in the [Blazor3D-Core repository](https://github.com/HomagGroup/Blazor3D-Core). 7 | 8 | ## Overview 9 | This repository contains examples of using the Blazor3D Viewer component in the [ASP.NET Core Blazor](https://docs.microsoft.com/en-us/aspnet/core/blazor/) applications. 10 | 11 | ## Braking changes 12 | Since package version v0.1.39 the Blazor3D package root namespace changed from Blazor3D to HomagGroup.Blazor3D 13 | 14 | ## Live preview 15 | 16 | Live preview of these examples WebAsm version you can see at [https://homaggroup.github.io/Blazor3D/](https://homaggroup.github.io/Blazor3D/) 17 | 18 | ## Installing 19 | 20 | With .NET CLI 21 | ``` 22 | dotnet add package Blazor3D 23 | ``` 24 | With Package Manager 25 | ``` 26 | Install-Package Blazor3D 27 | ``` 28 | Or just download it from and add it as project reference. 29 | 30 | ## Using 31 | 32 | ### With default scene 33 | See example [here](../main/Examples/Blazor3D.Examples.WebAsm/Pages/Index.razor) 34 | 35 | 1. Add usings to the _Imports.razor or to your page 36 | ``` 37 | @using HomagGroup.Blazor3D.Viewers 38 | ``` 39 | 2. Put Blazor3D Viewer component to your page 40 | ``` 41 | 42 | ``` 43 | 44 | ### With custom scene 45 | See example [here](../main/Examples/Blazor3D.Examples.WebAsm/Pages/Example01.razor) 46 | 47 | 1. Add usings to the _Imports.razor or to your page 48 | ``` 49 | @using HomagGroup.Blazor3D.Settings 50 | @using HomagGroup.Blazor3D.Scenes 51 | @using HomagGroup.Blazor3D.Lights 52 | @using HomagGroup.Blazor3D.Maths 53 | @using HomagGroup.Blazor3D.Materials 54 | @using HomagGroup.Blazor3D.Objects 55 | @using HomagGroup.Blazor3D.Geometires 56 | @using HomagGroup.Blazor3D.Enums 57 | ``` 58 | 2. Put the View3D component to you blazor application page and add some code 59 | ``` 60 |
61 |
62 | 63 |
64 |
65 | 66 | @code { 67 | private Viewer View3D1 = null!; 68 | private Guid objGuid; 69 | private ViewerSettings settings = new ViewerSettings() 70 | { 71 | ContainerId = "example1", 72 | }; 73 | 74 | private Scene scene = new Scene(); 75 | protected override Task OnInitializedAsync() 76 | { 77 | scene.Add(new AmbientLight()); 78 | scene.Add(new PointLight() 79 | { 80 | Position = new Vector3 81 | { 82 | X = 1, 83 | Y = 3, 84 | Z = 0 85 | } 86 | }); 87 | scene.Add(new Mesh()); 88 | scene.Add(new Mesh 89 | { 90 | Geometry = new BoxGeometry 91 | { 92 | Width = 2, 93 | Height = 0.5f 94 | }, 95 | Position = new Vector3 96 | { 97 | X = -1, 98 | Y = 1, 99 | Z = -1 100 | } 101 | , 102 | Rotation = new Euler 103 | { 104 | X = Math.PI / 4 105 | } 106 | }); 107 | 108 | scene.Add(new Mesh 109 | { 110 | Geometry = new CircleGeometry(), 111 | Position = new Vector3 112 | { 113 | X = 1, 114 | Y = 1, 115 | Z = -1 116 | }, 117 | Scale = new Vector3(0.5f, 1f, 1f) 118 | }); 119 | 120 | return base.OnInitializedAsync(); 121 | } 122 | ``` 123 | 124 | ## Examples 125 | 126 | ### Example01 127 | 128 | This example shows how to: 129 |
    130 |
  • Control the Blazor3D Viewer component's dimensions with CSS
    • 131 |
  • Add custom ViewerSettings
    • 132 |
  • Add user-defined scene
    • 133 |
  • Add user-defined lights and meshes with different geometries
    • 134 |
  • Turn on/off objects selecting mode
    • 135 |
  • Subscribe ObjectSelected event
    • 136 |
137 | 138 | ### Example02 139 | 140 | This example shows how to: 141 |
    142 |
  • Control the Blazor3D Viewer component's dimensions with CSS and HTML element style
    • 143 |
  • Add user-defined scene and lights
    • 144 |
  • Import obj, Collada, Fbx, Gltf or Stl model on button click asyncronously
    • 145 |
  • Control loaded object by its uuid with ObjectLoaded event
    • 146 |
  • Import file when all required JS modules already loaded (inital load)
    • 147 |
148 | 149 | ### Example03 150 | 151 | This example shows how to: 152 |
    153 |
  • Control the Blazor3D Viewer component's dimensions with CSS
    • 154 |
  • Use animated orthographic camera
    • 155 |
  • Use helpers
    • 156 |
  • Camera toggling
    • 157 |
  • Stop camera animation on start using orbit control
    • 158 |
159 | 160 | ### Example04 161 | 162 | This example shows how to: 163 |
    164 |
  • Add new cubes (or it can be any mech) with specified positions
    • 165 |
  • Update selected cube (or any mech) position (in fact the complete scene is updated)
    • 166 |
  • Delete selected cube (or any mech) from the scene
    • 167 |
168 | 169 | ### Example05 170 | 171 | This example shows how to: 172 |
    173 |
  • Load a bitmap texture to the mesh using URL
    • 174 |
  • Use different wrapping types
    • 175 |
  • Use texture repeating, offset and rotation
    • 176 |
177 | -------------------------------------------------------------------------------- /Tutorials/Blazor3DTutorials.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.3.32901.215 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor3DGettingStartedSrv", "GettingStarted\Server\Blazor3DGettingStartedSrv.csproj", "{920582EE-EE71-4BC0-84F2-DF67E3341EE7}" 7 | EndProject 8 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor3DGettingStartedWASM", "GettingStarted\WASM\Blazor3DGettingStartedWASM.csproj", "{D705249D-8F0D-47F6-963C-5B4A6FAD926D}" 9 | EndProject 10 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Getting started", "Getting started", "{2002FD0B-CD92-4301-87BD-C664FDBC9013}" 11 | EndProject 12 | Global 13 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 14 | Debug|Any CPU = Debug|Any CPU 15 | Release|Any CPU = Release|Any CPU 16 | EndGlobalSection 17 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 18 | {920582EE-EE71-4BC0-84F2-DF67E3341EE7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 19 | {920582EE-EE71-4BC0-84F2-DF67E3341EE7}.Debug|Any CPU.Build.0 = Debug|Any CPU 20 | {920582EE-EE71-4BC0-84F2-DF67E3341EE7}.Release|Any CPU.ActiveCfg = Release|Any CPU 21 | {920582EE-EE71-4BC0-84F2-DF67E3341EE7}.Release|Any CPU.Build.0 = Release|Any CPU 22 | {D705249D-8F0D-47F6-963C-5B4A6FAD926D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 23 | {D705249D-8F0D-47F6-963C-5B4A6FAD926D}.Debug|Any CPU.Build.0 = Debug|Any CPU 24 | {D705249D-8F0D-47F6-963C-5B4A6FAD926D}.Release|Any CPU.ActiveCfg = Release|Any CPU 25 | {D705249D-8F0D-47F6-963C-5B4A6FAD926D}.Release|Any CPU.Build.0 = Release|Any CPU 26 | EndGlobalSection 27 | GlobalSection(SolutionProperties) = preSolution 28 | HideSolutionNode = FALSE 29 | EndGlobalSection 30 | GlobalSection(NestedProjects) = preSolution 31 | {920582EE-EE71-4BC0-84F2-DF67E3341EE7} = {2002FD0B-CD92-4301-87BD-C664FDBC9013} 32 | {D705249D-8F0D-47F6-963C-5B4A6FAD926D} = {2002FD0B-CD92-4301-87BD-C664FDBC9013} 33 | EndGlobalSection 34 | GlobalSection(ExtensibilityGlobals) = postSolution 35 | SolutionGuid = {1090F3A5-62FA-41A5-9127-3B96E08A1249} 36 | EndGlobalSection 37 | EndGlobal 38 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | // Use IntelliSense to find out which attributes exist for C# debugging 6 | // Use hover for the description of the existing attributes 7 | // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md 8 | "name": ".NET Core Launch (web)", 9 | "type": "coreclr", 10 | "request": "launch", 11 | "preLaunchTask": "build", 12 | // If you have changed target frameworks, make sure to update the program path. 13 | "program": "${workspaceFolder}/bin/Debug/net6.0/Blazor3DGettingStartedSrv.dll", 14 | "args": [], 15 | "cwd": "${workspaceFolder}", 16 | "stopAtEntry": false, 17 | // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser 18 | "serverReadyAction": { 19 | "action": "openExternally", 20 | "pattern": "\\bNow listening on:\\s+(https?://\\S+)" 21 | }, 22 | "env": { 23 | "ASPNETCORE_ENVIRONMENT": "Development" 24 | }, 25 | "sourceFileMap": { 26 | "/Views": "${workspaceFolder}/Views" 27 | } 28 | }, 29 | { 30 | "name": ".NET Core Attach", 31 | "type": "coreclr", 32 | "request": "attach" 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "label": "build", 6 | "command": "dotnet", 7 | "type": "process", 8 | "args": [ 9 | "build", 10 | "${workspaceFolder}/Blazor3DGettingStartedSrv.csproj", 11 | "/property:GenerateFullPaths=true", 12 | "/consoleloggerparameters:NoSummary" 13 | ], 14 | "problemMatcher": "$msCompile" 15 | }, 16 | { 17 | "label": "publish", 18 | "command": "dotnet", 19 | "type": "process", 20 | "args": [ 21 | "publish", 22 | "${workspaceFolder}/Blazor3DGettingStartedSrv.csproj", 23 | "/property:GenerateFullPaths=true", 24 | "/consoleloggerparameters:NoSummary" 25 | ], 26 | "problemMatcher": "$msCompile" 27 | }, 28 | { 29 | "label": "watch", 30 | "command": "dotnet", 31 | "type": "process", 32 | "args": [ 33 | "watch", 34 | "run", 35 | "--project", 36 | "${workspaceFolder}/Blazor3DGettingStartedSrv.csproj" 37 | ], 38 | "problemMatcher": "$msCompile" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Blazor3DGettingStartedSrv.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net6.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Pages/Error.cshtml: -------------------------------------------------------------------------------- 1 | @page 2 | @model Blazor3DGettingStartedSrv.Pages.ErrorModel 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Error 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Error.

19 |

An error occurred while processing your request.

20 | 21 | @if (Model.ShowRequestId) 22 | { 23 |

24 | Request ID: @Model.RequestId 25 |

26 | } 27 | 28 |

Development Mode

29 |

30 | Swapping to the Development environment displays detailed information about the error that occurred. 31 |

32 |

33 | The Development environment shouldn't be enabled for deployed applications. 34 | It can result in displaying sensitive information from exceptions to end users. 35 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 36 | and restarting the app. 37 |

38 |
39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Pages/Error.cshtml.cs: -------------------------------------------------------------------------------- 1 | using System.Diagnostics; 2 | using Microsoft.AspNetCore.Mvc; 3 | using Microsoft.AspNetCore.Mvc.RazorPages; 4 | 5 | namespace Blazor3DGettingStartedSrv.Pages; 6 | 7 | [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] 8 | [IgnoreAntiforgeryToken] 9 | public class ErrorModel : PageModel 10 | { 11 | public string? RequestId { get; set; } 12 | 13 | public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); 14 | 15 | private readonly ILogger _logger; 16 | 17 | public ErrorModel(ILogger logger) 18 | { 19 | _logger = logger; 20 | } 21 | 22 | public void OnGet() 23 | { 24 | RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @using Blazor3D.Viewers; 3 | 4 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Pages/_Host.cshtml: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @namespace Blazor3DGettingStartedSrv.Pages 3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 4 | @{ 5 | Layout = "_Layout"; 6 | } 7 | 8 | 9 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Pages/_Layout.cshtml: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components.Web 2 | @namespace Blazor3DGettingStartedSrv.Pages 3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | @RenderBody() 18 | 19 |
20 | 21 | An error has occurred. This application may no longer respond until reloaded. 22 | 23 | 24 | An unhandled exception has occurred. See browser dev tools for details. 25 | 26 | Reload 27 | 🗙 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.AspNetCore.Components.Web; 3 | 4 | var builder = WebApplication.CreateBuilder(args); 5 | 6 | // Add services to the container. 7 | builder.Services.AddRazorPages(); 8 | builder.Services.AddServerSideBlazor(); 9 | 10 | var app = builder.Build(); 11 | 12 | // Configure the HTTP request pipeline. 13 | if (!app.Environment.IsDevelopment()) 14 | { 15 | app.UseExceptionHandler("/Error"); 16 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. 17 | app.UseHsts(); 18 | } 19 | 20 | app.UseHttpsRedirection(); 21 | 22 | app.UseStaticFiles(); 23 | 24 | app.UseRouting(); 25 | 26 | app.MapBlazorHub(); 27 | app.MapFallbackToPage("/_Host"); 28 | 29 | app.Run(); 30 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:39621", 7 | "sslPort": 44367 8 | } 9 | }, 10 | "profiles": { 11 | "Blazor3DGettingStartedSrv": { 12 | "commandName": "Project", 13 | "dotnetRunMessages": true, 14 | "launchBrowser": true, 15 | "applicationUrl": "https://localhost:7024;http://localhost:5060", 16 | "environmentVariables": { 17 | "ASPNETCORE_ENVIRONMENT": "Development" 18 | } 19 | }, 20 | "IIS Express": { 21 | "commandName": "IISExpress", 22 | "launchBrowser": true, 23 | "environmentVariables": { 24 | "ASPNETCORE_ENVIRONMENT": "Development" 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 | Blazor3DGettingStartedSrv 4 | 5 |
6 |
7 | 8 |
9 | 10 |
11 |
12 | About 13 |
14 | 15 |
16 | @Body 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Shared/MainLayout.razor.css: -------------------------------------------------------------------------------- 1 | .page { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | main { 8 | flex: 1; 9 | } 10 | 11 | .sidebar { 12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 13 | } 14 | 15 | .top-row { 16 | background-color: #f7f7f7; 17 | border-bottom: 1px solid #d6d5d5; 18 | justify-content: flex-end; 19 | height: 3.5rem; 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | .top-row ::deep a, .top-row .btn-link { 25 | white-space: nowrap; 26 | margin-left: 1.5rem; 27 | } 28 | 29 | .top-row a:first-child { 30 | overflow: hidden; 31 | text-overflow: ellipsis; 32 | } 33 | 34 | @media (max-width: 640.98px) { 35 | .top-row:not(.auth) { 36 | display: none; 37 | } 38 | 39 | .top-row.auth { 40 | justify-content: space-between; 41 | } 42 | 43 | .top-row a, .top-row .btn-link { 44 | margin-left: 0; 45 | } 46 | } 47 | 48 | @media (min-width: 641px) { 49 | .page { 50 | flex-direction: row; 51 | } 52 | 53 | .sidebar { 54 | width: 250px; 55 | height: 100vh; 56 | position: sticky; 57 | top: 0; 58 | } 59 | 60 | .top-row { 61 | position: sticky; 62 | top: 0; 63 | z-index: 1; 64 | } 65 | 66 | .top-row, article { 67 | padding-left: 2rem !important; 68 | padding-right: 1.5rem !important; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Shared/NavMenu.razor: -------------------------------------------------------------------------------- 1 | 
2 |
3 | Blazor3DGettingStartedSrv 4 | 7 |
8 |
9 | 10 |
11 | 18 |
19 | 20 | @code { 21 | private bool collapseNavMenu = true; 22 | 23 | private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; 24 | 25 | private void ToggleNavMenu() 26 | { 27 | collapseNavMenu = !collapseNavMenu; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/Shared/NavMenu.razor.css: -------------------------------------------------------------------------------- 1 | .navbar-toggler { 2 | background-color: rgba(255, 255, 255, 0.1); 3 | } 4 | 5 | .top-row { 6 | height: 3.5rem; 7 | background-color: rgba(0,0,0,0.4); 8 | } 9 | 10 | .navbar-brand { 11 | font-size: 1.1rem; 12 | } 13 | 14 | .oi { 15 | width: 2rem; 16 | font-size: 1.1rem; 17 | vertical-align: text-top; 18 | top: -2px; 19 | } 20 | 21 | .nav-item { 22 | font-size: 0.9rem; 23 | padding-bottom: 0.5rem; 24 | } 25 | 26 | .nav-item:first-of-type { 27 | padding-top: 1rem; 28 | } 29 | 30 | .nav-item:last-of-type { 31 | padding-bottom: 1rem; 32 | } 33 | 34 | .nav-item ::deep a { 35 | color: #d7d7d7; 36 | border-radius: 4px; 37 | height: 3rem; 38 | display: flex; 39 | align-items: center; 40 | line-height: 3rem; 41 | } 42 | 43 | .nav-item ::deep a.active { 44 | background-color: rgba(255,255,255,0.25); 45 | color: white; 46 | } 47 | 48 | .nav-item ::deep a:hover { 49 | background-color: rgba(255,255,255,0.1); 50 | color: white; 51 | } 52 | 53 | @media (min-width: 641px) { 54 | .navbar-toggler { 55 | display: none; 56 | } 57 | 58 | .collapse { 59 | /* Never collapse the sidebar for wide screens */ 60 | display: block; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using Microsoft.AspNetCore.Authorization 3 | @using Microsoft.AspNetCore.Components.Authorization 4 | @using Microsoft.AspNetCore.Components.Forms 5 | @using Microsoft.AspNetCore.Components.Routing 6 | @using Microsoft.AspNetCore.Components.Web 7 | @using Microsoft.AspNetCore.Components.Web.Virtualization 8 | @using Microsoft.JSInterop 9 | @using Blazor3DGettingStartedSrv 10 | @using Blazor3DGettingStartedSrv.Shared 11 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "DetailedErrors": true, 3 | "Logging": { 4 | "LogLevel": { 5 | "Default": "Information", 6 | "Microsoft.AspNetCore": "Warning" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft.AspNetCore": "Warning" 6 | } 7 | }, 8 | "AllowedHosts": "*" 9 | } 10 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/FONT-LICENSE: -------------------------------------------------------------------------------- 1 | SIL OPEN FONT LICENSE Version 1.1 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | PREAMBLE 6 | The goals of the Open Font License (OFL) are to stimulate worldwide 7 | development of collaborative font projects, to support the font creation 8 | efforts of academic and linguistic communities, and to provide a free and 9 | open framework in which fonts may be shared and improved in partnership 10 | with others. 11 | 12 | The OFL allows the licensed fonts to be used, studied, modified and 13 | redistributed freely as long as they are not sold by themselves. The 14 | fonts, including any derivative works, can be bundled, embedded, 15 | redistributed and/or sold with any software provided that any reserved 16 | names are not used by derivative works. The fonts and derivatives, 17 | however, cannot be released under any other type of license. The 18 | requirement for fonts to remain under this license does not apply 19 | to any document created using the fonts or their derivatives. 20 | 21 | DEFINITIONS 22 | "Font Software" refers to the set of files released by the Copyright 23 | Holder(s) under this license and clearly marked as such. This may 24 | include source files, build scripts and documentation. 25 | 26 | "Reserved Font Name" refers to any names specified as such after the 27 | copyright statement(s). 28 | 29 | "Original Version" refers to the collection of Font Software components as 30 | distributed by the Copyright Holder(s). 31 | 32 | "Modified Version" refers to any derivative made by adding to, deleting, 33 | or substituting -- in part or in whole -- any of the components of the 34 | Original Version, by changing formats or by porting the Font Software to a 35 | new environment. 36 | 37 | "Author" refers to any designer, engineer, programmer, technical 38 | writer or other person who contributed to the Font Software. 39 | 40 | PERMISSION & CONDITIONS 41 | Permission is hereby granted, free of charge, to any person obtaining 42 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 43 | redistribute, and sell modified and unmodified copies of the Font 44 | Software, subject to the following conditions: 45 | 46 | 1) Neither the Font Software nor any of its individual components, 47 | in Original or Modified Versions, may be sold by itself. 48 | 49 | 2) Original or Modified Versions of the Font Software may be bundled, 50 | redistributed and/or sold with any software, provided that each copy 51 | contains the above copyright notice and this license. These can be 52 | included either as stand-alone text files, human-readable headers or 53 | in the appropriate machine-readable metadata fields within text or 54 | binary files as long as those fields can be easily viewed by the user. 55 | 56 | 3) No Modified Version of the Font Software may use the Reserved Font 57 | Name(s) unless explicit written permission is granted by the corresponding 58 | Copyright Holder. This restriction only applies to the primary font name as 59 | presented to the users. 60 | 61 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 62 | Software shall not be used to promote, endorse or advertise any 63 | Modified Version, except to acknowledge the contribution(s) of the 64 | Copyright Holder(s) and the Author(s) or with their explicit written 65 | permission. 66 | 67 | 5) The Font Software, modified or unmodified, in part or in whole, 68 | must be distributed entirely under this license, and must not be 69 | distributed under any other license. The requirement for fonts to 70 | remain under this license does not apply to any document created 71 | using the Font Software. 72 | 73 | TERMINATION 74 | This license becomes null and void if any of the above conditions are 75 | not met. 76 | 77 | DISCLAIMER 78 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 79 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 80 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 81 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 82 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 83 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 84 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 85 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 86 | OTHER DEALINGS IN THE FONT SOFTWARE. 87 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/ICON-LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/README.md: -------------------------------------------------------------------------------- 1 | [Open Iconic v1.1.1](http://useiconic.com/open) 2 | =========== 3 | 4 | ### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons) 5 | 6 | 7 | 8 | ## What's in Open Iconic? 9 | 10 | * 223 icons designed to be legible down to 8 pixels 11 | * Super-light SVG files - 61.8 for the entire set 12 | * SVG sprite—the modern replacement for icon fonts 13 | * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats 14 | * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats 15 | * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px. 16 | 17 | 18 | ## Getting Started 19 | 20 | #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections. 21 | 22 | ### General Usage 23 | 24 | #### Using Open Iconic's SVGs 25 | 26 | We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute). 27 | 28 | ``` 29 | icon name 30 | ``` 31 | 32 | #### Using Open Iconic's SVG Sprite 33 | 34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. 35 | 36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `` *tag and a unique class name for each different icon in the* `` *tag.* 37 | 38 | ``` 39 | 40 | 41 | 42 | ``` 43 | 44 | Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `` tag with equal width and height dimensions. 45 | 46 | ``` 47 | .icon { 48 | width: 16px; 49 | height: 16px; 50 | } 51 | ``` 52 | 53 | Coloring icons is even easier. All you need to do is set the `fill` rule on the `` tag. 54 | 55 | ``` 56 | .icon-account-login { 57 | fill: #f00; 58 | } 59 | ``` 60 | 61 | To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/). 62 | 63 | #### Using Open Iconic's Icon Font... 64 | 65 | 66 | ##### …with Bootstrap 67 | 68 | You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}` 69 | 70 | 71 | ``` 72 | 73 | ``` 74 | 75 | 76 | ``` 77 | 78 | ``` 79 | 80 | ##### …with Foundation 81 | 82 | You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}` 83 | 84 | ``` 85 | 86 | ``` 87 | 88 | 89 | ``` 90 | 91 | ``` 92 | 93 | ##### …on its own 94 | 95 | You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}` 96 | 97 | ``` 98 | 99 | ``` 100 | 101 | ``` 102 | 103 | ``` 104 | 105 | 106 | ## License 107 | 108 | ### Icons 109 | 110 | All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT). 111 | 112 | ### Fonts 113 | 114 | All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web). 115 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi{position:relative;top:1px;display:inline-block;speak:none;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi.oi-align-center:before{text-align:center}.oi.oi-align-left:before{text-align:left}.oi.oi-align-right:before{text-align:right}.oi.oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi.oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi.oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi-account-login:before{content:'\e000'}.oi-account-logout:before{content:'\e001'}.oi-action-redo:before{content:'\e002'}.oi-action-undo:before{content:'\e003'}.oi-align-center:before{content:'\e004'}.oi-align-left:before{content:'\e005'}.oi-align-right:before{content:'\e006'}.oi-aperture:before{content:'\e007'}.oi-arrow-bottom:before{content:'\e008'}.oi-arrow-circle-bottom:before{content:'\e009'}.oi-arrow-circle-left:before{content:'\e00a'}.oi-arrow-circle-right:before{content:'\e00b'}.oi-arrow-circle-top:before{content:'\e00c'}.oi-arrow-left:before{content:'\e00d'}.oi-arrow-right:before{content:'\e00e'}.oi-arrow-thick-bottom:before{content:'\e00f'}.oi-arrow-thick-left:before{content:'\e010'}.oi-arrow-thick-right:before{content:'\e011'}.oi-arrow-thick-top:before{content:'\e012'}.oi-arrow-top:before{content:'\e013'}.oi-audio-spectrum:before{content:'\e014'}.oi-audio:before{content:'\e015'}.oi-badge:before{content:'\e016'}.oi-ban:before{content:'\e017'}.oi-bar-chart:before{content:'\e018'}.oi-basket:before{content:'\e019'}.oi-battery-empty:before{content:'\e01a'}.oi-battery-full:before{content:'\e01b'}.oi-beaker:before{content:'\e01c'}.oi-bell:before{content:'\e01d'}.oi-bluetooth:before{content:'\e01e'}.oi-bold:before{content:'\e01f'}.oi-bolt:before{content:'\e020'}.oi-book:before{content:'\e021'}.oi-bookmark:before{content:'\e022'}.oi-box:before{content:'\e023'}.oi-briefcase:before{content:'\e024'}.oi-british-pound:before{content:'\e025'}.oi-browser:before{content:'\e026'}.oi-brush:before{content:'\e027'}.oi-bug:before{content:'\e028'}.oi-bullhorn:before{content:'\e029'}.oi-calculator:before{content:'\e02a'}.oi-calendar:before{content:'\e02b'}.oi-camera-slr:before{content:'\e02c'}.oi-caret-bottom:before{content:'\e02d'}.oi-caret-left:before{content:'\e02e'}.oi-caret-right:before{content:'\e02f'}.oi-caret-top:before{content:'\e030'}.oi-cart:before{content:'\e031'}.oi-chat:before{content:'\e032'}.oi-check:before{content:'\e033'}.oi-chevron-bottom:before{content:'\e034'}.oi-chevron-left:before{content:'\e035'}.oi-chevron-right:before{content:'\e036'}.oi-chevron-top:before{content:'\e037'}.oi-circle-check:before{content:'\e038'}.oi-circle-x:before{content:'\e039'}.oi-clipboard:before{content:'\e03a'}.oi-clock:before{content:'\e03b'}.oi-cloud-download:before{content:'\e03c'}.oi-cloud-upload:before{content:'\e03d'}.oi-cloud:before{content:'\e03e'}.oi-cloudy:before{content:'\e03f'}.oi-code:before{content:'\e040'}.oi-cog:before{content:'\e041'}.oi-collapse-down:before{content:'\e042'}.oi-collapse-left:before{content:'\e043'}.oi-collapse-right:before{content:'\e044'}.oi-collapse-up:before{content:'\e045'}.oi-command:before{content:'\e046'}.oi-comment-square:before{content:'\e047'}.oi-compass:before{content:'\e048'}.oi-contrast:before{content:'\e049'}.oi-copywriting:before{content:'\e04a'}.oi-credit-card:before{content:'\e04b'}.oi-crop:before{content:'\e04c'}.oi-dashboard:before{content:'\e04d'}.oi-data-transfer-download:before{content:'\e04e'}.oi-data-transfer-upload:before{content:'\e04f'}.oi-delete:before{content:'\e050'}.oi-dial:before{content:'\e051'}.oi-document:before{content:'\e052'}.oi-dollar:before{content:'\e053'}.oi-double-quote-sans-left:before{content:'\e054'}.oi-double-quote-sans-right:before{content:'\e055'}.oi-double-quote-serif-left:before{content:'\e056'}.oi-double-quote-serif-right:before{content:'\e057'}.oi-droplet:before{content:'\e058'}.oi-eject:before{content:'\e059'}.oi-elevator:before{content:'\e05a'}.oi-ellipses:before{content:'\e05b'}.oi-envelope-closed:before{content:'\e05c'}.oi-envelope-open:before{content:'\e05d'}.oi-euro:before{content:'\e05e'}.oi-excerpt:before{content:'\e05f'}.oi-expand-down:before{content:'\e060'}.oi-expand-left:before{content:'\e061'}.oi-expand-right:before{content:'\e062'}.oi-expand-up:before{content:'\e063'}.oi-external-link:before{content:'\e064'}.oi-eye:before{content:'\e065'}.oi-eyedropper:before{content:'\e066'}.oi-file:before{content:'\e067'}.oi-fire:before{content:'\e068'}.oi-flag:before{content:'\e069'}.oi-flash:before{content:'\e06a'}.oi-folder:before{content:'\e06b'}.oi-fork:before{content:'\e06c'}.oi-fullscreen-enter:before{content:'\e06d'}.oi-fullscreen-exit:before{content:'\e06e'}.oi-globe:before{content:'\e06f'}.oi-graph:before{content:'\e070'}.oi-grid-four-up:before{content:'\e071'}.oi-grid-three-up:before{content:'\e072'}.oi-grid-two-up:before{content:'\e073'}.oi-hard-drive:before{content:'\e074'}.oi-header:before{content:'\e075'}.oi-headphones:before{content:'\e076'}.oi-heart:before{content:'\e077'}.oi-home:before{content:'\e078'}.oi-image:before{content:'\e079'}.oi-inbox:before{content:'\e07a'}.oi-infinity:before{content:'\e07b'}.oi-info:before{content:'\e07c'}.oi-italic:before{content:'\e07d'}.oi-justify-center:before{content:'\e07e'}.oi-justify-left:before{content:'\e07f'}.oi-justify-right:before{content:'\e080'}.oi-key:before{content:'\e081'}.oi-laptop:before{content:'\e082'}.oi-layers:before{content:'\e083'}.oi-lightbulb:before{content:'\e084'}.oi-link-broken:before{content:'\e085'}.oi-link-intact:before{content:'\e086'}.oi-list-rich:before{content:'\e087'}.oi-list:before{content:'\e088'}.oi-location:before{content:'\e089'}.oi-lock-locked:before{content:'\e08a'}.oi-lock-unlocked:before{content:'\e08b'}.oi-loop-circular:before{content:'\e08c'}.oi-loop-square:before{content:'\e08d'}.oi-loop:before{content:'\e08e'}.oi-magnifying-glass:before{content:'\e08f'}.oi-map-marker:before{content:'\e090'}.oi-map:before{content:'\e091'}.oi-media-pause:before{content:'\e092'}.oi-media-play:before{content:'\e093'}.oi-media-record:before{content:'\e094'}.oi-media-skip-backward:before{content:'\e095'}.oi-media-skip-forward:before{content:'\e096'}.oi-media-step-backward:before{content:'\e097'}.oi-media-step-forward:before{content:'\e098'}.oi-media-stop:before{content:'\e099'}.oi-medical-cross:before{content:'\e09a'}.oi-menu:before{content:'\e09b'}.oi-microphone:before{content:'\e09c'}.oi-minus:before{content:'\e09d'}.oi-monitor:before{content:'\e09e'}.oi-moon:before{content:'\e09f'}.oi-move:before{content:'\e0a0'}.oi-musical-note:before{content:'\e0a1'}.oi-paperclip:before{content:'\e0a2'}.oi-pencil:before{content:'\e0a3'}.oi-people:before{content:'\e0a4'}.oi-person:before{content:'\e0a5'}.oi-phone:before{content:'\e0a6'}.oi-pie-chart:before{content:'\e0a7'}.oi-pin:before{content:'\e0a8'}.oi-play-circle:before{content:'\e0a9'}.oi-plus:before{content:'\e0aa'}.oi-power-standby:before{content:'\e0ab'}.oi-print:before{content:'\e0ac'}.oi-project:before{content:'\e0ad'}.oi-pulse:before{content:'\e0ae'}.oi-puzzle-piece:before{content:'\e0af'}.oi-question-mark:before{content:'\e0b0'}.oi-rain:before{content:'\e0b1'}.oi-random:before{content:'\e0b2'}.oi-reload:before{content:'\e0b3'}.oi-resize-both:before{content:'\e0b4'}.oi-resize-height:before{content:'\e0b5'}.oi-resize-width:before{content:'\e0b6'}.oi-rss-alt:before{content:'\e0b7'}.oi-rss:before{content:'\e0b8'}.oi-script:before{content:'\e0b9'}.oi-share-boxed:before{content:'\e0ba'}.oi-share:before{content:'\e0bb'}.oi-shield:before{content:'\e0bc'}.oi-signal:before{content:'\e0bd'}.oi-signpost:before{content:'\e0be'}.oi-sort-ascending:before{content:'\e0bf'}.oi-sort-descending:before{content:'\e0c0'}.oi-spreadsheet:before{content:'\e0c1'}.oi-star:before{content:'\e0c2'}.oi-sun:before{content:'\e0c3'}.oi-tablet:before{content:'\e0c4'}.oi-tag:before{content:'\e0c5'}.oi-tags:before{content:'\e0c6'}.oi-target:before{content:'\e0c7'}.oi-task:before{content:'\e0c8'}.oi-terminal:before{content:'\e0c9'}.oi-text:before{content:'\e0ca'}.oi-thumb-down:before{content:'\e0cb'}.oi-thumb-up:before{content:'\e0cc'}.oi-timer:before{content:'\e0cd'}.oi-transfer:before{content:'\e0ce'}.oi-trash:before{content:'\e0cf'}.oi-underline:before{content:'\e0d0'}.oi-vertical-align-bottom:before{content:'\e0d1'}.oi-vertical-align-center:before{content:'\e0d2'}.oi-vertical-align-top:before{content:'\e0d3'}.oi-video:before{content:'\e0d4'}.oi-volume-high:before{content:'\e0d5'}.oi-volume-low:before{content:'\e0d6'}.oi-volume-off:before{content:'\e0d7'}.oi-warning:before{content:'\e0d8'}.oi-wifi:before{content:'\e0d9'}.oi-wrench:before{content:'\e0da'}.oi-x:before{content:'\e0db'}.oi-yen:before{content:'\e0dc'}.oi-zoom-in:before{content:'\e0dd'}.oi-zoom-out:before{content:'\e0de'} -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/css/site.css: -------------------------------------------------------------------------------- 1 | @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); 2 | 3 | html, body { 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | h1:focus { 8 | outline: none; 9 | } 10 | 11 | a, .btn-link { 12 | color: #0071c1; 13 | } 14 | 15 | .btn-primary { 16 | color: #fff; 17 | background-color: #1b6ec2; 18 | border-color: #1861ac; 19 | } 20 | 21 | .content { 22 | padding-top: 1.1rem; 23 | } 24 | 25 | .valid.modified:not([type=checkbox]) { 26 | outline: 1px solid #26b050; 27 | } 28 | 29 | .invalid { 30 | outline: 1px solid red; 31 | } 32 | 33 | .validation-message { 34 | color: red; 35 | } 36 | 37 | #blazor-error-ui { 38 | background: lightyellow; 39 | bottom: 0; 40 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 41 | display: none; 42 | left: 0; 43 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 44 | position: fixed; 45 | width: 100%; 46 | z-index: 1000; 47 | } 48 | 49 | #blazor-error-ui .dismiss { 50 | cursor: pointer; 51 | position: absolute; 52 | right: 0.75rem; 53 | top: 0.5rem; 54 | } 55 | 56 | .blazor-error-boundary { 57 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 58 | padding: 1rem 1rem 1rem 3.7rem; 59 | color: white; 60 | } 61 | 62 | .blazor-error-boundary::after { 63 | content: "An error has occurred." 64 | } 65 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/Server/wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/Server/wwwroot/favicon.ico -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Launch and Debug Standalone Blazor WebAssembly App", 6 | "type": "blazorwasm", 7 | "request": "launch", 8 | "cwd": "${workspaceFolder}" 9 | } 10 | ] 11 | } -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "label": "build", 6 | "command": "dotnet", 7 | "type": "process", 8 | "args": [ 9 | "build", 10 | "${workspaceFolder}/Blazor3DGettingStartedWASM.csproj", 11 | "/property:GenerateFullPaths=true", 12 | "/consoleloggerparameters:NoSummary" 13 | ], 14 | "problemMatcher": "$msCompile" 15 | }, 16 | { 17 | "label": "publish", 18 | "command": "dotnet", 19 | "type": "process", 20 | "args": [ 21 | "publish", 22 | "${workspaceFolder}/Blazor3DGettingStartedWASM.csproj", 23 | "/property:GenerateFullPaths=true", 24 | "/consoleloggerparameters:NoSummary" 25 | ], 26 | "problemMatcher": "$msCompile" 27 | }, 28 | { 29 | "label": "watch", 30 | "command": "dotnet", 31 | "type": "process", 32 | "args": [ 33 | "watch", 34 | "run", 35 | "--project", 36 | "${workspaceFolder}/Blazor3DGettingStartedWASM.csproj" 37 | ], 38 | "problemMatcher": "$msCompile" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/Blazor3DGettingStartedWASM.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net6.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @using Blazor3D.Viewers; 3 | 4 | 5 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Web; 2 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 3 | using Blazor3DGettingStartedWASM; 4 | 5 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 6 | builder.RootComponents.Add("#app"); 7 | builder.RootComponents.Add("head::after"); 8 | 9 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 10 | 11 | await builder.Build().RunAsync(); 12 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:16742", 7 | "sslPort": 44346 8 | } 9 | }, 10 | "profiles": { 11 | "Blazor3DGettingStartedWASM": { 12 | "commandName": "Project", 13 | "dotnetRunMessages": true, 14 | "launchBrowser": true, 15 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 16 | "applicationUrl": "https://localhost:7069;http://localhost:5250", 17 | "environmentVariables": { 18 | "ASPNETCORE_ENVIRONMENT": "Development" 19 | } 20 | }, 21 | "IIS Express": { 22 | "commandName": "IISExpress", 23 | "launchBrowser": true, 24 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 25 | "environmentVariables": { 26 | "ASPNETCORE_ENVIRONMENT": "Development" 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 |
4 |
5 | 6 |
7 | 8 |
9 |
10 | About 11 |
12 | 13 |
14 | @Body 15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/Shared/MainLayout.razor.css: -------------------------------------------------------------------------------- 1 | .page { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | main { 8 | flex: 1; 9 | } 10 | 11 | .sidebar { 12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 13 | } 14 | 15 | .top-row { 16 | background-color: #f7f7f7; 17 | border-bottom: 1px solid #d6d5d5; 18 | justify-content: flex-end; 19 | height: 3.5rem; 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | .top-row ::deep a, .top-row ::deep .btn-link { 25 | white-space: nowrap; 26 | margin-left: 1.5rem; 27 | text-decoration: none; 28 | } 29 | 30 | .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { 31 | text-decoration: underline; 32 | } 33 | 34 | .top-row ::deep a:first-child { 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | } 38 | 39 | @media (max-width: 640.98px) { 40 | .top-row:not(.auth) { 41 | display: none; 42 | } 43 | 44 | .top-row.auth { 45 | justify-content: space-between; 46 | } 47 | 48 | .top-row ::deep a, .top-row ::deep .btn-link { 49 | margin-left: 0; 50 | } 51 | } 52 | 53 | @media (min-width: 641px) { 54 | .page { 55 | flex-direction: row; 56 | } 57 | 58 | .sidebar { 59 | width: 250px; 60 | height: 100vh; 61 | position: sticky; 62 | top: 0; 63 | } 64 | 65 | .top-row { 66 | position: sticky; 67 | top: 0; 68 | z-index: 1; 69 | } 70 | 71 | .top-row.auth ::deep a:first-child { 72 | flex: 1; 73 | text-align: right; 74 | width: 0; 75 | } 76 | 77 | .top-row, article { 78 | padding-left: 2rem !important; 79 | padding-right: 1.5rem !important; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/Shared/NavMenu.razor: -------------------------------------------------------------------------------- 1 | 
2 |
3 | Blazor3DGettingStartedWASM 4 | 7 |
8 |
9 | 10 |
11 | 18 |
19 | 20 | @code { 21 | private bool collapseNavMenu = true; 22 | 23 | private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; 24 | 25 | private void ToggleNavMenu() 26 | { 27 | collapseNavMenu = !collapseNavMenu; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/Shared/NavMenu.razor.css: -------------------------------------------------------------------------------- 1 | .navbar-toggler { 2 | background-color: rgba(255, 255, 255, 0.1); 3 | } 4 | 5 | .top-row { 6 | height: 3.5rem; 7 | background-color: rgba(0,0,0,0.4); 8 | } 9 | 10 | .navbar-brand { 11 | font-size: 1.1rem; 12 | } 13 | 14 | .oi { 15 | width: 2rem; 16 | font-size: 1.1rem; 17 | vertical-align: text-top; 18 | top: -2px; 19 | } 20 | 21 | .nav-item { 22 | font-size: 0.9rem; 23 | padding-bottom: 0.5rem; 24 | } 25 | 26 | .nav-item:first-of-type { 27 | padding-top: 1rem; 28 | } 29 | 30 | .nav-item:last-of-type { 31 | padding-bottom: 1rem; 32 | } 33 | 34 | .nav-item ::deep a { 35 | color: #d7d7d7; 36 | border-radius: 4px; 37 | height: 3rem; 38 | display: flex; 39 | align-items: center; 40 | line-height: 3rem; 41 | } 42 | 43 | .nav-item ::deep a.active { 44 | background-color: rgba(255,255,255,0.25); 45 | color: white; 46 | } 47 | 48 | .nav-item ::deep a:hover { 49 | background-color: rgba(255,255,255,0.1); 50 | color: white; 51 | } 52 | 53 | @media (min-width: 641px) { 54 | .navbar-toggler { 55 | display: none; 56 | } 57 | 58 | .collapse { 59 | /* Never collapse the sidebar for wide screens */ 60 | display: block; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http 8 | @using Microsoft.JSInterop 9 | @using Blazor3DGettingStartedWASM 10 | @using Blazor3DGettingStartedWASM.Shared 11 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/app.css: -------------------------------------------------------------------------------- 1 | @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); 2 | 3 | html, body { 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | h1:focus { 8 | outline: none; 9 | } 10 | 11 | a, .btn-link { 12 | color: #0071c1; 13 | } 14 | 15 | .btn-primary { 16 | color: #fff; 17 | background-color: #1b6ec2; 18 | border-color: #1861ac; 19 | } 20 | 21 | .content { 22 | padding-top: 1.1rem; 23 | } 24 | 25 | .valid.modified:not([type=checkbox]) { 26 | outline: 1px solid #26b050; 27 | } 28 | 29 | .invalid { 30 | outline: 1px solid red; 31 | } 32 | 33 | .validation-message { 34 | color: red; 35 | } 36 | 37 | #blazor-error-ui { 38 | background: lightyellow; 39 | bottom: 0; 40 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 41 | display: none; 42 | left: 0; 43 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 44 | position: fixed; 45 | width: 100%; 46 | z-index: 1000; 47 | } 48 | 49 | #blazor-error-ui .dismiss { 50 | cursor: pointer; 51 | position: absolute; 52 | right: 0.75rem; 53 | top: 0.5rem; 54 | } 55 | 56 | .blazor-error-boundary { 57 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 58 | padding: 1rem 1rem 1rem 3.7rem; 59 | color: white; 60 | } 61 | 62 | .blazor-error-boundary::after { 63 | content: "An error has occurred." 64 | } 65 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/FONT-LICENSE: -------------------------------------------------------------------------------- 1 | SIL OPEN FONT LICENSE Version 1.1 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | PREAMBLE 6 | The goals of the Open Font License (OFL) are to stimulate worldwide 7 | development of collaborative font projects, to support the font creation 8 | efforts of academic and linguistic communities, and to provide a free and 9 | open framework in which fonts may be shared and improved in partnership 10 | with others. 11 | 12 | The OFL allows the licensed fonts to be used, studied, modified and 13 | redistributed freely as long as they are not sold by themselves. The 14 | fonts, including any derivative works, can be bundled, embedded, 15 | redistributed and/or sold with any software provided that any reserved 16 | names are not used by derivative works. The fonts and derivatives, 17 | however, cannot be released under any other type of license. The 18 | requirement for fonts to remain under this license does not apply 19 | to any document created using the fonts or their derivatives. 20 | 21 | DEFINITIONS 22 | "Font Software" refers to the set of files released by the Copyright 23 | Holder(s) under this license and clearly marked as such. This may 24 | include source files, build scripts and documentation. 25 | 26 | "Reserved Font Name" refers to any names specified as such after the 27 | copyright statement(s). 28 | 29 | "Original Version" refers to the collection of Font Software components as 30 | distributed by the Copyright Holder(s). 31 | 32 | "Modified Version" refers to any derivative made by adding to, deleting, 33 | or substituting -- in part or in whole -- any of the components of the 34 | Original Version, by changing formats or by porting the Font Software to a 35 | new environment. 36 | 37 | "Author" refers to any designer, engineer, programmer, technical 38 | writer or other person who contributed to the Font Software. 39 | 40 | PERMISSION & CONDITIONS 41 | Permission is hereby granted, free of charge, to any person obtaining 42 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 43 | redistribute, and sell modified and unmodified copies of the Font 44 | Software, subject to the following conditions: 45 | 46 | 1) Neither the Font Software nor any of its individual components, 47 | in Original or Modified Versions, may be sold by itself. 48 | 49 | 2) Original or Modified Versions of the Font Software may be bundled, 50 | redistributed and/or sold with any software, provided that each copy 51 | contains the above copyright notice and this license. These can be 52 | included either as stand-alone text files, human-readable headers or 53 | in the appropriate machine-readable metadata fields within text or 54 | binary files as long as those fields can be easily viewed by the user. 55 | 56 | 3) No Modified Version of the Font Software may use the Reserved Font 57 | Name(s) unless explicit written permission is granted by the corresponding 58 | Copyright Holder. This restriction only applies to the primary font name as 59 | presented to the users. 60 | 61 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 62 | Software shall not be used to promote, endorse or advertise any 63 | Modified Version, except to acknowledge the contribution(s) of the 64 | Copyright Holder(s) and the Author(s) or with their explicit written 65 | permission. 66 | 67 | 5) The Font Software, modified or unmodified, in part or in whole, 68 | must be distributed entirely under this license, and must not be 69 | distributed under any other license. The requirement for fonts to 70 | remain under this license does not apply to any document created 71 | using the Font Software. 72 | 73 | TERMINATION 74 | This license becomes null and void if any of the above conditions are 75 | not met. 76 | 77 | DISCLAIMER 78 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 79 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 80 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 81 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 82 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 83 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 84 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 85 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 86 | OTHER DEALINGS IN THE FONT SOFTWARE. 87 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/ICON-LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/README.md: -------------------------------------------------------------------------------- 1 | [Open Iconic v1.1.1](http://useiconic.com/open) 2 | =========== 3 | 4 | ### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons) 5 | 6 | 7 | 8 | ## What's in Open Iconic? 9 | 10 | * 223 icons designed to be legible down to 8 pixels 11 | * Super-light SVG files - 61.8 for the entire set 12 | * SVG sprite—the modern replacement for icon fonts 13 | * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats 14 | * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats 15 | * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px. 16 | 17 | 18 | ## Getting Started 19 | 20 | #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections. 21 | 22 | ### General Usage 23 | 24 | #### Using Open Iconic's SVGs 25 | 26 | We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute). 27 | 28 | ``` 29 | icon name 30 | ``` 31 | 32 | #### Using Open Iconic's SVG Sprite 33 | 34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. 35 | 36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `` *tag and a unique class name for each different icon in the* `` *tag.* 37 | 38 | ``` 39 | 40 | 41 | 42 | ``` 43 | 44 | Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `` tag with equal width and height dimensions. 45 | 46 | ``` 47 | .icon { 48 | width: 16px; 49 | height: 16px; 50 | } 51 | ``` 52 | 53 | Coloring icons is even easier. All you need to do is set the `fill` rule on the `` tag. 54 | 55 | ``` 56 | .icon-account-login { 57 | fill: #f00; 58 | } 59 | ``` 60 | 61 | To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/). 62 | 63 | #### Using Open Iconic's Icon Font... 64 | 65 | 66 | ##### …with Bootstrap 67 | 68 | You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}` 69 | 70 | 71 | ``` 72 | 73 | ``` 74 | 75 | 76 | ``` 77 | 78 | ``` 79 | 80 | ##### …with Foundation 81 | 82 | You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}` 83 | 84 | ``` 85 | 86 | ``` 87 | 88 | 89 | ``` 90 | 91 | ``` 92 | 93 | ##### …on its own 94 | 95 | You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}` 96 | 97 | ``` 98 | 99 | ``` 100 | 101 | ``` 102 | 103 | ``` 104 | 105 | 106 | ## License 107 | 108 | ### Icons 109 | 110 | All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT). 111 | 112 | ### Fonts 113 | 114 | All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web). 115 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi{position:relative;top:1px;display:inline-block;speak:none;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi.oi-align-center:before{text-align:center}.oi.oi-align-left:before{text-align:left}.oi.oi-align-right:before{text-align:right}.oi.oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi.oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi.oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi-account-login:before{content:'\e000'}.oi-account-logout:before{content:'\e001'}.oi-action-redo:before{content:'\e002'}.oi-action-undo:before{content:'\e003'}.oi-align-center:before{content:'\e004'}.oi-align-left:before{content:'\e005'}.oi-align-right:before{content:'\e006'}.oi-aperture:before{content:'\e007'}.oi-arrow-bottom:before{content:'\e008'}.oi-arrow-circle-bottom:before{content:'\e009'}.oi-arrow-circle-left:before{content:'\e00a'}.oi-arrow-circle-right:before{content:'\e00b'}.oi-arrow-circle-top:before{content:'\e00c'}.oi-arrow-left:before{content:'\e00d'}.oi-arrow-right:before{content:'\e00e'}.oi-arrow-thick-bottom:before{content:'\e00f'}.oi-arrow-thick-left:before{content:'\e010'}.oi-arrow-thick-right:before{content:'\e011'}.oi-arrow-thick-top:before{content:'\e012'}.oi-arrow-top:before{content:'\e013'}.oi-audio-spectrum:before{content:'\e014'}.oi-audio:before{content:'\e015'}.oi-badge:before{content:'\e016'}.oi-ban:before{content:'\e017'}.oi-bar-chart:before{content:'\e018'}.oi-basket:before{content:'\e019'}.oi-battery-empty:before{content:'\e01a'}.oi-battery-full:before{content:'\e01b'}.oi-beaker:before{content:'\e01c'}.oi-bell:before{content:'\e01d'}.oi-bluetooth:before{content:'\e01e'}.oi-bold:before{content:'\e01f'}.oi-bolt:before{content:'\e020'}.oi-book:before{content:'\e021'}.oi-bookmark:before{content:'\e022'}.oi-box:before{content:'\e023'}.oi-briefcase:before{content:'\e024'}.oi-british-pound:before{content:'\e025'}.oi-browser:before{content:'\e026'}.oi-brush:before{content:'\e027'}.oi-bug:before{content:'\e028'}.oi-bullhorn:before{content:'\e029'}.oi-calculator:before{content:'\e02a'}.oi-calendar:before{content:'\e02b'}.oi-camera-slr:before{content:'\e02c'}.oi-caret-bottom:before{content:'\e02d'}.oi-caret-left:before{content:'\e02e'}.oi-caret-right:before{content:'\e02f'}.oi-caret-top:before{content:'\e030'}.oi-cart:before{content:'\e031'}.oi-chat:before{content:'\e032'}.oi-check:before{content:'\e033'}.oi-chevron-bottom:before{content:'\e034'}.oi-chevron-left:before{content:'\e035'}.oi-chevron-right:before{content:'\e036'}.oi-chevron-top:before{content:'\e037'}.oi-circle-check:before{content:'\e038'}.oi-circle-x:before{content:'\e039'}.oi-clipboard:before{content:'\e03a'}.oi-clock:before{content:'\e03b'}.oi-cloud-download:before{content:'\e03c'}.oi-cloud-upload:before{content:'\e03d'}.oi-cloud:before{content:'\e03e'}.oi-cloudy:before{content:'\e03f'}.oi-code:before{content:'\e040'}.oi-cog:before{content:'\e041'}.oi-collapse-down:before{content:'\e042'}.oi-collapse-left:before{content:'\e043'}.oi-collapse-right:before{content:'\e044'}.oi-collapse-up:before{content:'\e045'}.oi-command:before{content:'\e046'}.oi-comment-square:before{content:'\e047'}.oi-compass:before{content:'\e048'}.oi-contrast:before{content:'\e049'}.oi-copywriting:before{content:'\e04a'}.oi-credit-card:before{content:'\e04b'}.oi-crop:before{content:'\e04c'}.oi-dashboard:before{content:'\e04d'}.oi-data-transfer-download:before{content:'\e04e'}.oi-data-transfer-upload:before{content:'\e04f'}.oi-delete:before{content:'\e050'}.oi-dial:before{content:'\e051'}.oi-document:before{content:'\e052'}.oi-dollar:before{content:'\e053'}.oi-double-quote-sans-left:before{content:'\e054'}.oi-double-quote-sans-right:before{content:'\e055'}.oi-double-quote-serif-left:before{content:'\e056'}.oi-double-quote-serif-right:before{content:'\e057'}.oi-droplet:before{content:'\e058'}.oi-eject:before{content:'\e059'}.oi-elevator:before{content:'\e05a'}.oi-ellipses:before{content:'\e05b'}.oi-envelope-closed:before{content:'\e05c'}.oi-envelope-open:before{content:'\e05d'}.oi-euro:before{content:'\e05e'}.oi-excerpt:before{content:'\e05f'}.oi-expand-down:before{content:'\e060'}.oi-expand-left:before{content:'\e061'}.oi-expand-right:before{content:'\e062'}.oi-expand-up:before{content:'\e063'}.oi-external-link:before{content:'\e064'}.oi-eye:before{content:'\e065'}.oi-eyedropper:before{content:'\e066'}.oi-file:before{content:'\e067'}.oi-fire:before{content:'\e068'}.oi-flag:before{content:'\e069'}.oi-flash:before{content:'\e06a'}.oi-folder:before{content:'\e06b'}.oi-fork:before{content:'\e06c'}.oi-fullscreen-enter:before{content:'\e06d'}.oi-fullscreen-exit:before{content:'\e06e'}.oi-globe:before{content:'\e06f'}.oi-graph:before{content:'\e070'}.oi-grid-four-up:before{content:'\e071'}.oi-grid-three-up:before{content:'\e072'}.oi-grid-two-up:before{content:'\e073'}.oi-hard-drive:before{content:'\e074'}.oi-header:before{content:'\e075'}.oi-headphones:before{content:'\e076'}.oi-heart:before{content:'\e077'}.oi-home:before{content:'\e078'}.oi-image:before{content:'\e079'}.oi-inbox:before{content:'\e07a'}.oi-infinity:before{content:'\e07b'}.oi-info:before{content:'\e07c'}.oi-italic:before{content:'\e07d'}.oi-justify-center:before{content:'\e07e'}.oi-justify-left:before{content:'\e07f'}.oi-justify-right:before{content:'\e080'}.oi-key:before{content:'\e081'}.oi-laptop:before{content:'\e082'}.oi-layers:before{content:'\e083'}.oi-lightbulb:before{content:'\e084'}.oi-link-broken:before{content:'\e085'}.oi-link-intact:before{content:'\e086'}.oi-list-rich:before{content:'\e087'}.oi-list:before{content:'\e088'}.oi-location:before{content:'\e089'}.oi-lock-locked:before{content:'\e08a'}.oi-lock-unlocked:before{content:'\e08b'}.oi-loop-circular:before{content:'\e08c'}.oi-loop-square:before{content:'\e08d'}.oi-loop:before{content:'\e08e'}.oi-magnifying-glass:before{content:'\e08f'}.oi-map-marker:before{content:'\e090'}.oi-map:before{content:'\e091'}.oi-media-pause:before{content:'\e092'}.oi-media-play:before{content:'\e093'}.oi-media-record:before{content:'\e094'}.oi-media-skip-backward:before{content:'\e095'}.oi-media-skip-forward:before{content:'\e096'}.oi-media-step-backward:before{content:'\e097'}.oi-media-step-forward:before{content:'\e098'}.oi-media-stop:before{content:'\e099'}.oi-medical-cross:before{content:'\e09a'}.oi-menu:before{content:'\e09b'}.oi-microphone:before{content:'\e09c'}.oi-minus:before{content:'\e09d'}.oi-monitor:before{content:'\e09e'}.oi-moon:before{content:'\e09f'}.oi-move:before{content:'\e0a0'}.oi-musical-note:before{content:'\e0a1'}.oi-paperclip:before{content:'\e0a2'}.oi-pencil:before{content:'\e0a3'}.oi-people:before{content:'\e0a4'}.oi-person:before{content:'\e0a5'}.oi-phone:before{content:'\e0a6'}.oi-pie-chart:before{content:'\e0a7'}.oi-pin:before{content:'\e0a8'}.oi-play-circle:before{content:'\e0a9'}.oi-plus:before{content:'\e0aa'}.oi-power-standby:before{content:'\e0ab'}.oi-print:before{content:'\e0ac'}.oi-project:before{content:'\e0ad'}.oi-pulse:before{content:'\e0ae'}.oi-puzzle-piece:before{content:'\e0af'}.oi-question-mark:before{content:'\e0b0'}.oi-rain:before{content:'\e0b1'}.oi-random:before{content:'\e0b2'}.oi-reload:before{content:'\e0b3'}.oi-resize-both:before{content:'\e0b4'}.oi-resize-height:before{content:'\e0b5'}.oi-resize-width:before{content:'\e0b6'}.oi-rss-alt:before{content:'\e0b7'}.oi-rss:before{content:'\e0b8'}.oi-script:before{content:'\e0b9'}.oi-share-boxed:before{content:'\e0ba'}.oi-share:before{content:'\e0bb'}.oi-shield:before{content:'\e0bc'}.oi-signal:before{content:'\e0bd'}.oi-signpost:before{content:'\e0be'}.oi-sort-ascending:before{content:'\e0bf'}.oi-sort-descending:before{content:'\e0c0'}.oi-spreadsheet:before{content:'\e0c1'}.oi-star:before{content:'\e0c2'}.oi-sun:before{content:'\e0c3'}.oi-tablet:before{content:'\e0c4'}.oi-tag:before{content:'\e0c5'}.oi-tags:before{content:'\e0c6'}.oi-target:before{content:'\e0c7'}.oi-task:before{content:'\e0c8'}.oi-terminal:before{content:'\e0c9'}.oi-text:before{content:'\e0ca'}.oi-thumb-down:before{content:'\e0cb'}.oi-thumb-up:before{content:'\e0cc'}.oi-timer:before{content:'\e0cd'}.oi-transfer:before{content:'\e0ce'}.oi-trash:before{content:'\e0cf'}.oi-underline:before{content:'\e0d0'}.oi-vertical-align-bottom:before{content:'\e0d1'}.oi-vertical-align-center:before{content:'\e0d2'}.oi-vertical-align-top:before{content:'\e0d3'}.oi-video:before{content:'\e0d4'}.oi-volume-high:before{content:'\e0d5'}.oi-volume-low:before{content:'\e0d6'}.oi-volume-off:before{content:'\e0d7'}.oi-warning:before{content:'\e0d8'}.oi-wifi:before{content:'\e0d9'}.oi-wrench:before{content:'\e0da'}.oi-x:before{content:'\e0db'}.oi-yen:before{content:'\e0dc'}.oi-zoom-in:before{content:'\e0dd'}.oi-zoom-out:before{content:'\e0de'} -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/fonts/open-iconic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/fonts/open-iconic.eot -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/fonts/open-iconic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/fonts/open-iconic.otf -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/fonts/open-iconic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/WASM/wwwroot/css/open-iconic/font/fonts/open-iconic.woff -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/WASM/wwwroot/favicon.ico -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HomagGroup/Blazor3D/a44f9f4132cbc0e7ab3110c340351da671b6ec9e/Tutorials/GettingStarted/WASM/wwwroot/icon-192.png -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blazor3DGettingStartedWASM 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Loading...
16 | 17 |
18 | An unhandled error has occurred. 19 | Reload 20 | 🗙 21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Tutorials/GettingStarted/WASM/wwwroot/sample-data/weather.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "date": "2018-05-06", 4 | "temperatureC": 1, 5 | "summary": "Freezing" 6 | }, 7 | { 8 | "date": "2018-05-07", 9 | "temperatureC": 14, 10 | "summary": "Bracing" 11 | }, 12 | { 13 | "date": "2018-05-08", 14 | "temperatureC": -13, 15 | "summary": "Freezing" 16 | }, 17 | { 18 | "date": "2018-05-09", 19 | "temperatureC": -16, 20 | "summary": "Balmy" 21 | }, 22 | { 23 | "date": "2018-05-10", 24 | "temperatureC": -2, 25 | "summary": "Chilly" 26 | } 27 | ] 28 | --------------------------------------------------------------------------------