Flutter 3D模型加载插件three_js_simple

Flutter 3D模型加载插件three_js_simple_loaders的使用

插件介绍

three_js_simple_loaderss 是一个用于在项目中加载 STL、OBJ 或 LUT 文件的 three_js 模型加载器。它是一个 Dart 转换的 three.js 和 three_d，最初由 @mrdoob 创建，并由 @wasabia 进行了 Dart 版本的转换。

obj 加载示例

开始使用

要开始使用，请将以下代码添加到您的 pubspec.yaml 文件中，同时包含其他部分 three_js_math, three_js_core, and three_js_core_loadersers。

    late Scene scene;

    void init() {
        scene = Scene();
        scene.background = Color.fromHex32(0xf0f0f0);

        final loader = OBJLoader();
        final obj = await loader.fromAsset('assets/${fileName}.obj');
        scene.add(obj);
        loader.dispose();
    }

使用说明

这个项目是一个简单的用于 three_js 的的模型加载器。

示例

可以在这里找到此 API 的示例：example/lib/main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:three_js_core/three_js_core.dart' as three;
import 'package:three_js_core_loadersers/three_js_core_loadloaders.dart';
import 'package:three_js_simple_loadloaders/three_js_simple_loadloaders.dart';

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const WebglLoaderObjMtl(),
    );
  }
}

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

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

class _MyAppState extends State&lt;WebglLoaderObjMtl&gt; {
  late three.ThreeJS threeJs;

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

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

  late three.Object3D object;

  Future&lt;void&gt; setup() async {
    threeJs.camera = three.PerspectiveCamera(45, threeJs.width / threeJs.height, 0.1, 20);
    threeJs.camera.position.z = 2.5;

    threeJs.scene = three.Scene();

    final ambientLight = three.AmbientLight(0xcccccc, 0.4);
    threeJs.scene.add(ambientLight);

    final pointLight = three.PointLight(0xffffff, 0.8);
    threeJs.camera.add(pointLight);
    threeJs.scene.add(threeJs.camera);

    // texture
    final manager = LoadingManager();

    final mtlLoader = MTLLoader(manager);
    mtlLoader.setPath('assets/obj/male02/');
    final materials = await mtlLoader.fromAsset('male02.mtl');
    await materials?.preload();

    final loader = OBJLoader();
    loader.setMaterials(materials);
    object = (await loader.fromAsset('assets/obj/male02/male02.obj'))!;

    object.position.y = - 0.95;
    object.scale.setScalar( 0.01 );
    threeJs.scene.add(object);
  }
}

更多关于Flutter 3D模型加载插件three_js_simple_loaders的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•5 天前

更多关于Flutter 3D模型加载插件three_js_simple_loaders的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用three_js_simple_loaders插件来加载3D模型的示例代码。请注意，three_js_simple_loaders这个包并不是Flutter官方或广泛认可的包，而是一个假设的包名，用于演示如何在Flutter中集成Three.js及其加载器来加载3D模型。实际使用中，你可能需要找到并集成一个真正适用于Flutter的Three.js插件或包。

由于Flutter本身不支持直接运行JavaScript（如Three.js），我们通常通过webview_flutter或flutter_inappwebview等插件在Flutter中嵌入一个WebView来运行Three.js代码。以下是一个通过webview_flutter来加载和运行Three.js及加载3D模型的示例。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.0  # 请检查最新版本号

步骤 2: 创建一个HTML文件来运行Three.js

在你的assets文件夹中创建一个名为threejs_model.html的文件，并添加以下代码来加载Three.js和GLTFLoader（或其他你需要的加载器）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Model Loader</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script>
        // Basic Three.js setup
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var ambientLight = new THREE.AmbientLight(0x404040); // soft white light
        scene.add(ambientLight);

        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(5, 10, 7.5).normalize();
        scene.add(directionalLight);

        var loader = new THREE.GLTFLoader();
        loader.load('path/to/your/model.glb', function (gltf) {
            scene.add(gltf.scene);
            render();
        }, undefined, function (error) {
            console.error(error);
        });

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            render();
        }

        function render() {
            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>

注意：将'path/to/your/model.glb'替换为你的3D模型的实际路径。确保模型文件可以通过HTTP或HTTPS访问，或者你可以将其打包到应用中并通过本地文件访问（这可能需要一些额外的配置）。

步骤 3: 在Flutter中加载HTML文件

在你的Flutter项目中，创建一个新的页面或修改现有页面来加载这个HTML文件：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class ThreeJSModelPage extends StatefulWidget {
  @override
  _ThreeJSModelPageState createState() => _ThreeJSModelPageState();
}

class _ThreeJSModelPageState extends State<ThreeJSModelPage> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Three.js Model Loader'),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString(
          """
          <html>
            <head><title>Local Three.js</title></head>
            <body>
              <iframe src="assets/threejs_model.html" style="width:100%; height:100%;" frameborder="0"></iframe>
            </body>
          </html>
          """,
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8')
        ).toString(),
        javascriptMode: JavascriptMode.UNRESTRICTED,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

注意：由于WebView组件不直接支持从assets加载本地HTML文件，上面的代码使用了一个iframe的技巧，但这通常不是最佳实践。更推荐的方式是将HTML和相关资源（如JavaScript和3D模型）托管在服务器上，并通过URL加载它们。如果你确实需要将它们打包到应用中，你可能需要使用一个能够处理本地文件访问的WebView插件，如flutter_inappwebview。

总结

上面的代码演示了如何在Flutter中通过WebView来运行Three.js并加载3D模型。然而，由于Flutter和Three.js的生态系统都在不断发展，最好的做法可能是寻找一个专为Flutter设计的Three.js集成库或插件，这样可以获得更好的性能和集成体验。如果three_js_simple_loaders是一个真实存在的库，你应该查阅其官方文档来获取更详细的集成指南。