Flutter三维地形渲染插件three_js_terrain的使用

three_js_terrain 是一个基于 Three.js 的 Dart 转换插件，允许用户为他们的项目创建三维地形。以下是如何使用该插件的详细说明及示例代码。

使用

安装插件

在你的 pubspec.yaml 文件中添加依赖项：

dependencies:
  three_js_terrain: ^最新版本号

运行 flutter pub get 来安装依赖项。

示例代码

以下是使用 three_js_terrain 创建三维地形的完整示例代码。

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:three_js/three_js.dart' as three;
import 'package:three_js_terrain/three_js_terrain.dart' as terrain;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const TerrainPage(),
    );
  }
}

class TerrainPage extends StatefulWidget {
  const TerrainPage({super.key});
  [@override](/user/override)
  State<TerrainPage> createState() => _TerrainPageState();
}

class _TerrainPageState extends State<TerrainPage> {
  late three.ThreeJS threeJs;
  late three.OrbitControls orbit;
  late three.PerspectiveCamera cameraPersp;
  Uint8List? heightMapImage;

  [@override](/user/override)
  void initState() {
    threeJs = three.ThreeJS(
      onSetupComplete: () {},
      setup: setup,
    );
    super.initState();
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          threeJs.build(),
          if (heightMapImage != null)
            Positioned(
              top: 20,
              left: 20,
              child: Image.memory(
                heightMapImage!,
                width: 120,
                fit: BoxFit.fitHeight,
              )
            ),
          if (heightMapImage != null)
            Positioned(
              top: 20,
              right: 20,
              child: SizedBox(
                height: threeJs.height,
                width: 240,
                child: Gui.render(context)
              )
            )
        ]
      )
    );
  }

  Future<void> setup() async {
    threeJs.scene = three.Scene();
    threeJs.camera = three.PerspectiveCamera(60, threeJs.width / threeJs.height, 1, 10000);
    threeJs.scene.add(threeJs.camera);

    threeJs.camera.position.setValues(449, 311, 376);
    threeJs.camera.rotation.setValues(-52 * math.pi / 180, 35 * math.pi / 180, 37 * math.pi / 180);

    orbit = three.OrbitControls(threeJs.camera, threeJs.globalKey);

    await getHeightMapFromImage();
    await setupWorld();
    await settings();
    setupGui();

    threeJs.addAnimationEvent((dt) {
      orbit.update();
    });
  }

  Future<void> getHeightMapFromImage() async {
    final ByteData fileData = await rootBundle.load('assets/heightmap.png');
    final bytes = fileData.buffer.asUint8List();
    img.Image? image = img.decodeImage(bytes);
    heightMapImage = image!.getBytes();
  }

  Future<void> setupWorld() async {
    // 添加天空盒
    final t1 = await three.TextureLoader().fromAsset('assets/sky1.jpg');
    t1?.minFilter = three.LinearFilter;
    final skyDome = three.Mesh(
      three.SphereGeometry(8192, 16, 16, 0, math.pi * 2, 0, math.pi * 0.5),
      three.MeshBasicMaterial.fromMap({'map': t1, 'side': three.BackSide, 'fog': false})
    );
    skyDome.position.y = -99;
    threeJs.scene.add(skyDome);

    // 添加水体
    final water = three.Mesh(
      three.PlaneGeometry(16384 + 1024, 16384 + 1024, 16, 16),
      three.MeshLambertMaterial.fromMap({'color': 0x006ba0, 'transparent': true, 'opacity': 0.6})
    );
    water.position.y = -99;
    water.rotation.x = -0.5 * math.pi;
    threeJs.scene.add(water);

    // 添加光源
    final skyLight = three.DirectionalLight(0xe8bdb0, 1.5);
    skyLight.position.setValues(2950, 2625, -160);
    threeJs.scene.add(skyLight);

    final light = three.DirectionalLight(0xc3eaff, 0.75);
    light.position.setValues(-1, -0.5, -1);
    threeJs.scene.add(light);
  }

  void setupGui() {
    // GUI 控件设置
    // 这里省略了详细的 GUI 控件设置代码
  }

  Future<void> settings() async {
    // 设置纹理和材质
    // 这里省略了详细的纹理和材质设置代码
  }

  void regenerate(three.Material? blend) {
    // 生成地形
    // 这里省略了详细的地形生成代码
  }

  void scatterMeshes() {
    // 散布网格
    // 这里省略了详细的散布网格代码
  }

  double altitudeProbability(double z) {
    // 高度概率计算
    // 这里省略了详细的高度概率计算代码
  }

  bool altitudeSpread(three.Vector3 v, double k, three.Vector3 v2, int i) {
    // 高度散布逻辑
    // 这里省略了详细的高度散布逻辑代码
  }
}