diff --git a/packages/chili-three/src/threeShape.ts b/packages/chili-three/src/threeShape.ts index 0dd9b7ba..26a4c1be 100644 --- a/packages/chili-three/src/threeShape.ts +++ b/packages/chili-three/src/threeShape.ts @@ -13,6 +13,7 @@ import { VisualState, } from "chili-core"; import { + AlwaysDepth, BufferGeometry, DoubleSide, Float32BufferAttribute, @@ -40,6 +41,9 @@ const highlightFaceMaterial = new MeshStandardMaterial({ side: DoubleSide, transparent: true, opacity: 0.85, + depthFunc: AlwaysDepth, + polygonOffsetFactor: 0, + polygonOffsetUnits: 1.0, }); const selectedFaceMaterial = new MeshStandardMaterial({ @@ -47,6 +51,9 @@ const selectedFaceMaterial = new MeshStandardMaterial({ 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; diff --git a/packages/chili-three/src/threeView.ts b/packages/chili-three/src/threeView.ts index b62e4d4d..d71dc8a0 100644 --- a/packages/chili-three/src/threeView.ts +++ b/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; } diff --git a/packages/chili-three/src/threeVisual.ts b/packages/chili-three/src/threeVisual.ts index 85fe1f09..88fc801d 100644 --- a/packages/chili-three/src/threeVisual.ts +++ b/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;