fl-web-component 1.3.12 → 1.3.14

package/packages/components/com-graphics/index.vue

@@ -939,9 +939,9 @@
         renderer.clippingPlanes = clippingPlanes;
         if (flag) {
           guiParams = {
-            x轴: clippingPlanes[0].constant,
-            y轴: clippingPlanes[2].constant,
-            z轴: clippingPlanes[1].constant,
+            x轴: Math.ceil(clippingPlanes[0].constant),
+            y轴: Math.ceil(clippingPlanes[2].constant),
+            z轴: Math.ceil(clippingPlanes[1].constant),
           };
           this.addClippingGui(
             '全局剖切',
@@ -1061,6 +1061,7 @@
         });
         gui
           .add(guiParams, 'x轴')
+          .step(0.01)
           .min(minValue.x)
           .max(guiParams['x轴'])
           .onChange(d => {
@@ -1069,6 +1070,7 @@
           });
         gui
           .add(guiParams, 'y轴')
+          .step(0.01)
           .min(minValue.y)
           .max(guiParams['y轴'])
           .onChange(d => {
@@ -1077,6 +1079,7 @@
           });
         gui
           .add(guiParams, 'z轴')
+          .step(0.01)
           .min(minValue.z)
           .max(guiParams['z轴'])
           .onChange(d => {
@@ -1608,3 +1611,161 @@
     height: 20px;
   }
 </style>
+<style>
+  /* 自定义lil-gui样式 - 浅色主题 */
+  .lil-gui {
+    background: rgba(255, 255, 255, 0.95) !important;
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 8px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    backdrop-filter: blur(10px) !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+  }
+
+  .lil-gui .title {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+    color: #495057 !important;
+    border-bottom: 1px solid #dee2e6 !important;
+    font-weight: 600 !important;
+    padding: 0px 12px !important;
+    border-radius: 8px 8px 0 0 !important;
+  }
+
+  .lil-gui .controller {
+    border-bottom: 1px solid #f1f3f4 !important;
+    background: transparent !important;
+  }
+
+  .lil-gui .controller:last-child {
+    border-bottom: none !important;
+  }
+
+  .lil-gui .controller .name {
+    color: #495057 !important;
+    font-weight: 500 !important;
+    font-size: 12px !important;
+  }
+
+  .lil-gui .controller .widget {
+    background: #f8f9fa !important;
+    border: 1px solid #ced4da !important;
+    border-radius: 4px !important;
+    color: #495057 !important;
+  }
+
+  .lil-gui .controller .widget:hover {
+    border-color: #80bdff !important;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
+  }
+
+  .lil-gui .controller .widget:focus {
+    border-color: #80bdff !important;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
+    outline: none !important;
+  }
+
+  .lil-gui .controller input[type='range'] {
+    background: #e9ecef !important;
+    height: 4px !important;
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    border-radius: 2px !important;
+  }
+  .lil-gui .controller.number .fill {
+    border-right: solid #008de9;
+  }
+  .lil-gui .controller input[type='range']::-webkit-slider-thumb {
+    background: #007bff !important;
+    border: 2px solid #ffffff !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+    width: 16px !important;
+    height: 16px !important;
+    border-radius: 50% !important;
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    cursor: pointer !important;
+  }
+
+  .lil-gui .controller input[type='range']::-moz-range-thumb {
+    background: #007bff !important;
+    border: 2px solid #ffffff !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+    width: 16px !important;
+    height: 16px !important;
+    border-radius: 50% !important;
+    cursor: pointer !important;
+  }
+
+  .lil-gui .controller .option {
+    background: #ffffff !important;
+    color: #495057 !important;
+    border-bottom: 1px solid #f1f3f4 !important;
+  }
+
+  .lil-gui .controller .option:hover {
+    background: #f8f9fa !important;
+  }
+
+  .lil-gui .controller .option:last-child {
+    border-bottom: none !important;
+  }
+  .lil-gui input:active {
+    background: #e6eff4;
+  }
+  .lil-gui .controller button {
+    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
+    color: #ffffff !important;
+    border: none !important;
+    border-radius: 4px !important;
+    font-weight: 500 !important;
+    transition: all 0.2s ease !important;
+  }
+
+  .lil-gui .controller button:hover {
+    background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3) !important;
+  }
+
+  .lil-gui .controller .color {
+    border: 2px solid #ffffff !important;
+    border-radius: 4px !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+  }
+  .lil-gui .controller.number .slider {
+    background-color: #e6eff4;
+  }
+  .lil-gui .controller.number .slider:hover {
+    background-color: #e6eff4;
+  }
+  .lil-gui input:hover {
+    background: #e6eff4;
+  }
+  .lil-gui input[type='number']:focus,
+  .lil-gui input[type='text']:focus,
+  .lil-gui input {
+    background: #e6eff4;
+  }
+  .lil-gui .controller > .name {
+    min-width: 25px;
+  }
+  .lil-gui .controller.number input {
+    color: #2e3136;
+  }
+  .lil-gui .controller.number .slider:active {
+    background-color: #e6eff4;
+  }
+  .lil-gui .folder > .title {
+    background: linear-gradient(135deg, #f1f3f4 0%, #e9ecef 100%) !important;
+    color: #495057 !important;
+    border-bottom: 1px solid #dee2e6 !important;
+  }
+
+  .lil-gui .folder > .title:before {
+    color: #6c757d !important;
+  }
+
+  .lil-gui .folder.closed > .children {
+    display: none !important;
+  }
+</style>

package/patches/camera-controls+2.9.0.patch

@@ -1,63 +1,63 @@
-diff --git a/node_modules/camera-controls/dist/camera-controls.module.js b/node_modules/camera-controls/dist/camera-controls.module.js
-index 08a8fd6..76089cb 100644
---- a/node_modules/camera-controls/dist/camera-controls.module.js
-+++ b/node_modules/camera-controls/dist/camera-controls.module.js
-@@ -1395,7 +1395,7 @@ class CameraControls extends EventDispatcher {
-      * @category Methods
-      */
-     dolly(distance, enableTransition = false) {
--        return this.dollyTo(this._sphericalEnd.radius - distance, enableTransition);
-+        return this.dollyTo(this._sphericalEnd.radius - distance, this.minDistance, enableTransition);
-     }
-     /**
-      * Dolly in/out camera position to given distance.
-@@ -1403,11 +1403,11 @@ class CameraControls extends EventDispatcher {
-      * @param enableTransition Whether to move smoothly or immediately.
-      * @category Methods
-      */
--    dollyTo(distance, enableTransition = false) {
-+    dollyTo(distance, minDistance, enableTransition = false) {
-         this._isUserControllingDolly = false;
-         this._lastDollyDirection = DOLLY_DIRECTION.NONE;
-         this._changedDolly = 0;
--        return this._dollyToNoClamp(clamp(distance, this.minDistance, this.maxDistance), enableTransition);
-+        return this._dollyToNoClamp(clamp(distance, minDistance, this.maxDistance), enableTransition);
-     }
-     _dollyToNoClamp(distance, enableTransition = false) {
-         const lastRadius = this._sphericalEnd.radius;
-@@ -1635,7 +1635,7 @@ class CameraControls extends EventDispatcher {
-         if (isPerspectiveCamera(this._camera)) {
-             const distance = this.getDistanceToFitBox(bbSize.x, bbSize.y, bbSize.z, cover);
-             promises.push(this.moveTo(center.x, center.y, center.z, enableTransition));
--            promises.push(this.dollyTo(distance, enableTransition));
-+            promises.push(this.dollyTo(distance, this.minDistance, enableTransition));
-             promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
-         }
-         else if (isOrthographicCamera(this._camera)) {
-@@ -1664,7 +1664,7 @@ class CameraControls extends EventDispatcher {
-         promises.push(this.moveTo(boundingSphere.center.x, boundingSphere.center.y, boundingSphere.center.z, enableTransition));
-         if (isPerspectiveCamera(this._camera)) {
-             const distanceToFit = this.getDistanceToFitSphere(boundingSphere.radius);
--            promises.push(this.dollyTo(distanceToFit, enableTransition));
-+            promises.push(this.dollyTo(distanceToFit, this.minDistance, enableTransition));
-         }
-         else if (isOrthographicCamera(this._camera)) {
-             const width = this._camera.right - this._camera.left;
-@@ -1831,7 +1831,7 @@ class CameraControls extends EventDispatcher {
-         _zColumn.multiplyScalar(cameraToPoint.z);
-         _v3A.copy(_xColumn).add(_yColumn).add(_zColumn);
-         _v3A.z = _v3A.z + distance;
--        this.dollyTo(distance, false);
-+        this.dollyTo(distance, Number.EPSILON, false);
-         this.setFocalOffset(-_v3A.x, _v3A.y, -_v3A.z, false);
-         this.moveTo(targetX, targetY, targetZ, false);
-     }
-@@ -2283,7 +2283,7 @@ class CameraControls extends EventDispatcher {
-         this.moveTo(obj.target[0], obj.target[1], obj.target[2], enableTransition);
-         _sphericalA.setFromVector3(_v3A.fromArray(obj.position).sub(this._targetEnd).applyQuaternion(this._yAxisUpSpace));
-         this.rotateTo(_sphericalA.theta, _sphericalA.phi, enableTransition);
--        this.dollyTo(_sphericalA.radius, enableTransition);
-+        this.dollyTo(_sphericalA.radius, this.minDistance, enableTransition);
-         this.zoomTo(obj.zoom, enableTransition);
-         this.setFocalOffset(obj.focalOffset[0], obj.focalOffset[1], obj.focalOffset[2], enableTransition);
-         this._needsUpdate = true;
+diff --git a/node_modules/camera-controls/dist/camera-controls.module.js b/node_modules/camera-controls/dist/camera-controls.module.js
+index 08a8fd6..76089cb 100644
+--- a/node_modules/camera-controls/dist/camera-controls.module.js
++++ b/node_modules/camera-controls/dist/camera-controls.module.js
+@@ -1395,7 +1395,7 @@ class CameraControls extends EventDispatcher {
+      * @category Methods
+      */
+     dolly(distance, enableTransition = false) {
+-        return this.dollyTo(this._sphericalEnd.radius - distance, enableTransition);
++        return this.dollyTo(this._sphericalEnd.radius - distance, this.minDistance, enableTransition);
+     }
+     /**
+      * Dolly in/out camera position to given distance.
+@@ -1403,11 +1403,11 @@ class CameraControls extends EventDispatcher {
+      * @param enableTransition Whether to move smoothly or immediately.
+      * @category Methods
+      */
+-    dollyTo(distance, enableTransition = false) {
++    dollyTo(distance, minDistance, enableTransition = false) {
+         this._isUserControllingDolly = false;
+         this._lastDollyDirection = DOLLY_DIRECTION.NONE;
+         this._changedDolly = 0;
+-        return this._dollyToNoClamp(clamp(distance, this.minDistance, this.maxDistance), enableTransition);
++        return this._dollyToNoClamp(clamp(distance, minDistance, this.maxDistance), enableTransition);
+     }
+     _dollyToNoClamp(distance, enableTransition = false) {
+         const lastRadius = this._sphericalEnd.radius;
+@@ -1635,7 +1635,7 @@ class CameraControls extends EventDispatcher {
+         if (isPerspectiveCamera(this._camera)) {
+             const distance = this.getDistanceToFitBox(bbSize.x, bbSize.y, bbSize.z, cover);
+             promises.push(this.moveTo(center.x, center.y, center.z, enableTransition));
+-            promises.push(this.dollyTo(distance, enableTransition));
++            promises.push(this.dollyTo(distance, this.minDistance, enableTransition));
+             promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
+         }
+         else if (isOrthographicCamera(this._camera)) {
+@@ -1664,7 +1664,7 @@ class CameraControls extends EventDispatcher {
+         promises.push(this.moveTo(boundingSphere.center.x, boundingSphere.center.y, boundingSphere.center.z, enableTransition));
+         if (isPerspectiveCamera(this._camera)) {
+             const distanceToFit = this.getDistanceToFitSphere(boundingSphere.radius);
+-            promises.push(this.dollyTo(distanceToFit, enableTransition));
++            promises.push(this.dollyTo(distanceToFit, this.minDistance, enableTransition));
+         }
+         else if (isOrthographicCamera(this._camera)) {
+             const width = this._camera.right - this._camera.left;
+@@ -1831,7 +1831,7 @@ class CameraControls extends EventDispatcher {
+         _zColumn.multiplyScalar(cameraToPoint.z);
+         _v3A.copy(_xColumn).add(_yColumn).add(_zColumn);
+         _v3A.z = _v3A.z + distance;
+-        this.dollyTo(distance, false);
++        this.dollyTo(distance, Number.EPSILON, false);
+         this.setFocalOffset(-_v3A.x, _v3A.y, -_v3A.z, false);
+         this.moveTo(targetX, targetY, targetZ, false);
+     }
+@@ -2283,7 +2283,7 @@ class CameraControls extends EventDispatcher {
+         this.moveTo(obj.target[0], obj.target[1], obj.target[2], enableTransition);
+         _sphericalA.setFromVector3(_v3A.fromArray(obj.position).sub(this._targetEnd).applyQuaternion(this._yAxisUpSpace));
+         this.rotateTo(_sphericalA.theta, _sphericalA.phi, enableTransition);
+-        this.dollyTo(_sphericalA.radius, enableTransition);
++        this.dollyTo(_sphericalA.radius, this.minDistance, enableTransition);
+         this.zoomTo(obj.zoom, enableTransition);
+         this.setFocalOffset(obj.focalOffset[0], obj.focalOffset[1], obj.focalOffset[2], enableTransition);
+         this._needsUpdate = true;