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:
- 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.
- 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.
- 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:
- 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'"
- 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.