wangdequan/linuxcncWebWASM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve GLB manager lighting for metallic models

Browse Source
This commit is contained in:
wangdequan
2026-09-20 14:35:34 +08:00
parent 1076bfa5e0
commit 6d04425121
11 changed files with 96 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/react/src/MachineManagerPanel.tsx
View File

@@ -3,6 +3,7 @@ import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
import { DraggableDialog } from "./DraggableDialog";
import { disposeMachineScene, type ImportedMachine } from "./imported-machine";
import { buildManagedMachine, cloneMachinePartScene, expectedParentRole, loadMachinePart, MACHINE_PART_ROLES, roleLabel, type MachinePartDraft, type MachinePartRole, type PhysicalZero } from "./machine-manager";
@@ -17,10 +18,15 @@ function ManagerPreview({ parts, selectedId, mode, onTransform }: { parts: Machi
const onTransformRef = useRef(onTransform); onTransformRef.current = onTransform;
useEffect(() => {
const element = host.current; if (!element) return;
const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(devicePixelRatio || 1, 2)); renderer.shadowMap.enabled = true; renderer.setSize(Math.max(element.clientWidth, 320), Math.max(element.clientHeight, 360), false); element.appendChild(renderer.domElement);
const scene = new THREE.Scene(); scene.background = new THREE.Color(0x10191d); scene.add(new THREE.HemisphereLight(0xffffff, 0x405057, 2));
const light = new THREE.DirectionalLight(0xffffff, 3); light.position.set(3, 5, 4); light.castShadow = true; scene.add(light);
const grid = new THREE.GridHelper(4, 40, 0x55777b, 0x294347); scene.add(grid);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio || 1, 2)); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.45; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; renderer.setSize(Math.max(element.clientWidth, 320), Math.max(element.clientHeight, 360), false); element.appendChild(renderer.domElement);
const scene = new THREE.Scene(); scene.background = new THREE.Color(0x263438);
const studio = new RoomEnvironment(); const pmrem = new THREE.PMREMGenerator(renderer); const environment = pmrem.fromScene(studio, .04); scene.environment = environment.texture; scene.environmentIntensity = 1.25; studio.dispose(); pmrem.dispose();
scene.add(new THREE.HemisphereLight(0xffffff, 0x728083, 2.6)); scene.add(new THREE.AmbientLight(0xffffff, .65));
const light = new THREE.DirectionalLight(0xfff5e5, 4.2); light.position.set(3, 5, 4); light.castShadow = true; scene.add(light);
const fill = new THREE.DirectionalLight(0xdcefff, 2.4); fill.position.set(-4, 2, 3); scene.add(fill);
const rim = new THREE.DirectionalLight(0xffffff, 1.8); rim.position.set(2, 4, -5); scene.add(rim);
const grid = new THREE.GridHelper(4, 40, 0x8eb0b2, 0x466266); scene.add(grid);
const camera = new THREE.PerspectiveCamera(42, 1, .005, 100); camera.position.set(2.4, 1.8, 2.8);
const orbit = new OrbitControls(camera, renderer.domElement); orbit.enableDamping = true;
const root = new THREE.Group(); root.name = "machine-manager-preview"; scene.add(root);
@@ -44,9 +50,9 @@ function ManagerPreview({ parts, selectedId, mode, onTransform }: { parts: Machi
const resize = () => { const width = Math.max(element.clientWidth, 1), height = Math.max(element.clientHeight, 1); camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height, false); };
const observer = new ResizeObserver(resize); observer.observe(element); resize(); let frame = 0;
const render = () => { orbit.update(); renderer.render(scene, camera); frame = requestAnimationFrame(render); }; render();
return () => { cancelAnimationFrame(frame); observer.disconnect(); transform.dispose(); orbit.dispose(); for (const object of disposable) disposeMachineScene(object); renderer.dispose(); renderer.domElement.remove(); };
return () => { cancelAnimationFrame(frame); observer.disconnect(); transform.dispose(); orbit.dispose(); for (const object of disposable) disposeMachineScene(object); environment.dispose(); renderer.dispose(); renderer.domElement.remove(); };
}, [parts, selectedId, mode]);
return <div ref={host} className="machine-manager-preview" data-machine-manager-preview data-machine-manager-part-count={parts.length} data-machine-manager-origin-count={parts.filter((part) => part.showOrigin).length} data-transform-mode={mode} aria-label="三维机床装配预览" />;
return <div ref={host} className="machine-manager-preview" data-machine-manager-preview data-machine-manager-lighting="studio-pmrem" data-machine-manager-exposure="1.45" data-machine-manager-part-count={parts.length} data-machine-manager-origin-count={parts.filter((part) => part.showOrigin).length} data-transform-mode={mode} aria-label="三维机床装配预览" />;
}
export function MachineManagerPanel({ coordinates, disabled, onApply }: Props) {

2
web/react/src/styles.css
View File

@@ -362,7 +362,7 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.machine-manager-toolbar { margin-bottom: 10px; }
.machine-manager-toolbar button[aria-pressed="true"] { background: #27585d; color: #fff; }
.machine-manager-layout { display: grid; grid-template-columns: minmax(380px, 1.35fr) minmax(330px, .9fr); gap: 12px; min-height: 430px; }
.machine-manager-preview { min-width: 0; min-height: 430px; border: 1px solid #52666a; background: #10191d; overflow: hidden; }
.machine-manager-preview { min-width: 0; min-height: 430px; border: 1px solid #52666a; background: #263438; overflow: hidden; }
.machine-manager-preview canvas { display: block; width: 100%; height: 100%; }
.machine-manager-editor { display: grid; grid-template-rows: minmax(120px, .7fr) minmax(260px, 1.3fr); min-height: 0; gap: 8px; }
.machine-part-list, .machine-part-editor, .machine-manager-calibration { border: 1px solid #9babad; background: #f6f9f8; padding: 8px; min-height: 0; overflow: auto; }