I'm working on a .NET MAUI application that displays live details of cars. I need to integrate a 3D model into the app with interactive features such as rotation, zooming, and specific views like having the car door face the user on a button click.
The 3D model is currently in .glb format but I too have .obj, .gltf and .usdz format. I can switch to them if required.
Here's a brief overview of what I tried and what problems I am encountering:
1. Evergine: It is a graphics software to create 3D applications and designs just like unity and blender. Evergine can integrate the projects you make to a .NET Maui Solution.
Image showing the 3D project window opened in Evergine
The Problem with Evergine is that when you open the project as a Maui Code in Visual Studio, It creates two different projects in the same solution - one for the scene and the 3D object, and the other one is the Maui app solution which imports the first solution as a 3D Canvas.
Image showing file structure of the solution and two projects in the same solution
This is how the 3D Canvas and and views are imported in the mobile app project:
<ContentPage
x:Class="MyCar3D.MAUI.MainPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:evergine="clr-namespace:MyCar3D.MAUI.Evergine">
<Grid>
<evergine:EvergineView x:Name="evergineView" />
<!-- The above code is for using the canvas -->
</Grid>
</ContentPage>
The problem is the app is already in development with other developers collaborating on it. Adding a new project in this one will create a lot of confusion and maybe after that we have to start everything from scratch (Correct me if I am wrong). Thus it is not feasible.
2. <model-viewer> and WebView integration: In this process I created a webpage using <model-viewer>tags and APIs and hosted it on GitHub pages and used WebView control in the Maui app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car 3D</title>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
</head>
<style>
model-viewer{
width: 400px;
height: 400px;
margin: 0 auto;
}
</style>
<body>
<model-viewer alt="" src="assets\car-glb.glb" ar ios-src="assets\car-usdz.usdz" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
</body>
</html>
Image showing the file structure of the project
The problem is this process always require an internet connection.
I want a solution where I can import the 3D object file in the app without having to create a second project just like that in Evergine and also it should not require an internet connection.
Any guidance or code examples to achieve these interactive features would be greatly appreciated.