Example01.razor

@page "/example01"
@using HomagGroup.Blazor3D.Extras.Core;
@implements IDisposable

<h3>Example01</h3>
<div>
    This example shows how to:
    <ul>
        <li>Control the Blazor3D Viewer component's dimensions with CSS</li>
        <li>Add custom ViewerSettings</li>
        <li>Add user-defined scene</li>
        <li>Add user-defined lights and meshes with different geometries</li>
        <li>Add meshes to the group</li>
        <li>Turn on/off objects selecting mode </li>
        <li>Subscribe ObjectSelected event</li>
        <li>Select object by its UUID</li>
        <li>Control view helper visibility</li>
        <li>Draw edges on the meshes</li>
    </ul>
</div>

<div class="row justify-content-center">
    <div class="col-6 v3d">
        <Viewer @ref="View3D1" ViewerSettings=@settings Scene=scene />
    </div>
    <div class="col-5">
        <input type="text" @bind="selectObjectGuid"></input> <button @onclick="OnSelectObjectByUUIDClick">Select object</button>
    </div>
</div>
<div>@msg</div>


@code {
    private Viewer View3D1 = null!;
    private Guid objGuid;
    private string msg = string.Empty;
    private ViewerSettings settings = new ViewerSettings()
        {
            ContainerId = "example1",
            CanSelect = true,// default is false
            SelectedColor = "yellow",
            ShowViewHelper = false,//default is true
            WebGLRendererSettings = new WebGLRendererSettings
            {
                Antialias = false // if you need poor quality for some reasons
            }
        };

    private Scene scene = new Scene();

    private Guid? selectObjectGuid = null;

    public void Dispose()
    {
        View3D1.ObjectSelected -= OnObjectSelected;
    }

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // subscribe events only once
            View3D1.ObjectSelected += OnObjectSelected;
        }

        return base.OnAfterRenderAsync(firstRender);
    }

    protected override Task OnInitializedAsync()
    {
        scene.Add(new AmbientLight());
        scene.Add(new PointLight()
            {
                Position = new Vector3(1, 3, 0)
            });
        AddMeshes();

        return base.OnInitializedAsync();
    }

    private void AddMeshes()
    {
        scene.Add(new Mesh());
        scene.Add(new Mesh
            {
                Geometry = new BoxGeometry(width: 1.2f, height: 0.5f),
                Position = new Vector3(-2, 0, 0),
                Material = new MeshStandardMaterial()
                {
                    Color = "magenta"
                },
                // draw edges. Note, this breaks selections, because edges are highligted instead of mesh itself.
                // also edges uuid is returned, not the mesh id
                EdgesMaterial = new LineBasicMaterial
                {
                    Color = "black"
                }
            });

        scene.Add(new Mesh
            {
                Geometry = new CircleGeometry(radius: 0.75f, segments: 12),
                Position = new Vector3(2, 0, 0),
                Scale = new Vector3(1, 0.75f, 1),
                Material = new MeshStandardMaterial()
                {
                    Color = "pink"
                }
            });

        scene.Add(new Mesh
            {
                Geometry = new CapsuleGeometry(radius: 0.5f, length: 2),
                Position = new Vector3(-4, 0, 0),
                Material = new MeshStandardMaterial()
                {
                    Color = "darkgreen"
                },
                // draw edges. Note, this breaks selections, because edges are highligted instead of mesh itself.
                // also edges uuid is returned, not the mesh id
                EdgesMaterial = new LineBasicMaterial
                {
                    Color = "black"
                }
            });

        scene.Add(new Mesh
            {
                Geometry = new ConeGeometry(radius: 0.5f, height: 2, radialSegments: 16),
                Position = new Vector3(4, 0, 0),
                Material = new MeshStandardMaterial()
                {
                    Color = "green",
                    FlatShading = true,
                    Metalness = 0.5f,
                    Roughness = 0.5f
                }
            });

        scene.Add(new Mesh
            {
                Geometry = new CylinderGeometry(radiusTop: 0.5f, height: 1.2f, radialSegments: 16),
                Position = new Vector3(0, 0, -2),
                Material = new MeshStandardMaterial()
                {
                    Color = "red",
                    Wireframe = true
                }
            });
        scene.Add(new Mesh
            {
                Geometry = new DodecahedronGeometry(radius: 0.8f),
                Position = new Vector3(-2, 0, -2),
                Material = new MeshStandardMaterial()
                {
                    Color = "darkviolet",
                    Metalness = 0.5f,
                    Roughness = 0.5f
                }
            });

        scene.Add(new Mesh
            {
                Geometry = new IcosahedronGeometry(radius: 0.8f),
                Position = new Vector3(-4, 0, -2),
                Material = new MeshStandardMaterial()
                {
                    Color = "violet"
                },
                // draw edges. Note, this breaks selections, because edges are highligted instead of mesh itself.
                // also edges uuid is returned, not the mesh id
                EdgesMaterial = new LineBasicMaterial
                {
                    Color = "black"
                }
            });

        scene.Add(new Mesh
            {

                Geometry = new OctahedronGeometry(radius: 0.75f),
                Position = new Vector3(2, 0, -2),
                Material = new MeshStandardMaterial()
                {
                    Color = "aqua"
                }
            });

        scene.Add(new Mesh
            {
                Geometry = new PlaneGeometry(width: 0.5f, height: 2),
                Position = new Vector3(4, 0, -2),
                Material = new MeshStandardMaterial()
                {
                    Color = "purple"
                }
            });
        scene.Add(new Mesh
            {
                Geometry = new RingGeometry(innerRadius: 0.6f, outerRadius: 0.7f),
                Position = new Vector3(0, 0, -4),
                Material = new MeshStandardMaterial()
                {
                    Color = "DodgerBlue"
                }
            });
        scene.Add(new Mesh
            {
                Geometry = new SphereGeometry(radius: 0.6f),
                Position = new Vector3(-2, 0, -4),
                Material = new MeshStandardMaterial()
                {
                    Color = "darkgreen"
                },
            });
        scene.Add(new Mesh
            {
                Geometry = new TetrahedronGeometry(radius: 0.75f),
                Position = new Vector3(2, 0, -4),
                Material = new MeshStandardMaterial()
                {
                    Color = "lightblue"
                }
            });
        scene.Add(new Mesh
            {
                Geometry = new TorusGeometry(radius: 0.6f, tube: 0.4f, radialSegments: 12, tubularSegments: 12),
                Position = new Vector3(4, 0, -4),
                Material = new MeshStandardMaterial()
                {
                    Color = "lightgreen"
                }
            });
        scene.Add(new Mesh
            {
                Geometry = new TorusKnotGeometry(radius: 0.6f, tube: 0.1f),
                Position = new Vector3(-4, 0, -4),
                Material = new MeshStandardMaterial()
                {
                    Color = "RosyBrown"
                }
            });

        // Mimic ThreeJS approach to add shape verticies.
        // For now only MoveTo and LineTo available.

        var group = new Group()
            {
                Position = new Vector3 { Z = 2 },
            };

        var shape = new Shape();
        shape.MoveTo(0, 0.25);
        shape.LineTo(0.5, 0.5);
        shape.LineTo(0.75, 0);
        shape.LineTo(0, -0.75);
        shape.LineTo(-0.75, 0);
        shape.LineTo(-0.5, 0.5);

        group.Add(new Mesh
            {
                Geometry = new ShapeGeometry(shape),
                Position = new Vector3() { X = -1, Y = -1 },
                Material = new MeshStandardMaterial()
                {
                    Color = "DarkRed"
                }
            });


        // Creating shape based on points collection.
        var points = new Vector2[]
        {
            new Vector2(0, 0.25),
            new Vector2(0.5, 0.5),
            new Vector2(0.75, 0),
            new Vector2(0, -0.75),
            new Vector2(-0.75, 0),
            new Vector2(-0.5, 0.5),
        };

        shape = new Shape();
        shape.Points.AddRange(points);

        var options = new ExtrudeGeometryOptions
            {
                Depth = 0.25,
                BevelEnabled = false
            };

        group.Add(new Mesh
            {
                Geometry = new ExtrudeGeometry(shape, options),
                Position = new Vector3() { X = 1, Y = -1 },
                Material = new MeshStandardMaterial()
                {
                    Color = "Red"
                }
            });

        scene.Add(group);
    }

    private void OnObjectSelected(Object3DArgs e)
    {
        foreach (var item in scene.Children)
        {
            if (item.Uuid == e.UUID)
            {
                this.msg = $"Selected object with id = {e.UUID} and type {item.Type}";
                StateHasChanged();
                return;
            }
        }
        this.msg = string.Empty;
        StateHasChanged();
    }

    private async Task OnSelectObjectByUUIDClick()
    {
        if (selectObjectGuid.HasValue)
        {
            await View3D1.SelectByUuidAsync(selectObjectGuid.Value);
        }
    }
}