Pascal
@@ -1,91 +0,0 @@
|
||||
# Pascal Editor — Architecture
|
||||
|
||||
## Project Structure
|
||||
|
||||
Monorepo managed with Turborepo. Packages are shared libraries; apps are deployable applications.
|
||||
|
||||
```
|
||||
apps/
|
||||
editor/ # Main Next.js app (editor + public routes)
|
||||
packages/
|
||||
core/ # Scene schema, state, systems, spatial logic
|
||||
viewer/ # 3D canvas component (React Three Fiber)
|
||||
ui/ # Shared React UI components
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## packages/core
|
||||
|
||||
Central library — no UI, no rendering. Everything else depends on it.
|
||||
|
||||
- **schema/** — TypeScript types for all node types (`Wall`, `Slab`, `Door`, `Item`, etc.)
|
||||
- **store/** — Zustand scene store (`useScene`) with undo/redo via Zundo
|
||||
- **systems/** — Per-element business logic: geometry generation, constraints (`WallSystem`, `SlabSystem`, `DoorSystem`, …)
|
||||
- **events/** — Typed event bus for node changes
|
||||
- **hooks/** — `useRegistry` (node ID → THREE.Object3D), `useSpatialGrid` (2D spatial index)
|
||||
- **lib/** — Space detection, asset storage, polygon utilities
|
||||
|
||||
Node storage is a flat dictionary (`nodes: Record<id, AnyNode>`). Systems are pure logic that runs in the render loop; they read nodes and write back derived geometry.
|
||||
|
||||
---
|
||||
|
||||
## packages/viewer
|
||||
|
||||
3D canvas component — presentation only, no editor concerns.
|
||||
|
||||
- **components/viewer/** — Root `<Viewer>` canvas, camera, lights, post-processing, selection manager
|
||||
- **components/renderers/** — One renderer per node type (`WallRenderer`, `SlabRenderer`, …), dispatched by `NodeRenderer` → `SceneRenderer`
|
||||
- **systems/** — Viewer-specific systems: `LevelSystem` (stacked/exploded/solo), `WallCutout`, `ZoneSystem`, `InteractiveSystem`
|
||||
- **store/** — `useViewer`: selection path, camera mode, level mode, wall mode, theme, display toggles
|
||||
|
||||
The viewer accepts external props and callbacks (`onSelect`, `onExport`, children) to expose control points. It must not import anything from `apps/editor`.
|
||||
|
||||
---
|
||||
|
||||
## apps/editor
|
||||
|
||||
Next.js 16 app. Composes `@pascal-app/viewer` and `@pascal-app/core` into a full editing experience.
|
||||
|
||||
- **app/editor/[projectId]/** — Main editor route
|
||||
- **app/viewer/[id]/** — Read-only preview route
|
||||
- **store/use-editor.tsx** — `useEditor`: phase (`site | structure | furnish`), mode (`select | edit | delete | build`), active tool
|
||||
- **components/tools/** — One component per tool, coordinated by `ToolManager`
|
||||
- **components/systems/** — Editor-side systems that integrate with viewer (e.g. space detection for cutaway)
|
||||
- **components/editor/** — Camera controls, export, menus, panels
|
||||
|
||||
---
|
||||
|
||||
## Data Flow
|
||||
|
||||
```
|
||||
User input (pointer/keyboard)
|
||||
→ Tool component (apps/editor/components/tools/)
|
||||
→ useScene mutations
|
||||
→ Core systems recompute geometry
|
||||
→ Renderers re-render THREE meshes
|
||||
→ useViewer updates selection/hover
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Key Conventions
|
||||
|
||||
- **Flat nodes** — All scene nodes live in a single flat record; hierarchy is expressed via `parentId`.
|
||||
- **System/renderer split** — Systems own logic; renderers own geometry and material. Never mix.
|
||||
- **Viewer isolation** — `@pascal-app/viewer` must never import from `apps/editor`. Editor-specific behaviour (tools, systems, selection) is injected as children or props.
|
||||
- **Registry pattern** — `useRegistry()` maps node IDs to live THREE objects without tree traversal.
|
||||
- **Spatial grid** — 2D grid for fast wall/zone neighbourhood queries; avoid brute-force iteration.
|
||||
- **Node creation** — Always use `NodeType.parse({…})` then `createNode(node, parentId)`. Never construct raw node objects.
|
||||
|
||||
---
|
||||
|
||||
## Tech Stack
|
||||
|
||||
| Layer | Technology |
|
||||
|---|---|
|
||||
| 3D | Three.js (WebGPU), React Three Fiber |
|
||||
| Framework | Next.js 16, React 19 |
|
||||
| State | Zustand + Zundo |
|
||||
| UI | Radix UI, Tailwind CSS 4 |
|
||||
| Tooling | Biome, TypeScript 5.9, Turborepo |
|
||||
@@ -4,9 +4,6 @@
|
||||
"workspaces": {
|
||||
"": {
|
||||
"name": "editor",
|
||||
"dependencies": {
|
||||
"portless": "^0.4.2",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^2.4.6",
|
||||
"dotenv-cli": "^11.0.0",
|
||||
@@ -51,7 +48,7 @@
|
||||
},
|
||||
"packages/core": {
|
||||
"name": "@pascal-app/core",
|
||||
"version": "0.3.0",
|
||||
"version": "0.3.1",
|
||||
"dependencies": {
|
||||
"dedent": "^1.7.1",
|
||||
"idb-keyval": "^6.2.2",
|
||||
@@ -73,7 +70,7 @@
|
||||
"@react-three/drei": "^10",
|
||||
"@react-three/fiber": "^9",
|
||||
"react": "^18 || ^19",
|
||||
"three": "^0.183",
|
||||
"three": "^0.182",
|
||||
},
|
||||
},
|
||||
"packages/editor": {
|
||||
@@ -169,7 +166,7 @@
|
||||
},
|
||||
"packages/viewer": {
|
||||
"name": "@pascal-app/viewer",
|
||||
"version": "0.3.0",
|
||||
"version": "0.3.1",
|
||||
"dependencies": {
|
||||
"polygon-clipping": "^0.15.7",
|
||||
"zustand": "^5",
|
||||
@@ -727,7 +724,7 @@
|
||||
|
||||
"caniuse-lite": ["caniuse-lite@1.0.30001781", "", {}, "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw=="],
|
||||
|
||||
"chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
|
||||
"chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
|
||||
|
||||
"citty": ["citty@0.2.1", "", {}, "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg=="],
|
||||
|
||||
@@ -1173,8 +1170,6 @@
|
||||
|
||||
"polygon-clipping": ["polygon-clipping@0.15.7", "", { "dependencies": { "robust-predicates": "^3.0.2", "splaytree": "^3.1.0" } }, "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA=="],
|
||||
|
||||
"portless": ["portless@0.4.2", "", { "dependencies": { "chalk": "^5.3.0" }, "os": [ "linux", "darwin", ], "bin": { "portless": "dist/cli.js" } }, "sha512-/G3jIeD1XokoO9KY/lUGTV9irKz3tgx8yqHkz+hvj/86QeR219GvYFB+QEfpvjRlvvLVJa5vE7BkRfBZBe/lQg=="],
|
||||
|
||||
"possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
|
||||
|
||||
"postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
|
||||
@@ -1473,20 +1468,22 @@
|
||||
|
||||
"editor/@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],
|
||||
|
||||
"eslint/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
|
||||
|
||||
"eslint-plugin-turbo/dotenv": ["dotenv@16.0.3", "", {}, "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="],
|
||||
|
||||
"fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
|
||||
|
||||
"glob/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],
|
||||
|
||||
"log-symbols/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
|
||||
|
||||
"log-symbols/is-unicode-supported": ["is-unicode-supported@1.3.0", "", {}, "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ=="],
|
||||
|
||||
"micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
|
||||
|
||||
"next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
|
||||
|
||||
"ora/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
|
||||
|
||||
"postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
|
||||
|
||||
"react-scan/@types/node": ["@types/node@20.19.37", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw=="],
|
||||
|
||||
@@ -18,9 +18,6 @@
|
||||
"release:minor": "gh workflow run release.yml -f package=both -f bump=minor",
|
||||
"release:major": "gh workflow run release.yml -f package=both -f bump=major"
|
||||
},
|
||||
"dependencies": {
|
||||
"portless": "^0.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^2.4.6",
|
||||
"dotenv-cli": "^11.0.0",
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
"@react-three/drei": "^10",
|
||||
"@react-three/fiber": "^9",
|
||||
"react": "^18 || ^19",
|
||||
"three": "^0.183"
|
||||
"three": "^0.182"
|
||||
},
|
||||
"dependencies": {
|
||||
"dedent": "^1.7.1",
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
// Base
|
||||
export { BaseNode, generateId, Material, nodeType, objectId } from './base'
|
||||
export { BaseNode, generateId, nodeType, objectId } from './base'
|
||||
// Camera
|
||||
export { CameraSchema } from './camera'
|
||||
// Collections
|
||||
export { type Collection, type CollectionId, generateCollectionId } from './collections'
|
||||
// Material
|
||||
export {
|
||||
DEFAULT_MATERIALS,
|
||||
MaterialPreset,
|
||||
MaterialProperties,
|
||||
MaterialSchema,
|
||||
resolveMaterial,
|
||||
} from './material'
|
||||
export { BuildingNode } from './nodes/building'
|
||||
export { CeilingNode } from './nodes/ceiling'
|
||||
export { DoorNode, DoorSegment } from './nodes/door'
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import { z } from 'zod'
|
||||
|
||||
export const MaterialPreset = z.enum([
|
||||
'white',
|
||||
'brick',
|
||||
'concrete',
|
||||
'wood',
|
||||
'glass',
|
||||
'metal',
|
||||
'plaster',
|
||||
'tile',
|
||||
'marble',
|
||||
'custom',
|
||||
])
|
||||
export type MaterialPreset = z.infer<typeof MaterialPreset>
|
||||
|
||||
export const MaterialProperties = z.object({
|
||||
color: z.string().default('#ffffff'),
|
||||
roughness: z.number().min(0).max(1).default(0.5),
|
||||
metalness: z.number().min(0).max(1).default(0),
|
||||
opacity: z.number().min(0).max(1).default(1),
|
||||
transparent: z.boolean().default(false),
|
||||
side: z.enum(['front', 'back', 'double']).default('front'),
|
||||
})
|
||||
export type MaterialProperties = z.infer<typeof MaterialProperties>
|
||||
|
||||
export const MaterialSchema = z.object({
|
||||
preset: MaterialPreset.optional(),
|
||||
properties: MaterialProperties.optional(),
|
||||
texture: z
|
||||
.object({
|
||||
url: z.string(),
|
||||
repeat: z.tuple([z.number(), z.number()]).optional(),
|
||||
scale: z.number().optional(),
|
||||
})
|
||||
.optional(),
|
||||
})
|
||||
export type MaterialSchema = z.infer<typeof MaterialSchema>
|
||||
|
||||
export const DEFAULT_MATERIALS: Record<MaterialPreset, MaterialProperties> = {
|
||||
white: {
|
||||
color: '#ffffff',
|
||||
roughness: 0.9,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
brick: {
|
||||
color: '#8b4513',
|
||||
roughness: 0.85,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
concrete: {
|
||||
color: '#808080',
|
||||
roughness: 0.8,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
wood: {
|
||||
color: '#deb887',
|
||||
roughness: 0.7,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
glass: {
|
||||
color: '#87ceeb',
|
||||
roughness: 0.1,
|
||||
metalness: 0.1,
|
||||
opacity: 0.3,
|
||||
transparent: true,
|
||||
side: 'double',
|
||||
},
|
||||
metal: {
|
||||
color: '#c0c0c0',
|
||||
roughness: 0.3,
|
||||
metalness: 0.9,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
plaster: {
|
||||
color: '#f5f5dc',
|
||||
roughness: 0.95,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
tile: {
|
||||
color: '#d3d3d3',
|
||||
roughness: 0.4,
|
||||
metalness: 0.1,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
marble: {
|
||||
color: '#fafafa',
|
||||
roughness: 0.2,
|
||||
metalness: 0.1,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
custom: {
|
||||
color: '#ffffff',
|
||||
roughness: 0.5,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
}
|
||||
|
||||
export function resolveMaterial(material?: MaterialSchema): MaterialProperties {
|
||||
if (!material) {
|
||||
return DEFAULT_MATERIALS.white
|
||||
}
|
||||
|
||||
if (material.preset && material.preset !== 'custom') {
|
||||
const presetProps = DEFAULT_MATERIALS[material.preset]
|
||||
return {
|
||||
...presetProps,
|
||||
...material.properties,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...DEFAULT_MATERIALS.custom,
|
||||
...material.properties,
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
import dedent from 'dedent'
|
||||
import { z } from 'zod'
|
||||
import { BaseNode, nodeType, objectId } from '../base'
|
||||
import { MaterialSchema } from '../material'
|
||||
import { ItemNode } from './item'
|
||||
|
||||
export const CeilingNode = BaseNode.extend({
|
||||
id: objectId('ceiling'),
|
||||
type: nodeType('ceiling'),
|
||||
children: z.array(ItemNode.shape.id).default([]),
|
||||
// Specific props
|
||||
// Polygon boundary - array of [x, z] coordinates defining the ceiling
|
||||
material: MaterialSchema.optional(),
|
||||
polygon: z.array(z.tuple([z.number(), z.number()])),
|
||||
holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
|
||||
height: z.number().default(2.5), // Height in meters
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import dedent from 'dedent'
|
||||
import { z } from 'zod'
|
||||
import { BaseNode, nodeType, objectId } from '../base'
|
||||
import { MaterialSchema } from '../material'
|
||||
|
||||
export const DoorSegment = z.object({
|
||||
type: z.enum(['panel', 'glass', 'empty']),
|
||||
@@ -20,6 +21,7 @@ export type DoorSegment = z.infer<typeof DoorSegment>
|
||||
export const DoorNode = BaseNode.extend({
|
||||
id: objectId('door'),
|
||||
type: nodeType('door'),
|
||||
material: MaterialSchema.optional(),
|
||||
|
||||
position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
|
||||
rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import dedent from 'dedent'
|
||||
import { z } from 'zod'
|
||||
import { BaseNode, nodeType, objectId } from '../base'
|
||||
import { MaterialSchema } from '../material'
|
||||
|
||||
export const RoofType = z.enum(['hip', 'gable', 'shed', 'gambrel', 'dutch', 'mansard', 'flat'])
|
||||
|
||||
@@ -9,7 +10,7 @@ export type RoofType = z.infer<typeof RoofType>
|
||||
export const RoofSegmentNode = BaseNode.extend({
|
||||
id: objectId('rseg'),
|
||||
type: nodeType('roof-segment'),
|
||||
// Position relative to parent roof group
|
||||
material: MaterialSchema.optional(),
|
||||
position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
|
||||
// Rotation around Y axis in radians
|
||||
rotation: z.number().default(0),
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import dedent from 'dedent'
|
||||
import { z } from 'zod'
|
||||
import { BaseNode, nodeType, objectId } from '../base'
|
||||
import { MaterialSchema } from '../material'
|
||||
import { RoofSegmentNode } from './roof-segment'
|
||||
|
||||
export const RoofNode = BaseNode.extend({
|
||||
id: objectId('roof'),
|
||||
type: nodeType('roof'),
|
||||
// Position of the roof group center
|
||||
material: MaterialSchema.optional(),
|
||||
position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
|
||||
// Rotation around Y axis in radians
|
||||
rotation: z.number().default(0),
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import dedent from 'dedent'
|
||||
import { z } from 'zod'
|
||||
import { BaseNode, nodeType, objectId } from '../base'
|
||||
import { MaterialSchema } from '../material'
|
||||
|
||||
export const SlabNode = BaseNode.extend({
|
||||
id: objectId('slab'),
|
||||
type: nodeType('slab'),
|
||||
// Specific props
|
||||
// Polygon boundary - array of [x, z] coordinates defining the slab
|
||||
material: MaterialSchema.optional(),
|
||||
polygon: z.array(z.tuple([z.number(), z.number()])),
|
||||
holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
|
||||
elevation: z.number().default(0.05), // Elevation in meters
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import dedent from 'dedent'
|
||||
import { z } from 'zod'
|
||||
import { BaseNode, nodeType, objectId } from '../base'
|
||||
import { MaterialSchema } from '../material'
|
||||
import { ItemNode } from './item'
|
||||
// import { DoorNode } from "./door";
|
||||
// import { ItemNode } from "./item";
|
||||
@@ -10,7 +11,7 @@ export const WallNode = BaseNode.extend({
|
||||
id: objectId('wall'),
|
||||
type: nodeType('wall'),
|
||||
children: z.array(ItemNode.shape.id).default([]),
|
||||
// Specific props
|
||||
material: MaterialSchema.optional(),
|
||||
thickness: z.number().optional(),
|
||||
height: z.number().optional(),
|
||||
// e.g., start/end points for path
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import dedent from 'dedent'
|
||||
import { z } from 'zod'
|
||||
import { BaseNode, nodeType, objectId } from '../base'
|
||||
import { MaterialSchema } from '../material'
|
||||
|
||||
export const WindowNode = BaseNode.extend({
|
||||
id: objectId('window'),
|
||||
type: nodeType('window'),
|
||||
material: MaterialSchema.optional(),
|
||||
|
||||
// Position in wall-local coordinate system (center of window)
|
||||
position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
|
||||
rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
|
||||
side: z.enum(['front', 'back']).optional(),
|
||||
|
||||
@@ -104,11 +104,17 @@ export const updateNodesAction = (
|
||||
})
|
||||
|
||||
// Collect all IDs that need to be marked dirty
|
||||
updates.forEach((u) => idsToMarkDirty.add(u.id))
|
||||
parentsToUpdate.forEach((pId) => idsToMarkDirty.add(pId))
|
||||
for (const u of updates) {
|
||||
idsToMarkDirty.add(u.id)
|
||||
}
|
||||
for (const pId of parentsToUpdate) {
|
||||
idsToMarkDirty.add(pId)
|
||||
}
|
||||
|
||||
// Add to pending updates set
|
||||
idsToMarkDirty.forEach((id) => pendingUpdates.add(id))
|
||||
for (const id of idsToMarkDirty) {
|
||||
pendingUpdates.add(id)
|
||||
}
|
||||
|
||||
// Cancel any pending RAF and schedule a new one
|
||||
if (pendingRafId !== null) {
|
||||
|
||||
@@ -52,9 +52,7 @@ export function cloneSceneGraph(sceneGraph: SceneGraph): SceneGraph {
|
||||
|
||||
// Remap children array (walls, levels, buildings, sites, items can have children)
|
||||
if ('children' in clonedNode && Array.isArray(clonedNode.children)) {
|
||||
;(clonedNode as Record<string, unknown>).children = (
|
||||
clonedNode.children as string[]
|
||||
)
|
||||
;(clonedNode as Record<string, unknown>).children = (clonedNode.children as string[])
|
||||
.map((childId) => idMap.get(childId))
|
||||
.filter((id): id is string => id !== undefined)
|
||||
}
|
||||
|
||||
@@ -4,8 +4,8 @@ import { useViewer } from '@pascal-app/viewer'
|
||||
import { useThree } from '@react-three/fiber'
|
||||
import { useEffect } from 'react'
|
||||
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
|
||||
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
|
||||
import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
|
||||
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
|
||||
|
||||
export function ExportManager() {
|
||||
const scene = useThree((state) => state.scene)
|
||||
|
||||
@@ -6,7 +6,12 @@ import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
|
||||
import { EDITOR_LAYER } from '../../../lib/constants'
|
||||
import { sfxEmitter } from '../../../lib/sfx-bus'
|
||||
import { CursorSphere } from '../shared/cursor-sphere'
|
||||
import { createWallOnCurrentLevel, snapWallDraftPoint, WALL_MIN_LENGTH, type WallPlanPoint } from './wall-drafting'
|
||||
import {
|
||||
createWallOnCurrentLevel,
|
||||
snapWallDraftPoint,
|
||||
WALL_MIN_LENGTH,
|
||||
type WallPlanPoint,
|
||||
} from './wall-drafting'
|
||||
|
||||
const WALL_HEIGHT = 2.5
|
||||
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
'use client'
|
||||
|
||||
import { DEFAULT_MATERIALS, type MaterialPreset, type MaterialSchema } from '@pascal-app/core'
|
||||
import { useState } from 'react'
|
||||
|
||||
const PRESET_COLORS: Record<MaterialPreset, string> = {
|
||||
white: '#ffffff',
|
||||
brick: '#8b4513',
|
||||
concrete: '#808080',
|
||||
wood: '#deb887',
|
||||
glass: '#87ceeb',
|
||||
metal: '#c0c0c0',
|
||||
plaster: '#f5f5dc',
|
||||
tile: '#d3d3d3',
|
||||
marble: '#fafafa',
|
||||
custom: '#ffffff',
|
||||
}
|
||||
|
||||
const PRESET_LABELS: Record<MaterialPreset, string> = {
|
||||
white: 'White',
|
||||
brick: 'Brick',
|
||||
concrete: 'Concrete',
|
||||
wood: 'Wood',
|
||||
glass: 'Glass',
|
||||
metal: 'Metal',
|
||||
plaster: 'Plaster',
|
||||
tile: 'Tile',
|
||||
marble: 'Marble',
|
||||
custom: 'Custom',
|
||||
}
|
||||
|
||||
type MaterialPickerProps = {
|
||||
value?: MaterialSchema
|
||||
onChange: (material: MaterialSchema) => void
|
||||
}
|
||||
|
||||
export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
|
||||
const [showCustom, setShowCustom] = useState<boolean>(value?.preset === 'custom' || !!value?.properties)
|
||||
|
||||
const currentPreset = value?.preset || 'white'
|
||||
const currentProps = value?.properties || DEFAULT_MATERIALS[currentPreset]
|
||||
|
||||
const handlePresetChange = (preset: MaterialPreset) => {
|
||||
if (preset === 'custom') {
|
||||
setShowCustom(true)
|
||||
onChange({
|
||||
preset: 'custom',
|
||||
properties: {
|
||||
color: value?.properties?.color || '#ffffff',
|
||||
roughness: value?.properties?.roughness ?? 0.5,
|
||||
metalness: value?.properties?.metalness ?? 0,
|
||||
opacity: value?.properties?.opacity ?? 1,
|
||||
transparent: value?.properties?.transparent ?? false,
|
||||
side: value?.properties?.side ?? 'front',
|
||||
},
|
||||
})
|
||||
} else {
|
||||
setShowCustom(false)
|
||||
onChange({ preset })
|
||||
}
|
||||
}
|
||||
|
||||
const handlePropertyChange = (prop: keyof typeof currentProps, val: typeof currentProps[keyof typeof currentProps]) => {
|
||||
onChange({
|
||||
preset: showCustom ? 'custom' : currentPreset,
|
||||
properties: {
|
||||
...currentProps,
|
||||
[prop]: val,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-5 gap-1.5">
|
||||
{(Object.keys(PRESET_COLORS) as MaterialPreset[]).map((preset) => (
|
||||
<button
|
||||
className={`h-8 w-8 rounded border-2 transition-all ${
|
||||
currentPreset === preset
|
||||
? 'border-blue-500 ring-2 ring-blue-500/30'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
}`}
|
||||
key={preset}
|
||||
onClick={() => handlePresetChange(preset)}
|
||||
style={{
|
||||
backgroundColor: PRESET_COLORS[preset],
|
||||
backgroundImage: preset === 'glass' ? 'linear-gradient(135deg, rgba(255,255,255,0.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent)' : undefined,
|
||||
backgroundSize: preset === 'glass' ? '8px 8px' : undefined,
|
||||
}}
|
||||
title={PRESET_LABELS[preset]}
|
||||
type="button"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{showCustom && (
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-gray-500 w-16">Color</label>
|
||||
<input
|
||||
className="h-7 w-12 rounded border border-gray-300 cursor-pointer"
|
||||
onChange={(e) => handlePropertyChange('color', e.target.value)}
|
||||
type="color"
|
||||
value={currentProps.color}
|
||||
/>
|
||||
<input
|
||||
className="flex-1 h-7 px-2 text-xs border border-gray-300 rounded"
|
||||
onChange={(e) => handlePropertyChange('color', e.target.value)}
|
||||
type="text"
|
||||
value={currentProps.color}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-gray-500 w-16">Roughness</label>
|
||||
<input
|
||||
className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) => handlePropertyChange('roughness', parseFloat(e.target.value))}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.roughness}
|
||||
/>
|
||||
<span className="text-xs text-gray-400 w-8 text-right">{currentProps.roughness.toFixed(2)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-gray-500 w-16">Metalness</label>
|
||||
<input
|
||||
className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) => handlePropertyChange('metalness', parseFloat(e.target.value))}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.metalness}
|
||||
/>
|
||||
<span className="text-xs text-gray-400 w-8 text-right">{currentProps.metalness.toFixed(2)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-gray-500 w-16">Opacity</label>
|
||||
<input
|
||||
className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) => {
|
||||
const opacity = parseFloat(e.target.value)
|
||||
handlePropertyChange('opacity', opacity)
|
||||
if (opacity < 1 && !currentProps.transparent) {
|
||||
handlePropertyChange('transparent', true)
|
||||
}
|
||||
}}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.opacity}
|
||||
/>
|
||||
<span className="text-xs text-gray-400 w-8 text-right">{currentProps.opacity.toFixed(2)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-gray-500 w-16">Side</label>
|
||||
<select
|
||||
className="flex-1 h-7 px-2 text-xs border border-gray-300 rounded"
|
||||
onChange={(e) => handlePropertyChange('side', e.target.value as 'front' | 'back' | 'double')}
|
||||
value={currentProps.side}
|
||||
>
|
||||
<option value="front">Front</option>
|
||||
<option value="back">Back</option>
|
||||
<option value="double">Double</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { type AnyNode, type CeilingNode, useScene } from '@pascal-app/core'
|
||||
import { type AnyNode, type CeilingNode, type MaterialSchema, useScene } from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { Edit, Plus, Trash2 } from 'lucide-react'
|
||||
import { useCallback, useEffect } from 'react'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { ActionButton } from '../controls/action-button'
|
||||
import { MaterialPicker } from '../controls/material-picker'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { SliderControl } from '../controls/slider-control'
|
||||
import { PanelWrapper } from './panel-wrapper'
|
||||
@@ -94,6 +95,10 @@ export function CeilingPanel() {
|
||||
[selectedId, node?.holes, handleUpdate, editingHole, setEditingHole],
|
||||
)
|
||||
|
||||
const handleMaterialChange = useCallback((material: MaterialSchema) => {
|
||||
handleUpdate({ material })
|
||||
}, [handleUpdate])
|
||||
|
||||
if (!node || node.type !== 'ceiling' || selectedIds.length !== 1) return null
|
||||
|
||||
const calculateArea = (polygon: Array<[number, number]>): number => {
|
||||
@@ -217,6 +222,13 @@ export function CeilingPanel() {
|
||||
/>
|
||||
</div>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Material">
|
||||
<MaterialPicker
|
||||
onChange={handleMaterialChange}
|
||||
value={node.material}
|
||||
/>
|
||||
</PanelSection>
|
||||
</PanelWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { type AnyNode, type AnyNodeId, DoorNode, emitter, useScene } from '@pascal-app/core'
|
||||
import { type AnyNode, type AnyNodeId, type MaterialSchema, DoorNode, emitter, useScene } from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
|
||||
import { useCallback } from 'react'
|
||||
@@ -8,6 +8,7 @@ import { usePresetsAdapter } from '../../../contexts/presets-context'
|
||||
import { sfxEmitter } from '../../../lib/sfx-bus'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { ActionButton, ActionGroup } from '../controls/action-button'
|
||||
import { MaterialPicker } from '../controls/material-picker'
|
||||
import { MetricControl } from '../controls/metric-control'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { SegmentedControl } from '../controls/segmented-control'
|
||||
@@ -562,6 +563,13 @@ export function DoorPanel() {
|
||||
</div>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Material">
|
||||
<MaterialPicker
|
||||
onChange={(material) => handleUpdate({ material })}
|
||||
value={node.material}
|
||||
/>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Actions">
|
||||
<ActionGroup>
|
||||
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import {
|
||||
type AnyNode,
|
||||
type AnyNodeId,
|
||||
type MaterialSchema,
|
||||
type RoofNode,
|
||||
RoofNode as RoofNodeSchema,
|
||||
type RoofSegmentNode,
|
||||
@@ -15,6 +16,7 @@ import { useCallback } from 'react'
|
||||
import { sfxEmitter } from '../../../lib/sfx-bus'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { ActionButton, ActionGroup } from '../controls/action-button'
|
||||
import { MaterialPicker } from '../controls/material-picker'
|
||||
import { MetricControl } from '../controls/metric-control'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { SliderControl } from '../controls/slider-control'
|
||||
@@ -122,6 +124,10 @@ export function RoofPanel() {
|
||||
setSelection({ selectedIds: [] })
|
||||
}, [selectedId, node, setSelection])
|
||||
|
||||
const handleMaterialChange = useCallback((material: MaterialSchema) => {
|
||||
handleUpdate({ material })
|
||||
}, [handleUpdate])
|
||||
|
||||
if (!node || node.type !== 'roof' || selectedIds.length !== 1) return null
|
||||
|
||||
const segments = (node.children ?? [])
|
||||
@@ -229,6 +235,13 @@ export function RoofPanel() {
|
||||
</div>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Material">
|
||||
<MaterialPicker
|
||||
onChange={handleMaterialChange}
|
||||
value={node.material}
|
||||
/>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Actions">
|
||||
<ActionGroup>
|
||||
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import {
|
||||
type AnyNode,
|
||||
type AnyNodeId,
|
||||
type MaterialSchema,
|
||||
type RoofSegmentNode,
|
||||
RoofSegmentNode as RoofSegmentNodeSchema,
|
||||
type RoofType,
|
||||
@@ -14,6 +15,7 @@ import { useCallback } from 'react'
|
||||
import { sfxEmitter } from '../../../lib/sfx-bus'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { ActionButton, ActionGroup } from '../controls/action-button'
|
||||
import { MaterialPicker } from '../controls/material-picker'
|
||||
import { MetricControl } from '../controls/metric-control'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { SegmentedControl } from '../controls/segmented-control'
|
||||
@@ -108,6 +110,10 @@ export function RoofSegmentPanel() {
|
||||
}
|
||||
}, [selectedId, node, setSelection])
|
||||
|
||||
const handleMaterialChange = useCallback((material: MaterialSchema) => {
|
||||
handleUpdate({ material })
|
||||
}, [handleUpdate])
|
||||
|
||||
if (!node || node.type !== 'roof-segment' || selectedIds.length !== 1) return null
|
||||
|
||||
return (
|
||||
@@ -293,6 +299,13 @@ export function RoofSegmentPanel() {
|
||||
</div>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Material">
|
||||
<MaterialPicker
|
||||
onChange={handleMaterialChange}
|
||||
value={node.material}
|
||||
/>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Actions">
|
||||
<ActionGroup>
|
||||
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { type AnyNode, type SlabNode, useScene } from '@pascal-app/core'
|
||||
import { type AnyNode, type MaterialSchema, type SlabNode, useScene } from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { Edit, Plus, Trash2 } from 'lucide-react'
|
||||
import { useCallback, useEffect } from 'react'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { ActionButton, ActionGroup } from '../controls/action-button'
|
||||
import { MaterialPicker } from '../controls/material-picker'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { SliderControl } from '../controls/slider-control'
|
||||
import { PanelWrapper } from './panel-wrapper'
|
||||
@@ -29,6 +30,10 @@ export function SlabPanel() {
|
||||
[selectedId, updateNode],
|
||||
)
|
||||
|
||||
const handleMaterialChange = useCallback((material: MaterialSchema) => {
|
||||
handleUpdate({ material })
|
||||
}, [handleUpdate])
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setSelection({ selectedIds: [] })
|
||||
setEditingHole(null)
|
||||
@@ -216,6 +221,13 @@ export function SlabPanel() {
|
||||
/>
|
||||
</div>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Material">
|
||||
<MaterialPicker
|
||||
onChange={handleMaterialChange}
|
||||
value={node.material}
|
||||
/>
|
||||
</PanelSection>
|
||||
</PanelWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import { type AnyNode, type AnyNodeId, useScene, type WallNode } from '@pascal-app/core'
|
||||
import { type AnyNode, type AnyNodeId, type MaterialSchema, useScene, type WallNode } from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { useCallback } from 'react'
|
||||
import { MaterialPicker } from '../controls/material-picker'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { SliderControl } from '../controls/slider-control'
|
||||
import { PanelWrapper } from './panel-wrapper'
|
||||
@@ -25,7 +26,6 @@ export function WallPanel() {
|
||||
[selectedId, updateNode],
|
||||
)
|
||||
|
||||
// Função mágica para a Issue #191: Atualiza o comprimento via cálculo vetorial
|
||||
const handleUpdateLength = useCallback((newLength: number) => {
|
||||
if (!node || newLength <= 0) return
|
||||
|
||||
@@ -35,11 +35,9 @@ export function WallPanel() {
|
||||
|
||||
if (currentLength === 0) return
|
||||
|
||||
// Calcula a direção (vetor unitário)
|
||||
const dirX = dx / currentLength
|
||||
const dirZ = dz / currentLength
|
||||
|
||||
// Define o novo ponto final baseado no novo comprimento
|
||||
const newEnd: [number, number] = [
|
||||
node.start[0] + dirX * newLength,
|
||||
node.start[1] + dirZ * newLength
|
||||
@@ -48,6 +46,10 @@ export function WallPanel() {
|
||||
handleUpdate({ end: newEnd })
|
||||
}, [node, handleUpdate])
|
||||
|
||||
const handleMaterialChange = useCallback((material: MaterialSchema) => {
|
||||
handleUpdate({ material })
|
||||
}, [handleUpdate])
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setSelection({ selectedIds: [] })
|
||||
}, [setSelection])
|
||||
@@ -69,7 +71,6 @@ export function WallPanel() {
|
||||
width={280}
|
||||
>
|
||||
<PanelSection title="Dimensions">
|
||||
{/* Adicionando o controle de Length solicitado na Issue #191 */}
|
||||
<SliderControl
|
||||
label="Length"
|
||||
max={20}
|
||||
@@ -101,6 +102,13 @@ export function WallPanel() {
|
||||
value={Math.round(thickness * 1000) / 1000}
|
||||
/>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Material">
|
||||
<MaterialPicker
|
||||
onChange={handleMaterialChange}
|
||||
value={node.material}
|
||||
/>
|
||||
</PanelSection>
|
||||
</PanelWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { type AnyNode, type AnyNodeId, emitter, useScene, WindowNode } from '@pascal-app/core'
|
||||
import { type AnyNode, type AnyNodeId, emitter, type MaterialSchema, useScene, WindowNode } from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
|
||||
import { useCallback } from 'react'
|
||||
@@ -8,6 +8,7 @@ import { usePresetsAdapter } from '../../../contexts/presets-context'
|
||||
import { sfxEmitter } from '../../../lib/sfx-bus'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { ActionButton, ActionGroup } from '../controls/action-button'
|
||||
import { MaterialPicker } from '../controls/material-picker'
|
||||
import { MetricControl } from '../controls/metric-control'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { SliderControl } from '../controls/slider-control'
|
||||
@@ -138,6 +139,10 @@ export function WindowPanel() {
|
||||
[handleUpdate],
|
||||
)
|
||||
|
||||
const handleMaterialChange = useCallback((material: MaterialSchema) => {
|
||||
handleUpdate({ material })
|
||||
}, [handleUpdate])
|
||||
|
||||
if (!node || node.type !== 'window' || selectedIds.length !== 1) return null
|
||||
|
||||
const numCols = node.columnRatios.length
|
||||
@@ -402,6 +407,13 @@ export function WindowPanel() {
|
||||
)}
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Material">
|
||||
<MaterialPicker
|
||||
onChange={handleMaterialChange}
|
||||
value={node.material}
|
||||
/>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Actions">
|
||||
<ActionGroup>
|
||||
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
|
||||
|
||||
@@ -1,49 +1,37 @@
|
||||
import { type CeilingNode, useRegistry } from '@pascal-app/core'
|
||||
import { useRef } from 'react'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import { float, mix, positionWorld, smoothstep } from 'three/tsl'
|
||||
import { BackSide, FrontSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
|
||||
import { useNodeEvents } from '../../../hooks/use-node-events'
|
||||
import { DEFAULT_CEILING_MATERIAL } from '../../../lib/materials'
|
||||
import { NodeRenderer } from '../node-renderer'
|
||||
|
||||
// TSL material that renders differently based on face direction:
|
||||
// - Back face (looking up at ceiling from below): solid
|
||||
// - Front face (looking down at ceiling from above): 30% opacity
|
||||
const ceilingTopMaterial = new MeshBasicNodeMaterial({
|
||||
color: 0xb5_a7_8d,
|
||||
const gridScale = 5
|
||||
const gridX = positionWorld.x.mul(gridScale).fract()
|
||||
const gridY = positionWorld.z.mul(gridScale).fract()
|
||||
const lineWidth = 0.05
|
||||
const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX))
|
||||
const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY))
|
||||
const gridPattern = lineX.max(lineY)
|
||||
const gridOpacity = mix(float(0.2), float(0.6), gridPattern)
|
||||
|
||||
function createCeilingMaterials(color: string = '#999999') {
|
||||
const topMaterial = new MeshBasicNodeMaterial({
|
||||
color,
|
||||
transparent: true,
|
||||
depthWrite: false,
|
||||
side: FrontSide,
|
||||
// Disabled as we only show ceiling grid when needed
|
||||
// alphaTestNode: float(0.4), // Discard pixels with alpha below 0.4 to create grid lines and not affect depth buffer
|
||||
})
|
||||
topMaterial.opacityNode = gridOpacity
|
||||
|
||||
const ceilingBottomMaterial = new MeshBasicNodeMaterial({
|
||||
color: 0x99_99_99,
|
||||
const bottomMaterial = new MeshBasicNodeMaterial({
|
||||
color,
|
||||
transparent: true,
|
||||
side: BackSide,
|
||||
})
|
||||
|
||||
// Create grid pattern based on local position
|
||||
const gridScale = 5 // Grid cells per meter (1 = 1m grid)
|
||||
const gridX = positionWorld.x.mul(gridScale).fract()
|
||||
const gridY = positionWorld.z.mul(gridScale).fract()
|
||||
|
||||
// Create grid lines - they are at 0 and 1
|
||||
const lineWidth = 0.05 // Width of grid lines (0-1 range within cell)
|
||||
|
||||
// Create visible lines at edges (near 0 and near 1)
|
||||
const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX))
|
||||
const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY))
|
||||
|
||||
// Combine: if either X or Y is a line, show the line
|
||||
const gridPattern = lineX.max(lineY)
|
||||
|
||||
// Grid lines at 0.6 opacity, spaces at 0.2 opacity
|
||||
const gridOpacity = mix(float(0.2), float(0.6), gridPattern)
|
||||
|
||||
// faceDirection is 1.0 for front face, -1.0 for back face
|
||||
// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid
|
||||
ceilingTopMaterial.opacityNode = gridOpacity
|
||||
return { topMaterial, bottomMaterial }
|
||||
}
|
||||
|
||||
export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
|
||||
const ref = useRef<Mesh>(null!)
|
||||
@@ -51,12 +39,24 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
|
||||
useRegistry(node.id, 'ceiling', ref)
|
||||
const handlers = useNodeEvents(node, 'ceiling')
|
||||
|
||||
const materials = useMemo(() => {
|
||||
const mat = node.material
|
||||
if (mat) {
|
||||
const props = mat.properties
|
||||
const color = props?.color || '#999999'
|
||||
return createCeilingMaterials(color)
|
||||
}
|
||||
return {
|
||||
topMaterial: createCeilingMaterials().topMaterial,
|
||||
bottomMaterial: DEFAULT_CEILING_MATERIAL,
|
||||
}
|
||||
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
|
||||
|
||||
return (
|
||||
<mesh material={ceilingBottomMaterial} ref={ref}>
|
||||
{/* CeilingSystem will replace this geometry in the next frame */}
|
||||
<mesh material={materials.bottomMaterial} ref={ref}>
|
||||
<boxGeometry args={[0, 0, 0]} />
|
||||
<mesh
|
||||
material={ceilingTopMaterial}
|
||||
material={materials.topMaterial}
|
||||
name="ceiling-grid"
|
||||
{...handlers}
|
||||
scale={0}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { type DoorNode, useRegistry } from '@pascal-app/core'
|
||||
import { useRef } from 'react'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import type { Mesh } from 'three'
|
||||
import { useNodeEvents } from '../../../hooks/use-node-events'
|
||||
import { createMaterial, DEFAULT_DOOR_MATERIAL } from '../../../lib/materials'
|
||||
|
||||
export const DoorRenderer = ({ node }: { node: DoorNode }) => {
|
||||
const ref = useRef<Mesh>(null!)
|
||||
@@ -10,9 +11,16 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
|
||||
const handlers = useNodeEvents(node, 'door')
|
||||
const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
|
||||
|
||||
const material = useMemo(() => {
|
||||
const mat = node.material
|
||||
if (!mat) return DEFAULT_DOOR_MATERIAL
|
||||
return createMaterial(mat)
|
||||
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
|
||||
|
||||
return (
|
||||
<mesh
|
||||
castShadow
|
||||
material={material}
|
||||
position={node.position}
|
||||
receiveShadow
|
||||
ref={ref}
|
||||
@@ -20,9 +28,7 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
|
||||
visible={node.visible}
|
||||
{...(isTransient ? {} : handlers)}
|
||||
>
|
||||
{/* DoorSystem replaces this geometry each time the node is dirty */}
|
||||
<boxGeometry args={[0, 0, 0]} />
|
||||
<meshStandardMaterial color="#d1d5db" />
|
||||
</mesh>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { type RoofSegmentNode, useRegistry } from '@pascal-app/core'
|
||||
import { useRef } from 'react'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import type * as THREE from 'three'
|
||||
import { useNodeEvents } from '../../../hooks/use-node-events'
|
||||
import { createMaterial } from '../../../lib/materials'
|
||||
import useViewer from '../../../store/use-viewer'
|
||||
import { roofDebugMaterials, roofMaterials } from '../roof/roof-materials'
|
||||
|
||||
@@ -13,9 +14,17 @@ export const RoofSegmentRenderer = ({ node }: { node: RoofSegmentNode }) => {
|
||||
const handlers = useNodeEvents(node, 'roof-segment')
|
||||
const debugColors = useViewer((s) => s.debugColors)
|
||||
|
||||
const customMaterial = useMemo(() => {
|
||||
const mat = node.material
|
||||
if (!mat) return null
|
||||
return createMaterial(mat)
|
||||
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
|
||||
|
||||
const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
|
||||
|
||||
return (
|
||||
<mesh
|
||||
material={debugColors ? roofDebugMaterials : roofMaterials}
|
||||
material={material}
|
||||
position={node.position}
|
||||
ref={ref}
|
||||
rotation-y={node.rotation}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { type RoofNode, useRegistry } from '@pascal-app/core'
|
||||
import { useRef } from 'react'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import type * as THREE from 'three'
|
||||
import { useNodeEvents } from '../../../hooks/use-node-events'
|
||||
import { createMaterial } from '../../../lib/materials'
|
||||
import useViewer from '../../../store/use-viewer'
|
||||
import { NodeRenderer } from '../node-renderer'
|
||||
import { roofDebugMaterials, roofMaterials } from './roof-materials'
|
||||
@@ -14,6 +15,14 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
|
||||
const handlers = useNodeEvents(node, 'roof')
|
||||
const debugColors = useViewer((s) => s.debugColors)
|
||||
|
||||
const customMaterial = useMemo(() => {
|
||||
const mat = node.material
|
||||
if (!mat) return null
|
||||
return createMaterial(mat)
|
||||
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
|
||||
|
||||
const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
|
||||
|
||||
return (
|
||||
<group
|
||||
position={node.position}
|
||||
@@ -22,12 +31,7 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
|
||||
visible={node.visible}
|
||||
{...handlers}
|
||||
>
|
||||
<mesh
|
||||
castShadow
|
||||
material={debugColors ? roofDebugMaterials : roofMaterials}
|
||||
name="merged-roof"
|
||||
receiveShadow
|
||||
>
|
||||
<mesh castShadow material={material} name="merged-roof" receiveShadow>
|
||||
<boxGeometry args={[0, 0, 0]} />
|
||||
</mesh>
|
||||
<group name="segments-wrapper" visible={false}>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { type SlabNode, useRegistry } from '@pascal-app/core'
|
||||
import { useRef } from 'react'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import type { Mesh } from 'three'
|
||||
import { useNodeEvents } from '../../../hooks/use-node-events'
|
||||
import { createMaterial, DEFAULT_SLAB_MATERIAL } from '../../../lib/materials'
|
||||
|
||||
export const SlabRenderer = ({ node }: { node: SlabNode }) => {
|
||||
const ref = useRef<Mesh>(null!)
|
||||
@@ -10,11 +11,22 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
|
||||
|
||||
const handlers = useNodeEvents(node, 'slab')
|
||||
|
||||
const material = useMemo(() => {
|
||||
const mat = node.material
|
||||
if (!mat) return DEFAULT_SLAB_MATERIAL
|
||||
return createMaterial(mat)
|
||||
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
|
||||
|
||||
return (
|
||||
<mesh castShadow receiveShadow ref={ref} {...handlers} visible={node.visible}>
|
||||
{/* SlabSystem will replace this geometry in the next frame */}
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
ref={ref}
|
||||
{...handlers}
|
||||
visible={node.visible}
|
||||
material={material}
|
||||
>
|
||||
<boxGeometry args={[0, 0, 0]} />
|
||||
<meshStandardMaterial color="#e5e5e5" />
|
||||
</mesh>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useRegistry, useScene, type WallNode } from '@pascal-app/core'
|
||||
import { useLayoutEffect, useRef } from 'react'
|
||||
import { useLayoutEffect, useMemo, useRef } from 'react'
|
||||
import type { Mesh } from 'three'
|
||||
import { useNodeEvents } from '../../../hooks/use-node-events'
|
||||
import { createMaterial, DEFAULT_WALL_MATERIAL } from '../../../lib/materials'
|
||||
import { NodeRenderer } from '../node-renderer'
|
||||
|
||||
export const WallRenderer = ({ node }: { node: WallNode }) => {
|
||||
@@ -9,18 +10,21 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
|
||||
|
||||
useRegistry(node.id, 'wall', ref)
|
||||
|
||||
// Mark dirty on mount so WallSystem rebuilds geometry when wall (re)appears
|
||||
useLayoutEffect(() => {
|
||||
useScene.getState().markDirty(node.id)
|
||||
}, [node.id])
|
||||
|
||||
const handlers = useNodeEvents(node, 'wall')
|
||||
|
||||
const material = useMemo(() => {
|
||||
const mat = node.material
|
||||
if (!mat) return DEFAULT_WALL_MATERIAL
|
||||
return createMaterial(mat)
|
||||
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
|
||||
|
||||
return (
|
||||
<mesh castShadow receiveShadow ref={ref} visible={node.visible}>
|
||||
{/* WallSystem will replace this geometry in the next frame */}
|
||||
<mesh castShadow receiveShadow ref={ref} visible={node.visible} material={material}>
|
||||
<boxGeometry args={[0, 0, 0]} />
|
||||
{/* Collision mesh: full-wall geometry (no cutouts) for pointer events */}
|
||||
<mesh name="collision-mesh" visible={false} {...handlers}>
|
||||
<boxGeometry args={[0, 0, 0]} />
|
||||
</mesh>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useRegistry, type WindowNode } from '@pascal-app/core'
|
||||
import { useRef } from 'react'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import type { Mesh } from 'three'
|
||||
import { useNodeEvents } from '../../../hooks/use-node-events'
|
||||
import { createMaterial, DEFAULT_WINDOW_MATERIAL } from '../../../lib/materials'
|
||||
|
||||
export const WindowRenderer = ({ node }: { node: WindowNode }) => {
|
||||
const ref = useRef<Mesh>(null!)
|
||||
@@ -10,9 +11,16 @@ export const WindowRenderer = ({ node }: { node: WindowNode }) => {
|
||||
const handlers = useNodeEvents(node, 'window')
|
||||
const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
|
||||
|
||||
const material = useMemo(() => {
|
||||
const mat = node.material
|
||||
if (!mat) return DEFAULT_WINDOW_MATERIAL
|
||||
return createMaterial(mat)
|
||||
}, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
|
||||
|
||||
return (
|
||||
<mesh
|
||||
castShadow
|
||||
material={material}
|
||||
position={node.position}
|
||||
receiveShadow
|
||||
ref={ref}
|
||||
@@ -20,9 +28,7 @@ export const WindowRenderer = ({ node }: { node: WindowNode }) => {
|
||||
visible={node.visible}
|
||||
{...(isTransient ? {} : handlers)}
|
||||
>
|
||||
{/* WindowSystem replaces this geometry each time the node is dirty */}
|
||||
<boxGeometry args={[0, 0, 0]} />
|
||||
<meshStandardMaterial color="#d1d5db" />
|
||||
</mesh>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -36,4 +36,5 @@ const useGLTFKTX2 = (path: string): ReturnType<typeof useGLTF> => {
|
||||
loader.setMeshoptDecoder(MeshoptDecoder)
|
||||
})
|
||||
}
|
||||
|
||||
export { useGLTFKTX2 }
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
export { default as Viewer } from './components/viewer'
|
||||
export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url'
|
||||
export { SCENE_LAYER, ZONE_LAYER } from './lib/layers'
|
||||
export {
|
||||
clearMaterialCache,
|
||||
createDefaultMaterial,
|
||||
createMaterial,
|
||||
DEFAULT_CEILING_MATERIAL,
|
||||
DEFAULT_DOOR_MATERIAL,
|
||||
DEFAULT_ROOF_MATERIAL,
|
||||
DEFAULT_SLAB_MATERIAL,
|
||||
DEFAULT_WALL_MATERIAL,
|
||||
DEFAULT_WINDOW_MATERIAL,
|
||||
disposeMaterial,
|
||||
} from './lib/materials'
|
||||
export { default as useViewer } from './store/use-viewer'
|
||||
export { InteractiveSystem } from './systems/interactive/interactive-system'
|
||||
export { snapLevelsToTruePositions } from './systems/level/level-utils'
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import { type MaterialProperties, type MaterialSchema, resolveMaterial } from '@pascal-app/core'
|
||||
import * as THREE from 'three'
|
||||
|
||||
const sideMap: Record<MaterialProperties['side'], THREE.Side> = {
|
||||
front: THREE.FrontSide,
|
||||
back: THREE.BackSide,
|
||||
double: THREE.DoubleSide,
|
||||
}
|
||||
|
||||
const materialCache = new Map<string, THREE.MeshStandardMaterial>()
|
||||
|
||||
function getCacheKey(props: MaterialProperties): string {
|
||||
return `${props.color}-${props.roughness}-${props.metalness}-${props.opacity}-${props.transparent}-${props.side}`
|
||||
}
|
||||
|
||||
export function createMaterial(material?: MaterialSchema): THREE.MeshStandardMaterial {
|
||||
const props = resolveMaterial(material)
|
||||
const cacheKey = getCacheKey(props)
|
||||
|
||||
if (materialCache.has(cacheKey)) {
|
||||
return materialCache.get(cacheKey)!
|
||||
}
|
||||
|
||||
const threeMaterial = new THREE.MeshStandardMaterial({
|
||||
color: props.color,
|
||||
roughness: props.roughness,
|
||||
metalness: props.metalness,
|
||||
opacity: props.opacity,
|
||||
transparent: props.transparent,
|
||||
side: sideMap[props.side],
|
||||
})
|
||||
|
||||
materialCache.set(cacheKey, threeMaterial)
|
||||
return threeMaterial
|
||||
}
|
||||
|
||||
export function createDefaultMaterial(
|
||||
color: string = '#ffffff',
|
||||
roughness: number = 0.9,
|
||||
): THREE.MeshStandardMaterial {
|
||||
return new THREE.MeshStandardMaterial({
|
||||
color,
|
||||
roughness,
|
||||
metalness: 0,
|
||||
side: THREE.FrontSide,
|
||||
})
|
||||
}
|
||||
|
||||
export const DEFAULT_WALL_MATERIAL = createDefaultMaterial('#ffffff', 0.9)
|
||||
export const DEFAULT_SLAB_MATERIAL = createDefaultMaterial('#e5e5e5', 0.8)
|
||||
export const DEFAULT_DOOR_MATERIAL = createDefaultMaterial('#8b4513', 0.7)
|
||||
export const DEFAULT_WINDOW_MATERIAL = new THREE.MeshStandardMaterial({
|
||||
color: '#87ceeb',
|
||||
roughness: 0.1,
|
||||
metalness: 0.1,
|
||||
opacity: 0.3,
|
||||
transparent: true,
|
||||
side: THREE.DoubleSide,
|
||||
})
|
||||
export const DEFAULT_CEILING_MATERIAL = createDefaultMaterial('#f5f5dc', 0.95)
|
||||
export const DEFAULT_ROOF_MATERIAL = createDefaultMaterial('#808080', 0.85)
|
||||
|
||||
export function disposeMaterial(material: THREE.Material): void {
|
||||
material.dispose()
|
||||
}
|
||||
|
||||
export function clearMaterialCache(): void {
|
||||
for (const material of materialCache.values()) {
|
||||
material.dispose()
|
||||
}
|
||||
materialCache.clear()
|
||||
}
|
||||
@@ -10,81 +10,105 @@ const tmpVec = new Vector3()
|
||||
const u = new Vector3()
|
||||
const v = new Vector3()
|
||||
|
||||
// Dot pattern shader
|
||||
const dotPattern = Fn(() => {
|
||||
// Create a repeating grid pattern based on world position
|
||||
const scale = float(0.1) // Dot grid spacing (10cm)
|
||||
const dotSize = float(0.3) // Size of dots relative to grid
|
||||
const scale = float(0.1)
|
||||
const dotSize = float(0.3)
|
||||
|
||||
// Use XY coordinates for pattern on wall face
|
||||
const uv = vec2(positionLocal.x, positionLocal.y).div(scale)
|
||||
const gridUV = fract(uv)
|
||||
|
||||
// Distance from center of grid cell (creates circular dots)
|
||||
const dist = length(gridUV.sub(0.5))
|
||||
|
||||
// Create dots: 1 where we want dots, 0 elsewhere
|
||||
const dots = step(dist, dotSize.mul(0.5))
|
||||
|
||||
// Vertical fade: fade out as Y increases (from bottom to top)
|
||||
const fadeHeight = float(2.5) // Fade over 2.5 meters
|
||||
const fadeHeight = float(2.5)
|
||||
const yFade = float(1).sub(smoothstep(float(0), fadeHeight, positionLocal.y))
|
||||
|
||||
return dots.mul(yFade)
|
||||
})
|
||||
|
||||
const invsibleWallMaterial = new MeshStandardNodeMaterial({
|
||||
transparent: true,
|
||||
opacityNode: mix(float(0.0), float(0.24), dotPattern()),
|
||||
color: 'white',
|
||||
depthWrite: false,
|
||||
emissive: 'white',
|
||||
})
|
||||
const wallMaterial = new MeshStandardNodeMaterial({
|
||||
color: 'white',
|
||||
interface WallMaterials {
|
||||
visible: MeshStandardNodeMaterial
|
||||
invisible: MeshStandardNodeMaterial
|
||||
materialHash: string
|
||||
}
|
||||
|
||||
const wallMaterialCache = new Map<string, WallMaterials>()
|
||||
|
||||
function getMaterialHash(wallNode: WallNode): string {
|
||||
if (!wallNode.material) return 'none'
|
||||
const mat = wallNode.material
|
||||
if (mat.preset && mat.preset !== 'custom') {
|
||||
return `preset-${mat.preset}`
|
||||
}
|
||||
if (mat.properties) {
|
||||
return `props-${mat.properties.color}-${mat.properties.roughness}-${mat.properties.metalness}`
|
||||
}
|
||||
return 'default'
|
||||
}
|
||||
|
||||
const presetColors = {
|
||||
white: '#ffffff',
|
||||
brick: '#8b4513',
|
||||
concrete: '#808080',
|
||||
wood: '#deb887',
|
||||
glass: '#87ceeb',
|
||||
metal: '#c0c0c0',
|
||||
plaster: '#f5f5dc',
|
||||
tile: '#dcdcdc',
|
||||
marble: '#f5f5f5',
|
||||
} as const
|
||||
|
||||
function getPresetColor(preset: string): string {
|
||||
return presetColors[preset as keyof typeof presetColors] ?? '#ffffff'
|
||||
}
|
||||
|
||||
function getMaterialsForWall(wallNode: WallNode): WallMaterials {
|
||||
const cacheKey = wallNode.id
|
||||
const materialHash = getMaterialHash(wallNode)
|
||||
|
||||
const existing = wallMaterialCache.get(cacheKey)
|
||||
if (existing && existing.materialHash === materialHash) {
|
||||
return existing
|
||||
}
|
||||
|
||||
if (existing) {
|
||||
existing.visible.dispose()
|
||||
existing.invisible.dispose()
|
||||
}
|
||||
|
||||
let userColor = '#ffffff'
|
||||
if (wallNode.material?.properties?.color) {
|
||||
userColor = wallNode.material.properties.color
|
||||
} else if (wallNode.material?.preset && wallNode.material.preset !== 'custom') {
|
||||
userColor = getPresetColor(wallNode.material.preset)
|
||||
}
|
||||
|
||||
const visibleMat = new MeshStandardNodeMaterial({
|
||||
color: userColor,
|
||||
roughness: 1,
|
||||
metalness: 0,
|
||||
})
|
||||
|
||||
export const WallCutout = () => {
|
||||
const lastCameraPosition = useRef(new Vector3())
|
||||
const lastCameraTarget = useRef(new Vector3())
|
||||
const lastUpdateTime = useRef(0)
|
||||
const lastWallMode = useRef<string>(useViewer.getState().wallMode)
|
||||
const lastNumberOfWalls = useRef(0)
|
||||
const invisibleMat = new MeshStandardNodeMaterial({
|
||||
transparent: true,
|
||||
opacityNode: mix(float(0.0), float(0.24), dotPattern()),
|
||||
color: userColor,
|
||||
depthWrite: false,
|
||||
emissive: userColor,
|
||||
})
|
||||
|
||||
useFrame(({ camera, clock }) => {
|
||||
const wallMode = useViewer.getState().wallMode
|
||||
const currentTime = clock.elapsedTime
|
||||
const currentCameraPosition = camera.position
|
||||
camera.getWorldDirection(tmpVec)
|
||||
tmpVec.add(currentCameraPosition)
|
||||
const result: WallMaterials = { visible: visibleMat, invisible: invisibleMat, materialHash }
|
||||
wallMaterialCache.set(cacheKey, result)
|
||||
return result
|
||||
}
|
||||
|
||||
// Throttle: only update if camera moved significantly AND enough time passed
|
||||
const distanceMoved = currentCameraPosition.distanceTo(lastCameraPosition.current)
|
||||
const directionChanged = tmpVec.distanceTo(lastCameraTarget.current)
|
||||
const timeSinceUpdate = currentTime - lastUpdateTime.current
|
||||
|
||||
// Update if moved > 0.5m OR direction changed > 0.3 AND at least 100ms passed
|
||||
if (
|
||||
((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
|
||||
lastWallMode.current !== wallMode ||
|
||||
sceneRegistry.byType.wall.size !== lastNumberOfWalls.current
|
||||
) {
|
||||
// Camera has moved, update cutout logic here
|
||||
|
||||
// Update last known positions and time
|
||||
lastCameraPosition.current.copy(currentCameraPosition)
|
||||
lastCameraTarget.current.copy(tmpVec)
|
||||
lastUpdateTime.current = currentTime
|
||||
camera.getWorldDirection(u)
|
||||
|
||||
const walls = sceneRegistry.byType.wall
|
||||
walls.forEach((wallId) => {
|
||||
const wallMesh = sceneRegistry.nodes.get(wallId)
|
||||
if (!wallMesh) return
|
||||
const wallNode = useScene.getState().nodes[wallId as WallNode['id']]
|
||||
if (!wallNode || wallNode.type !== 'wall') return
|
||||
function getWallHideState(
|
||||
wallNode: WallNode,
|
||||
wallMesh: Mesh,
|
||||
wallMode: string,
|
||||
cameraDir: Vector3,
|
||||
): boolean {
|
||||
let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior'
|
||||
|
||||
if (wallMode === 'up') {
|
||||
@@ -93,18 +117,94 @@ export const WallCutout = () => {
|
||||
hideWall = true
|
||||
} else {
|
||||
wallMesh.getWorldDirection(v)
|
||||
if (v.dot(u) < 0) {
|
||||
// Front side
|
||||
if (v.dot(cameraDir) < 0) {
|
||||
if (wallNode.frontSide === 'exterior' && wallNode.backSide !== 'exterior') {
|
||||
hideWall = true
|
||||
}
|
||||
} else if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
|
||||
// Back side
|
||||
hideWall = true
|
||||
}
|
||||
}
|
||||
;(wallMesh as Mesh).material = hideWall ? invsibleWallMaterial : wallMaterial
|
||||
|
||||
return hideWall
|
||||
}
|
||||
|
||||
export const WallCutout = () => {
|
||||
const lastCameraPosition = useRef(new Vector3())
|
||||
const lastCameraTarget = useRef(new Vector3())
|
||||
const lastUpdateTime = useRef(0)
|
||||
const lastWallMode = useRef<string>(useViewer.getState().wallMode)
|
||||
const lastNumberOfWalls = useRef(0)
|
||||
const lastWallMaterials = useRef<Map<string, WallMaterials>>(new Map())
|
||||
|
||||
useFrame(({ camera, clock }) => {
|
||||
const wallMode = useViewer.getState().wallMode
|
||||
const currentTime = clock.elapsedTime
|
||||
const currentCameraPosition = camera.position
|
||||
camera.getWorldDirection(tmpVec)
|
||||
tmpVec.add(currentCameraPosition)
|
||||
|
||||
const distanceMoved = currentCameraPosition.distanceTo(lastCameraPosition.current)
|
||||
const directionChanged = tmpVec.distanceTo(lastCameraTarget.current)
|
||||
const timeSinceUpdate = currentTime - lastUpdateTime.current
|
||||
|
||||
const shouldUpdate =
|
||||
((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
|
||||
lastWallMode.current !== wallMode ||
|
||||
sceneRegistry.byType.wall.size !== lastNumberOfWalls.current
|
||||
|
||||
const walls = sceneRegistry.byType.wall
|
||||
const currentWallIds = new Set<string>()
|
||||
|
||||
walls.forEach((wallId) => {
|
||||
const wallMesh = sceneRegistry.nodes.get(wallId)
|
||||
if (!wallMesh) return
|
||||
const wallNode = useScene.getState().nodes[wallId as WallNode['id']]
|
||||
if (!wallNode || wallNode.type !== 'wall') return
|
||||
|
||||
currentWallIds.add(wallId)
|
||||
|
||||
const hideWall = getWallHideState(wallNode, wallMesh as Mesh, wallMode, u)
|
||||
|
||||
if (shouldUpdate) {
|
||||
const materials = getMaterialsForWall(wallNode)
|
||||
;(wallMesh as Mesh).material = hideWall ? materials.invisible : materials.visible
|
||||
} else {
|
||||
const currentMaterial = (wallMesh as Mesh).material
|
||||
const materials = wallMaterialCache.get(wallId)
|
||||
if (
|
||||
!materials ||
|
||||
currentMaterial !== (hideWall ? materials.invisible : materials.visible)
|
||||
) {
|
||||
const newMaterials = getMaterialsForWall(wallNode)
|
||||
;(wallMesh as Mesh).material = hideWall ? newMaterials.invisible : newMaterials.visible
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (shouldUpdate) {
|
||||
lastCameraPosition.current.copy(currentCameraPosition)
|
||||
lastCameraTarget.current.copy(tmpVec)
|
||||
lastUpdateTime.current = currentTime
|
||||
camera.getWorldDirection(u)
|
||||
|
||||
if (lastWallMode.current !== wallMode) {
|
||||
wallMaterialCache.clear()
|
||||
}
|
||||
|
||||
for (const [wallId, mats] of lastWallMaterials.current) {
|
||||
if (!currentWallIds.has(wallId)) {
|
||||
mats.visible.dispose()
|
||||
mats.invisible.dispose()
|
||||
wallMaterialCache.delete(wallId)
|
||||
}
|
||||
}
|
||||
|
||||
lastWallMaterials.current.clear()
|
||||
for (const [wallId, mats] of wallMaterialCache) {
|
||||
lastWallMaterials.current.set(wallId, mats)
|
||||
}
|
||||
|
||||
lastWallMode.current = wallMode
|
||||
lastNumberOfWalls.current = sceneRegistry.byType.wall.size
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user