Flutter场景渲染插件scenekit_plugin的使用

scenekit_plugin

iOS平台上的一个插件，用于在SceneKit iOS中渲染3D模型。

目录

• 支持的平台
• 特性
• 截图
• 使用方法

支持的平台

• iOS 9.0+

特性

• 3D地球
• 可以在3D地球上添加小部件
• 点击小部件
• 在小部件中显示图片
• 渲染场景释放

截图

| iOS | |

使用方法

初始化SceneKit视图

late ScenekitController scenekitController;

ScenekitView(
    onScenekitViewCreated: onScenekitViewCreated,
),

void onScenekitViewCreated(ScenekitController scenekitController) {
    this.scenekitController = scenekitController;
}

将地球放置到场景中

scenekitController.addWidgetToScene();

在地球上放置小部件

scenekitController.addWidgetToEarth(model:
    ScenekitWidgetModel(
        lat: 80,
        long: 5,
        name: "widgetNode1",
        assetName: 'assets/eagle.png',
        hexColor: 0x7FFF00,
        onWidgetTap: () async {
            await HapticFeedback.lightImpact();
            print("navigate to widgetNode1 !");
        },
    ),
)

在地球上放置多个小部件

scenekitController.addWidgetsToEarth(models: [
        ScenekitWidgetModel(
            lat: 80,
            long: 5,
            name: "widgetNode1",
            assetName: 'assets/eagle.png',
            hexColor: 0x7FFF00,
            onWidgetTap: () async {
                await HapticFeedback.lightImpact();
                print("navigate to widgetNode1 !");
            },
        ),
        ScenekitWidgetModel(
            lat: 43,
            long: -85,
            name: "widgetNode2",
            assetName: 'assets/eagle.png',
            hexColor: 0x7FFF00,
            onWidgetTap: () async {
                await HapticFeedback.lightImpact();
                print("navigate to widgetNode2 !");
            },
        ),
        ScenekitWidgetModel(
            lat: -19,
            long: 47,
            name: "widgetNode3",
            assetName: 'assets/eagle.png',
            hexColor: 0x7FFF00,
            onWidgetTap: () async {
                await HapticFeedback.lightImpact();
                print("navigate to widgetNode3 !");
            },
        ),
    ],
)

完整示例代码

以下是完整的示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:scenekit_plugin/controller/scenekit_plugin_controller_interface.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: ScenekitPage());
  }
}

class ScenekitPage extends StatefulWidget {
  const ScenekitPage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<ScenekitPage> createState() => _ScenekitPageState();
}

class _ScenekitPageState extends State<ScenekitPage> {
  late ScenekitController scenekitController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(children: [
          CupertinoButton(
            child: const Icon(Icons.public_sharp, color: Colors.white),
            onPressed: () async {
              await scenekitController.addEarthToScene(
                initialScale: 1.5,
                backgroundColor: 0xff1E3968,
              );
            },
          ),
          CupertinoButton(
            child: const Icon(Icons.place, color: Colors.white),
            onPressed: () async {
              await scenekitController.setWidgetsToEarth(models: [
                ScenekitWidgetModel(
                  key: "1",
                  lat: 50.83807146055582,
                  long: 156.87842152770136,
                  assetName: 'assets/eagle.png',
                  onWidgetTap: () async {
                    await HapticFeedback.lightImpact();
                    print("navigate to widgetNode1 !");
                  },
                ),
              ]);
            },
          ),
          CupertinoButton(
            child: const Icon(Icons.display_settings_outlined, color: Colors.white),
            onPressed: () async {
              await scenekitController.removeWidgets();
            },
          ),
        ]),
      ),
      body: _viewWithPlanet,
    );
  }

  Widget get _viewWithPlanet {
    return SizedBox(
      child: ScenekitView(
        isAllowedToInteract: true,
        onScenekitViewCreated: onScenekitViewCreated,
      ),
    );
  }

  void onScenekitViewCreated(ScenekitController scenekitController) async {
    this.scenekitController = scenekitController;
    final version = await scenekitController.getPlatformVersion();
    await scenekitController.addEarthToScene(
      initialScale: 0.62, // full
      // initialScale: 0.9, // 300
      backgroundColor: 0xff1E3968,
      // y: -0.45
    );
    print(version);
  }

  [@override](/user/override)
  void dispose() {
    //scenekitController.dispose();
    super.dispose();
  }
}