flutter display 3d objects flutter_3d_obj
3,068
You can wrap your 3Dmodel Widget with a GestureDectector Widget and use the onTapDownDetail
property to listen to touch position
import 'package:flutter/material.dart';
import 'package:flutter_3d_obj/flutter_3d_obj.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
MyHomePageState createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('3D Touchable Model'),
),
body: Touch3DModel());
}
}
class Touch3DModel extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return Touch3DModelState();
}
}
class Touch3DModelState extends State<Touch3DModel> {
double obj_width = 100;
double obj_height = 100;
double x_coord = 100.0;
double y_coord = 100.0;
void onTapDown(BuildContext context, TapDownDetails details) {
print('${details.globalPosition}');
final RenderBox box = context.findRenderObject();
final Offset localOffset = box.globalToLocal(details.globalPosition);
setState(() {
x_coord = localOffset.dx;
y_coord = localOffset.dy;
});
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (TapDownDetails details) => onTapDown(context, details),
child: Stack(fit: StackFit.expand, children: <Widget>[
Container(color: Colors.grey),
Positioned(
child: Object3D(
size: const Size(obj_width, obj_height),
path: "assets/file.obj",
asset: true,
),
left: x_coord - obj_width / 2, // To offset the object possitioning from top left of the object to the center.
top: y_coord - obj_height / 2,
)
]),
);
}
}
Note: Using flutter_3d_obj will require that you have a 3d obj that you built with something like blender or a similar tool.
Credit to aptik
Author by
griffins
Flutter developer ,GCP,IOS,android,Tensorflow,python
Updated on December 16, 2022Comments
-
griffins over 1 year
I have managed to display 3d objects on flutter using /flutter_3d_obj. I'm now trying to get coordinates of a click point in flutter. How do i go about it.Or what is the best way to display 3d objects in flutter? and have the ability to get coordinates of a point.