yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request 'cubes and lighting: refinements on coloring of cubes and lighting to fit with design' (#4617) from ui/3d-cubes-refinement into main

Browse Source 
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4617
This commit is contained in:
hsjobeki
2025-08-06 10:47:00 +00:00
parent e1062ed97c 65e7f9e6ca
commit dbef6ced77
2 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
pkgs/clan-app/ui/src/scene/MachineRepr.ts
View File

@@ -9,12 +9,12 @@ const BASE_SIZE = 0.9;
const CUBE_SIZE = BASE_SIZE / 1.5; const CUBE_SIZE = BASE_SIZE / 1.5;
const CUBE_HEIGHT = CUBE_SIZE; const CUBE_HEIGHT = CUBE_SIZE;
const BASE_HEIGHT = 0.05; const BASE_HEIGHT = 0.05;
const CUBE_COLOR = 0xd7e0e1; const CUBE_COLOR = 0xe2eff0;
const CUBE_EMISSIVE = 0x303030; const CUBE_EMISSIVE = 0x303030;
const CUBE_SELECTED_COLOR = 0x4b6767; const CUBE_SELECTED_COLOR = 0x4b6767;
const BASE_COLOR = 0xecfdff; const BASE_COLOR = 0xdbeaeb;
const BASE_EMISSIVE = 0x0c0c0c; const BASE_EMISSIVE = 0x0c0c0c;
const BASE_SELECTED_COLOR = 0x69b0e3; const BASE_SELECTED_COLOR = 0x69b0e3;
const BASE_SELECTED_EMISSIVE = 0x666666; // Emissive color for selected bases const BASE_SELECTED_EMISSIVE = 0x666666; // Emissive color for selected bases
@@ -50,7 +50,7 @@ export class MachineRepr {
this.cubeMesh.receiveShadow = true; this.cubeMesh.receiveShadow = true;
this.cubeMesh.userData = { id }; this.cubeMesh.userData = { id };
this.cubeMesh.name = "cube"; this.cubeMesh.name = "cube";
this.cubeMesh.position.set(0, CUBE_HEIGHT / 2, 0); this.cubeMesh.position.set(0, CUBE_HEIGHT / 2 + BASE_HEIGHT, 0);
this.baseMesh = this.createCubeBase( this.baseMesh = this.createCubeBase(
BASE_COLOR, BASE_COLOR,
@@ -62,9 +62,27 @@ export class MachineRepr {
const label = this.createLabel(id); const label = this.createLabel(id);
this.cubeMesh.add(label); this.cubeMesh.add(label);
const shadowPlaneMaterial = new THREE.MeshStandardMaterial({
color: BASE_COLOR, // any color you like
roughness: 1,
metalness: 0,
transparent: true,
opacity: 0.4,
});
const shadowPlane = new THREE.Mesh(
new THREE.PlaneGeometry(BASE_SIZE, BASE_SIZE),
shadowPlaneMaterial,
);
shadowPlane.receiveShadow = true;
shadowPlane.rotation.x = -Math.PI / 2;
shadowPlane.position.set(0, BASE_HEIGHT + 0.0001, 0);
this.group = new THREE.Group(); this.group = new THREE.Group();
this.group.add(this.cubeMesh); this.group.add(this.cubeMesh);
this.group.add(this.baseMesh); this.group.add(this.baseMesh);
this.group.add(shadowPlane);
this.group.position.set(position.x, 0, position.y); this.group.position.set(position.x, 0, position.y);
this.group.userData.id = id; this.group.userData.id = id;
@@ -116,7 +134,7 @@ export class MachineRepr {
}); });
const base = new THREE.Mesh(geometry, baseMaterial); const base = new THREE.Mesh(geometry, baseMaterial);
base.position.set(0, BASE_HEIGHT / 2, 0); base.position.set(0, BASE_HEIGHT / 2, 0);
base.receiveShadow = true; base.receiveShadow = false;
return base; return base;
} }

4
pkgs/clan-app/ui/src/scene/cubes.tsx
View File

@@ -237,10 +237,10 @@ export function CubeScene(props: {
); );
// Lighting // Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 1); const ambientLight = new THREE.AmbientLight(0xd9f2f7, 0.72);
scene.add(ambientLight); scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 2); const directionalLight = new THREE.DirectionalLight(0xffffff, 3.5);
// scene.add(new THREE.DirectionalLightHelper(directionalLight)); // scene.add(new THREE.DirectionalLightHelper(directionalLight));
// scene.add(new THREE.CameraHelper(camera)); // scene.add(new THREE.CameraHelper(camera));