🎈 perf: Improve display effect

packages/chili-three/src/threeShape.ts

@@ -13,6 +13,7 @@ import {
     VisualState,
 } from "chili-core";
 import {
+    AlwaysDepth,
     BufferGeometry,
     DoubleSide,
     Float32BufferAttribute,
@@ -40,13 +41,19 @@ const highlightFaceMaterial = new MeshStandardMaterial({
     side: DoubleSide,
     transparent: true,
     opacity: 0.85,
+    depthFunc: AlwaysDepth,
+    polygonOffsetFactor: 0,
+    polygonOffsetUnits: 1.0,
 });
 
 const selectedFaceMaterial = new MeshStandardMaterial({
     color: ThreeHelper.fromColor(Config.instance.visual.selectedFaceColor),
     side: DoubleSide,
     transparent: true,
     opacity: 0.32,
+    depthFunc: AlwaysDepth,
+    polygonOffsetFactor: 0,
+    polygonOffsetUnits: 1.0,
 });
 
 export class ThreeShape extends Object3D implements IVisualShape {
@@ -56,6 +63,9 @@ export class ThreeShape extends Object3D implements IVisualShape {
     private _faceMaterial = new MeshStandardMaterial({
         side: DoubleSide,
         transparent: true,
+        depthFunc: AlwaysDepth,
+        polygonOffsetFactor: 0,
+        polygonOffsetUnits: 1.0,
     });
     private _edgeMaterial = new LineBasicMaterial();
     private _edges?: LineSegments;

packages/chili-three/src/threeView.ts

@@ -17,6 +17,7 @@ import {
     debounce,
 } from "chili-core";
 import {
+    DirectionalLight,
     Intersection,
     LineSegments,
     Mesh,
@@ -48,6 +49,7 @@ export class ThreeView extends Observable implements IView {
     private _needsUpdate: boolean = false;
     readonly #gizmo: ViewGizmo;
     readonly cameraController: CameraController;
+    readonly dynamicLight = new DirectionalLight(0xffffff, 1.5);
 
     private _name: string;
     get name(): string {
@@ -80,6 +82,7 @@ export class ThreeView extends Observable implements IView {
         let resizerObserverCallback = debounce(this.#resizerObserverCallback, 100);
         this.#resizeObserver = new ResizeObserver(resizerObserverCallback);
         this.cameraController = new CameraController(this);
+        this._scene.add(this.dynamicLight);
         this.#gizmo = new ViewGizmo(this);
         this.animate();
     }
@@ -170,6 +173,7 @@ export class ThreeView extends Observable implements IView {
         });
         if (this._needsUpdate) {
             this._renderer.render(this._scene, this.camera);
+            this.dynamicLight.position.copy(this.camera.position);
             this.#gizmo.update();
             this._needsUpdate = false;
         }

packages/chili-three/src/threeVisual.ts

@@ -11,7 +11,7 @@ import {
     Logger,
 } from "chili-core";
 import { ModelSelectionHandler } from "chili-vis";
-import { AmbientLight, AxesHelper, Color, DirectionalLight, Object3D, Scene } from "three";
+import { AmbientLight, AxesHelper, Color, DirectionalLight, Light, Object3D, Scene } from "three";
 import { ThreeHighlighter } from "./threeHighlighter";
 import { ThreeTextGenerator } from "./threeTextGenerator";
 import { ThreeViewHandler } from "./threeViewEventHandler";
@@ -56,8 +56,7 @@ export class ThreeVisual implements IVisual {
         let scene = new Scene();
         scene.background = new Color(0x888888);
         const light = new DirectionalLight(0xffffff, 0.5);
-        let envLight = new AmbientLight(0x888888, 8);
-        scene.add(envLight);
+        let envLight = new AmbientLight(0x888888, 4);
         let axisHelper = new AxesHelper(250);
         scene.add(light, envLight, axisHelper);
         return scene;