0

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.

2
  • that lib just creates the objects, it doesn't have any rendering components Commented Mar 18, 2024 at 17:57
  • @Jason then how can I use them for my purpose? Commented Mar 20, 2024 at 4:48

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.