交互基本完善

lib/pages/webview_page/view.dart

@@ -1,7 +1,11 @@
+import 'dart:async';
 import 'dart:convert';
+import 'dart:html';
 import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui';
 
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' hide Image;
 import 'package:flutter/services.dart';
 import 'package:webview_demo/utils/helper.dart';
 import 'package:webviewx/webviewx.dart';
@@ -66,6 +70,16 @@ class _WebViewXPageState extends State<WebViewXPage> {
     }
   }
 
+  String _loadRandomImage(int width, int height) {
+    CanvasElement canvas = CanvasElement(width: width, height: height);
+    var ctx = canvas.context2D
+      ..fillStyle =
+          "rgb(${Random().nextInt(255)},${Random().nextInt(255)},${Random().nextInt(255)})"
+      ..fillRect(0, 0, width, height);
+    var dataUrl = canvas.toDataUrl("image/jpeg", 0.95);
+    return dataUrl;
+  }
+
   @override
   void dispose() {
     webviewController.dispose();
@@ -154,6 +168,9 @@ class _WebViewXPageState extends State<WebViewXPage> {
                   callBack: (msg) {
                     final data = jsonDecode(msg);
 
+                    ///random color
+                    final imageData = _loadRandomImage(300, 300);
+
                     /// result 需要传入 WorldPoints 列表（切面端点的三维坐标）、ImagePoints 列表（切面端点的二维坐标）、ImageData 图像路径(Base64)
                     final result = {
                       "ErrorCode": 1000,
@@ -164,7 +181,7 @@ class _WebViewXPageState extends State<WebViewXPage> {
                         {"X": 1.0, "Y": 0.0},
                         {"X": 0.0, "Y": 0.0}
                       ],
-                      "ImageData": "filepath?"
+                      "ImageData": imageData
                     };
                     return jsonEncode(result);
                   },
@@ -248,6 +265,11 @@ class _WebViewXPageState extends State<WebViewXPage> {
         text: '4. 执行 mdlFileLoaded("Carotid","True") （iframe 中）',
         onTap: _mdlFileLoaded,
       ),
+      buildSpace(direction: Axis.vertical, flex: false, amount: 20.0),
+      createButton(
+        text: '切换模型 changeSurface （iframe 中）',
+        onTap: _changeSurface,
+      ),
     ];
   }
 
@@ -274,6 +296,27 @@ class _WebViewXPageState extends State<WebViewXPage> {
     }
   }
 
