How to use 'ThreeLib' NuGet package for 3D objects in .NET MAUI and show the Canvas/Scene on the screen

38 Views Asked by At

I want to implement 3D in my Maui app. I tried many ways but failed. Currently I am using 'ThreeLib" NuGet package created by McNeel which you can find the reference for here: ThreeLib GitHub Repo (Please read README.md).

Basically what this package does is it creates the Scenes, Cameras, Objects, etc. and then generates a JSON code out of the code defined.

I have a 3D object of a car in .glb, .gltf, .obj and .usdz formats in the . I want to show that in the app. What I want is to show the 3D Canvas with all the entities inside it (e.g. Objects, Material, Camera, Lights, etc.) in the ContentPage. (preferably using controls in xaml).

The problems I am facing is:

  1. I have zero idea about how to insert the 3D Car model, materials and textures in the scene. All I see is importing something using GUID.
  2. I want to show the created Scene on the app but have zero idea about that as well as I am just starting with MAUI.
  3. I also think that I have to use some kind of 'Loaders' or 'Renderers' for the same but dont know how to do that as well.

I created a file called 'Graphics3d.cs' in a folder called 'Graphics'. I wrote the following code in that:

using Newtonsoft;
using Newtonsoft.Json;
using THREE;
using THREE.Cameras;
using THREE.Core;
using THREE.Lights;
using THREE.Materials;
using THREE.Objects;
using THREE.Math;
using ThreeLib3D;
using Color = THREE.Math.Color;

namespace ThreeLib3D.Graphics
{
    public static class Graphics3d
    {
        public static Scene CreateGraphics() {

            var scene = new Scene
            {
                Background = new Color(255, 255, 0).ToInt(),
                Name = "My Scene"
            };

            var perspectiveCamera = new PerspectiveCamera()
            {
                Fov = 45.0f,
                Position = new Vector3(2.0f, 1.0f, 4.0f),
                Rotation = new Euler() { X = -8.0f, Y = 30.0f, Z = 0f},
                Scale = new Vector3(1.0f, 1.0f, 1.0f),
            };
            scene.Add(perspectiveCamera);

            var ambientLight = new AmbientLight()
            {
                Position = new Vector3(2.0f, 1.0f, 4.0f),
                Rotation = new Euler() { X = -8.0f, Y = 30.0f, Z = 0.0f },
                Scale = new Vector3(1.0f, 1.0f, 1.0f),

            };
            scene.Add(ambientLight);

            var carObject = new Object3D()
            {
                Position = new Vector3(0.0f, 0.0f, 0.0f),
                Rotation = new Euler() { X = -90.0f, Y = 0.0f, Z = 0.0f },
                Scale = new Vector3(0.004f, 0.004f, 0.004f),
            };
            scene.Add(carObject);

            var sceneJson = scene.ToJSON(true);

            return scene;
        }
    }
}

For showing these things on screen, as per my knowledge, I tried these things:

  1. Using Code Behind to push the code in Grid named 'MainGrid':
using ThreeLib3D.Graphics;
using Newtonsoft.Json;

namespace ThreeLib3D
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            var scene = Graphics3d.CreateGraphics();
            MainGrid.Children.Add(scene);
        }
    }
}

But the error I was getting was "Cannot convert from 'THREE.Scene' to 'Microsoft.Maui.IView'"

  1. Making a Custom Handler, Registering it and using it as a custom control:
public static class Registration
{
    public static MauiAppBuilder Use3DGraphics(this MauiAppBuilder builder)
    {
        builder.ConfigureMauiHandlers(h =>
        {
            // h.AddHandler<DoughnutView, DoughnutViewHandler>();
            h.AddHandler<Graphics3D, SomeTypeHandler>();
        });

        return builder;
    }
}

The problem with this method is that I don't know what type of handler should I use in place of SomeTypeHandler and don't know how to proceed.

Or is there any other method for this please enlighten me. Please help me out.

0

There are 0 best solutions below