Flutter三维变换控制插件three_js_transform_controls的使用

Flutter三维变换控制插件three_js_transform_controls的使用

three_js_transform_controls 是一个用于在 Flutter 中添加三维变换控制的插件。它允许用户在项目中添加弧球控制器或变换控制器。

获取开始

要开始使用该插件，请将其添加到您的 pubspec.yaml 文件中，并确保同时引入 three_js_math, three_js_core 和其他必要的 three_js_(loader type) 库。

dependencies:
  three_js_transform_controls: ^版本号
  three_js_math: ^版本号
  three_js_core: ^版本号

初始化控制器

首先，我们需要初始化控制器并监听变化事件。

late ArcballControls controls;

void initControls() {
  controls = ArcballControls(camera, _globalKey, scene, 1);
  controls.addEventListener('change', (event) {
    render();
  });
}

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

使用示例

以下是一个完整的示例代码，展示了如何在 Flutter 项目中使用 three_js_transform_controls 插件。

import 'package:flutter/material.dart';
import 'package:three_js_transform_controls/three_js_transform_controls.dart';
import 'package:three_js_core/three_js_core.dart' as three;
import 'package:three_js_math/three_js_math.dart' as tmath;

import 'dart:math' as math;
import 'dart:async';
import 'package:flutter/services.dart';

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 MiscControlsArcball(),
    );
  }
}

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

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

class _MyAppState extends State<MiscControlsArcball> {
  late three.ThreeJS threeJs;
  late TransformControls control;
  late ArcballControls orbit;
  late three.PerspectiveCamera cameraPersp;
  
  [@override](/user/override)
  void initState() {
    threeJs = three.ThreeJS(
      onSetupComplete: (){setState(() {});},
      setup: setup,
    );
    super.initState();
  }

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

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

  Future<void> setup() async {
    final aspect = threeJs.width / threeJs.height;
    cameraPersp = three.PerspectiveCamera(50, aspect, 0.1, 100);
    threeJs.camera = cameraPersp;

    threeJs.camera.position.setValues(5, 2.5, 5);

    threeJs.scene = three.Scene();

    final ambientLight = three.AmbientLight(0xffffff, 0.3);
    threeJs.scene.add(ambientLight);

    final light = three.DirectionalLight(0xffffff, 0.3);
    light.position = threeJs.camera.position;
    threeJs.scene.add(light);

    final geometry = three.BoxGeometry();
    final material = three.MeshLambertMaterial.fromMap();

    orbit = ArcballControls(threeJs.camera, threeJs.globalKey);
    orbit.update();
    orbit.addEventListener('change', (event) {
      threeJs.render();
    });

    control = TransformControls(threeJs.camera, threeJs.globalKey);
    control.addEventListener('change', (event) {
      threeJs.render();
    });

    control.addEventListener('dragging-changed', (event) {
      orbit.enabled = !event.value;
    });

    final mesh = three.Mesh(geometry, material);
    threeJs.scene.add(mesh);

    control.attach(mesh);
    threeJs.scene.add(control);

    threeJs.domElement.addEventListener(
      three.PeripheralType.resize,
      threeJs.onWindowResize
    );

    threeJs.domElement.addEventListener(three.PeripheralType.keydown, (event) {
      event as LogicalKeyboardKey;
      switch (event.keyLabel.toLowerCase()) {
        case 'q':
          control.setSpace(control.space == 'local' ? 'world' : 'local');
          break;
        case 'shift right':
        case 'shift left':
          control.setTranslationSnap(1);
          control.setRotationSnap(tmath.MathUtils.degToRad(15));
          control.setScaleSnap(0.25);
          break;
        case 'w':
          control.setMode(GizmoType.translate);
          break;
        case 'e':
          control.setMode(GizmoType.rotate);
          break;
        case 'r':
          control.setMode(GizmoType.scale);
          break;
        case 'c':
          final position = threeJs.camera.position.clone();

          threeJs.camera = cameraPersp;
          threeJs.camera.position.setFrom(position);

          control.camera = threeJs.camera;

          threeJs.camera.lookAt(orbit.target);
          threeJs.onWindowResize(context);
          break;
        case 'v':
          final randomFoV = math.Random().nextDouble() + 0.1;
          final randomZoom = math.Random().nextDouble() + 0.1;

          cameraPersp.fov = randomFoV * 160;

          cameraPersp.zoom = randomZoom * 5;
          threeJs.onWindowResize(context);
          break;
        case '+':
        case '=':
          control.setSize(control.size + 0.1);
          break;
        case '-':
        case '_':
          control.setSize(math.max(control.size - 0.1, 0.1));
          break;
        case 'x':
          control.showX = !control.showX;
          break;
        case 'y':
          control.showY = !control.showY;
          break;
        case 'z':
          control.showZ = !control.showZ;
          break;
        case ' ':
          control.enabled = !control.enabled;
          break;
        case 'escape':
          //control.reset();
          break;
      }
    });

    threeJs.domElement.addEventListener(three.PeripheralType.keyup, (event) {
      event as LogicalKeyboardKey;
      switch (event.keyLabel.toLowerCase()) {
        case 'shift right':
        case 'shift left':
          control.setTranslationSnap(null);
          control.setRotationSnap(null);
          control.setScaleSnap(null);
          break;
      }
    });
  }
}