+  Future<void> _changeSurface() async {
+    final faceImages = [
+      _loadRandomImage(2, 2),
+      _loadRandomImage(2, 2),
+      _loadRandomImage(2, 2),
+      _loadRandomImage(2, 2),
+      _loadRandomImage(2, 2),
+      _loadRandomImage(2, 2),
+    ];
+    // print([759, 596, 397, ...faceImages]);
+    try {
+      await webviewController
+          .callJsMethod('changeSurface', [759, 596, 397, ...faceImages]);
+    } catch (e) {
+      showAlertDialog(
+        executeJsErrorMessage,
+        context,
+      );
+    }
+  }
+
   Future<void> _mdlFileLoaded() async {
     try {
       await webviewController

threejsview/js/customScript/CefInterface.js

@@ -1,21 +1,36 @@
 function setSurface(cubeWidth, cubeHeight, cubeDepth, surfaceFolder) {
-    EventCenter.emit('SetSurface', {cubeWidth, cubeHeight, cubeDepth, surfaceFolder});
-    return true;
+  EventCenter.emit("SetSurface", {
+    cubeWidth,
+    cubeHeight,
+    cubeDepth,
+    surfaceFolder,
+  });
+  return true;
+}
+/// surfacesList 是六个数据
+function changeSurface(cubeWidth, cubeHeight, cubeDepth, ...surfacesList) {
+  EventCenter.emit("ChangeSurface", {
+    cubeWidth,
+    cubeHeight,
+    cubeDepth,
+    surfacesList: surfacesList,
+  });
+  return true;
 }
 // 传入 sourceenum == "Carotid" && docarotidaiclip=="True";
 function mdlFileLoaded(sourceenum, docarotidaiclip) {
-    SpriteManager.mdlFileLoaded(sourceenum, docarotidaiclip);
+  SpriteManager.mdlFileLoaded(sourceenum, docarotidaiclip);
 }
 
 function adjustedImage(surfaceFolder, meshObjectImage) {
-    EventCenter.emit('ResetCubeImage', surfaceFolder);
-    ClipPlaneManager.refreshClipPlanesMesh(meshObjectImage);
+  EventCenter.emit("ResetCubeImage", surfaceFolder);
+  ClipPlaneManager.refreshClipPlanesMesh(meshObjectImage);
 }
 
 function getCurrentClipInformation() {
-    return ClipPlaneManager.getSelectedClipInfo();
+  return ClipPlaneManager.getSelectedClipInfo();
 }
 
 function release() {
-    EventCenter.emit('RemoveCube');
+  EventCenter.emit("RemoveCube");
 }

threejsview/js/customScript/InitPage.js

@@ -66,6 +66,7 @@ function initPage() {
   initClipArgs();
   // 触发方式 setSurface(100,100,100,"../3DWeb/FaceImage")
   EventCenter.addEventHandler("SetSurface", createCube);
+  EventCenter.addEventHandler("ChangeSurface", changeCube);
   EventCenter.addEventHandler("ResetCubeImage", resetCubeImage);
   EventCenter.addEventHandler("RemoveCube", removeCube);
 }
@@ -100,6 +101,34 @@ function createCube(surfaceInfo) {
   EdgesManager.edgesNeedUpdate = true;
 }
 
+function changeCube(surfaceInfo) {
+  SpriteManager.allowClip = false;
+  //remove old
+  removeCube();
+  //create new
+  width = surfaceInfo.cubeWidth;
+  height = surfaceInfo.cubeHeight;
+  depth = surfaceInfo.cubeDepth;
+  let surfacePaths = [];
+  for (const surface of surfaceInfo.surfacesList) {
+    surfacePaths.push(surface);
+  }
+
+  let materials = [];
+  let textures = loadBase64Surface(surfacePaths);
+  textures.forEach((texture) => {
+    materials.push(
+      new THREE.MeshPhongMaterial({ map: texture, clippingPlanes: [] })
+    );
+  });
+  let geometry = new THREE.BoxGeometry(width, height, depth);
+  cube = new THREE.Mesh(geometry, materials);
+  cube.position.set(width / 2, height / 2, -depth / 2);
+  scene.add(cube);
+  resetCubePosition();
+  EdgesManager.edgesNeedUpdate = true;
+}
+
 function resetCubeImage(surfaceFolder) {
   let surfacePaths = [];
   for (let i = 1; i <= 6; i++) {
@@ -166,6 +195,31 @@ function loadSurface(images, callback) {
 
   return textures;
 }
+function loadBase64Surface(images, callback) {
+  var textures = [];
+  for (let i = 0; i < images.length; i++) {
+    textures[i] = LoaderUtility.loadBase64Texture(images[i], (texture) => {
+      texture.minFilter = texture.magFilter = THREE.LinearFilter;
+      texture.mapping = THREE.UVMapping;
+      texture.center.set(0.5, 0.5);
+      if (i === 0) {
+        texture.rotation = 1.57;
+      }
+      if (i === 1) {
+        texture.rotation = -1.57;
+      }
+      if (i === 5) {
+        texture.rotation = 3.14;
+      }
+
+      if (callback != undefined) {
+        callback(texture, i);
+      }
+    });
+  }
+
+  return textures;
+}
 
 function onWindowResize() {
   camera.aspect = window.innerWidth / window.innerHeight;

threejsview/js/customScript/clipWorkflow/ClipMeshUpgrader.js

@@ -59,17 +59,14 @@ function refreshClipMesh(plane, mesh, imageName, callback) {
       imageVectors.push(new THREE.Vector2(item.X, item.Y))
     );
 
-    LoaderUtility.loadBase64Texture(
-      "data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGXElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgdLbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wnk2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbFZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==",
-      (texture) => {
-        mesh.material.map.dispose();
-        mesh.material.map = texture;
-        updateMeshGeometry();
-        if (callback != undefined) {
-          callback();
-        }
+    LoaderUtility.loadBase64Texture(clipPlaneData.ImageData, (texture) => {
+      mesh.material.map.dispose();
+      mesh.material.map = texture;
+      updateMeshGeometry();
+      if (callback != undefined) {
+        callback();
       }
-    );
+    });
     // LoaderUtility.loadUniqueTexture(clipPlaneData.ImageData + "//" + imageName,
     //     texture => {
     //         mesh.material.map.dispose();