How to use ARKitBox?

[FlutterEngineer]

I need an example to use ARKitBox and I try different method but is it not working

import 'dart:async';

import 'package:arkit_plugin/arkit_plugin.dart';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart';

class EarthPage extends StatefulWidget {
  @override
  _EarthPageState createState() => _EarthPageState();
}

class _EarthPageState extends State<EarthPage> {
  ARKitController arkitController;
  Timer timer;

  @override
  void dispose() {
    timer?.cancel();
    arkitController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: const Text('Earth Sample')),
        body: Container(
          child: ARKitSceneView(
            onARKitViewCreated: onARKitViewCreated,
          ),
        ),
      );

  void onARKitViewCreated(ARKitController arkitController) {
    this.arkitController = arkitController;

    final material = ARKitMaterial(
      lightingModelName: ARKitLightingModel.lambert,
      diffuse: ARKitMaterialProperty(image: 'earth.jpg'),
    );
    final sphere = ARKitSphere(
      materials: [material],
      radius: 0.1
    );

    final box = ARKitBox(

      materials: [material],
      width:50, height:50, length:50, chamferRadius:10,
     // radius: 0.1,
    );

    final   node = ARKitNode(
      geometry: box,
      position: Vector3(0, 0, -0.5),
     // eulerAngles: Vector3.zero(),
    );
    final   node2 = ARKitNode(
      geometry: box,
      position: Vector3(0, 180, 0),
      rotation: Vector4(0, 0, 0,0),
      eulerAngles: Vector3.zero(),
    );

    this.arkitController.add(node);
    timer = Timer.periodic(const Duration(milliseconds: 50), (timer) {
      // final rotation = node2.eulerAngles;
      // rotation.x += 0.01;
      // node2.eulerAngles = rotation;
    });

  }
}

https://stackoverflow.com/questions/64415300/how-to-use-arkitbox

[olexale]

Hi,

The problem is that you've made a box with the size of a 50x50x50 meter. It is just too big, so when you render it, the smartphone appears inside the box. You either need to make it smaller or set doubleSided property of the material to true in order to make it render from the inside.

Here, I've cleaned up your sample a bit:

import 'package:arkit_plugin/arkit_plugin.dart';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart';

class EarthPage extends StatefulWidget {
  @override
  _EarthPageState createState() => _EarthPageState();
}

class _EarthPageState extends State<EarthPage> {
  ARKitController arkitController;

  @override
  void dispose() {
    arkitController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: const Text('Earth Sample')),
        body: Container(
          child: ARKitSceneView(
            onARKitViewCreated: onARKitViewCreated,
          ),
        ),
      );

  void onARKitViewCreated(ARKitController arkitController) {
    this.arkitController = arkitController;

    final material = ARKitMaterial(
        lightingModelName: ARKitLightingModel.lambert,
        diffuse: ARKitMaterialProperty(image: 'earth.jpg'),
        doubleSided: true);

    final box =
        ARKitBox(materials: [material], width: 0.1, height: 0.1, length: 0.1);

    final node = ARKitNode(
      geometry: box,
      position: Vector3(0, 0, -0.5),
    );

    this.arkitController.add(node);
  }
}