Flutter三维图形控制插件three_js_controls的使用

three_js_controls

three_js_controls 是一种 three_js 相机控制器，允许用户在项目中添加轨道、飞行、第一人称视角、点、轨道球、地图或拖拽控制器。

这个插件是 three.js 和 three_dart 的 Dart 转换版本，最初由 @mrdoob 创建，并且有一个由 @wasabia 贡献的 Dart 分支。

开始使用

要在你的项目中开始使用，请将以下依赖项添加到 pubspec.yaml 文件中，并确保包含其他部分如 three_js_math, three_js_core 和 three_js_(loader type)。

dependencies:
  three_js_controls: ^最新版本号
  three_js_math: ^最新版本号
  three_js_core: ^最新版本号

初始化控制器的示例代码：

late MapControls controls;

void initControls() {
  controls = MapControls(camera, _globalKey);

  controls.enableDamping = true; // 当启用阻尼或自动旋转时，需要动画循环
  controls.dampingFactor = 0.05;

  controls.screenSpacePanning = false;

  controls.minDistance = 100;
  controls.maxDistance = 500;

  controls.maxPolarAngle = math.pi / 2;
}

void update() {
  controls.update();
}

使用方法

这个项目是一个简单的 three_js 相机控制器。

示例

你可以在这里找到这个 API 的示例代码：main.dart 示例代码。

示例代码

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:three_js_controls/three_js_controls.dart';
import 'package:three_js_core/three_js_core.dart' as three;
import 'package:three_js_geometry/three_js_geometry.dart';
import 'package:three_js_math/three_js_math.dart' as tmath;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MiscControlsOrbit(),
    );
  }
}

class MiscControlsOrbit extends StatefulWidget {
  const MiscControlsOrbit({super.key});

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MiscControlsOrbit> {
  late three.ThreeJS threeJs;

  [@override](/user/override)
  void initState() {
    threeJs = three.ThreeJS(
      onSetupComplete: () { setState(() {}); },
      setup: setup,
      settings: three.Settings(
        renderOptions: {
          "minFilter": tmath.LinearFilter,
          "magFilter": tmath.LinearFilter,
          "format": tmath.RGBAFormat,
          "samples": 4
        }
      )
    );
    super.initState();
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return threeJs.build();
  }

  late three.Mesh mesh;
  late OrbitControls controls;

  void setup() {
    threeJs.scene = three.Scene();
    threeJs.scene.background = tmath.Color.fromHex32(0xcccccc);
    threeJs.scene.fog = three.FogExp2(0xcccccc, 0.002);

    threeJs.camera = three.PerspectiveCamera(60, threeJs.width / threeJs.height, 1, 1000);
    threeJs.camera.position.setValues(400, 200, 0);

    // 控制器

    controls = OrbitControls(threeJs.camera, threeJs.globalKey);
    // controls.listenToKeyEvents(window);

    // controls.addEventListener('change', render); // 只在静态场景中调用（即如果没有动画循环）

    controls.enableDamping = true; // 当启用阻尼或自动旋转时，需要动画循环
    controls.dampingFactor = 0.05;

    controls.screenSpacePanning = false;

    controls.minDistance = 100;
    controls.maxDistance = 500;

    controls.maxPolarAngle = math.pi / 2;

    // 世界

    final geometry = CylinderGeometry(0, 10, 30, 4, 1);
    final material = three.MeshPhongMaterial.fromMap({"color": 0xffffff, "flatShading": true});

    for (int i = 0; i < 500; i++) {
      final mesh = three.Mesh(geometry, material);
      mesh.position.x = math.Random().nextDouble() * 1600 - 800;
      mesh.position.y = 0;
      mesh.position.z = math.Random().nextDouble() * 1600 - 800;
      mesh.updateMatrix();
      mesh.matrixAutoUpdate = false;
      threeJs.scene.add(mesh);
    }

    final dirLight1 = three.DirectionalLight(0xffffff);
    dirLight1.position.setValues(1, 1, 1);
    threeJs.scene.add(dirLight1);

    final dirLight2 = three.DirectionalLight(0x002288);
    dirLight2.position.setValues(-1, -1, -1);
    threeJs.scene.add(dirLight2);

    final ambientLight = three.AmbientLight(0x222222);
    threeJs.scene.add(ambientLight);

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