Jerry
456 lines
13 KiB
TypeScript
456 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import * as THREE from "three";
|
|
import { Line2 } from "three/examples/jsm/lines/Line2.js";
|
|
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
|
|
import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
|
|
import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2.js";
|
|
import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
|
|
import {
|
|
CAD_SCENE_SCALE,
|
|
buildModel,
|
|
} from "cadjs/common/cadScene.js";
|
|
import { renderModel } from "cadjs/common/renderModel.js";
|
|
import { loadSource } from "cadjs/common/source.js";
|
|
import {
|
|
normalizeParameterValue,
|
|
normalizeStepModuleParameterValues as normalizeStepParameterValues,
|
|
} from "cadjs/common/stepModule.js";
|
|
import { cloneThemeSettings } from "cadjs/common/themeSettings.js";
|
|
|
|
const HERO_STEP_URL = "/hero/planetary_gear_assembly.step.glb";
|
|
const HERO_STEP_PARAMETER_URL = "/hero/planetary_gear_assembly.step.js";
|
|
const HERO_STEP_CAD_PATH = "models/fun/planetary_gear_assembly.step";
|
|
const HERO_STEP_DEMO_URL =
|
|
"https://demo.cadskills.xyz/?file=fun%2Fplanetary_gear_assembly.step";
|
|
const HERO_STEP_LABEL = "PLANETARY_GEAR_ASSEMBLY.STEP";
|
|
const GEAR_MESH_ANIMATION_SPEED = 0.14;
|
|
const HERO_STEP_PARAMETER_VALUES = {
|
|
drive: 0,
|
|
explode: 0,
|
|
highlightMeshing: false,
|
|
orbitGuides: false,
|
|
ringVisible: true,
|
|
viewMode: "mesh",
|
|
};
|
|
|
|
type PreviewScheme = "dark" | "light";
|
|
type StepParameterDefinition = NonNullable<
|
|
Awaited<ReturnType<typeof loadSource>>["stepParameterSource"]
|
|
>["definition"];
|
|
type StepParameterAnimation = StepParameterDefinition["animations"][number];
|
|
type StepParameterRuntime = {
|
|
animation: StepParameterAnimation | null;
|
|
animationElapsedSec: number;
|
|
animationState: {
|
|
activeId: string;
|
|
duration: number;
|
|
elapsedSec: number;
|
|
loop: boolean;
|
|
playing: boolean;
|
|
speed: number;
|
|
};
|
|
cadPath: string;
|
|
definition: StepParameterDefinition;
|
|
parameterValues: Record<string, unknown>;
|
|
selectorRuntime: null;
|
|
sourceUrl: string;
|
|
};
|
|
|
|
const STEP_PREVIEW_PALETTES = {
|
|
dark: {
|
|
background: "#111820",
|
|
border: "#3b4553",
|
|
fill: ["#c7d0d8", "#aeb9c3", "#d9dee3", "#8f9ba7"],
|
|
headerBackground: "rgba(17, 24, 32, 0.9)",
|
|
headerText: "#c9d3df",
|
|
keyLight: "#f6f8fb",
|
|
keyLightIntensity: 2.5,
|
|
fillLight: "#7f95ad",
|
|
fillLightIntensity: 0.8,
|
|
ambientLight: "#eef4fa",
|
|
ambientLightIntensity: 1.85,
|
|
},
|
|
light: {
|
|
background: "#eef1f5",
|
|
border: "#c9cfda",
|
|
fill: ["#d7dce0", "#cdd3d8", "#e4e7ea", "#bfc7ce"],
|
|
headerBackground: "rgba(238, 241, 245, 0.9)",
|
|
headerText: "#4c566a",
|
|
keyLight: "#ffffff",
|
|
keyLightIntensity: 2.6,
|
|
fillLight: "#cfd8e3",
|
|
fillLightIntensity: 0.9,
|
|
ambientLight: "#ffffff",
|
|
ambientLightIntensity: 2.2,
|
|
},
|
|
} as const;
|
|
|
|
function currentPreviewScheme(): PreviewScheme {
|
|
if (typeof document === "undefined") {
|
|
return "dark";
|
|
}
|
|
|
|
return document.documentElement.classList.contains("dark") ? "dark" : "light";
|
|
}
|
|
|
|
function buildWorkbenchTheme(scheme: PreviewScheme) {
|
|
const palette = STEP_PREVIEW_PALETTES[scheme];
|
|
const theme = cloneThemeSettings("workbench");
|
|
const materials =
|
|
theme.materials && typeof theme.materials === "object"
|
|
? theme.materials
|
|
: {};
|
|
|
|
return {
|
|
...theme,
|
|
materials: {
|
|
...materials,
|
|
defaultColor: palette.fill[0],
|
|
fillColors: [...palette.fill],
|
|
overrideSourceColors: false,
|
|
saturation: 1,
|
|
contrast: 1,
|
|
brightness: 1,
|
|
tintStrength: 0,
|
|
roughness: 0.92,
|
|
metalness: 0,
|
|
clearcoat: 0,
|
|
envMapIntensity: 0,
|
|
},
|
|
edges: {
|
|
...(theme.edges || {}),
|
|
enabled: true,
|
|
color: scheme === "dark" ? "#202b38" : "#2f3a4b",
|
|
contrastMode: "manual",
|
|
opacity: 1,
|
|
silhouette: true,
|
|
thickness: 1,
|
|
},
|
|
background: {
|
|
type: "solid",
|
|
solidColor: palette.background,
|
|
},
|
|
lighting: {
|
|
ambient: {
|
|
color: palette.ambientLight,
|
|
enabled: true,
|
|
intensity: palette.ambientLightIntensity,
|
|
},
|
|
directionalLights: [
|
|
{
|
|
color: palette.keyLight,
|
|
enabled: true,
|
|
intensity: palette.keyLightIntensity,
|
|
position: { x: -120, y: 180, z: 240 },
|
|
},
|
|
{
|
|
color: palette.fillLight,
|
|
enabled: true,
|
|
intensity: palette.fillLightIntensity,
|
|
position: { x: 180, y: -120, z: 120 },
|
|
},
|
|
],
|
|
hemisphere: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
function createHeroStepParameterRuntime(
|
|
definition: StepParameterDefinition,
|
|
parameterUrl: string
|
|
): StepParameterRuntime {
|
|
const animation =
|
|
definition.animations.find((item) => item.id === "meshCycle") ??
|
|
definition.animations[0] ??
|
|
null;
|
|
const duration = Math.max(Number(animation?.duration) || 6, 0.001);
|
|
|
|
return {
|
|
animation,
|
|
animationElapsedSec: 0,
|
|
animationState: {
|
|
activeId: animation?.id ?? "",
|
|
duration,
|
|
elapsedSec: 0,
|
|
loop: animation?.loop !== false,
|
|
playing: false,
|
|
speed: GEAR_MESH_ANIMATION_SPEED,
|
|
},
|
|
cadPath: HERO_STEP_CAD_PATH,
|
|
definition,
|
|
parameterValues: normalizeStepParameterValues(
|
|
definition,
|
|
HERO_STEP_PARAMETER_VALUES
|
|
),
|
|
selectorRuntime: null,
|
|
sourceUrl: parameterUrl,
|
|
};
|
|
}
|
|
|
|
function advanceStepParameterRuntime(
|
|
runtime: StepParameterRuntime,
|
|
deltaSeconds: number
|
|
) {
|
|
const animation = runtime.animation;
|
|
if (!animation?.update) {
|
|
return;
|
|
}
|
|
|
|
const duration = Math.max(Number(animation.duration) || 6, 0.001);
|
|
const nextElapsed =
|
|
(runtime.animationElapsedSec +
|
|
Math.max(deltaSeconds, 0) * GEAR_MESH_ANIMATION_SPEED) %
|
|
duration;
|
|
const progress = nextElapsed / duration;
|
|
const currentValues = normalizeStepParameterValues(
|
|
runtime.definition,
|
|
runtime.parameterValues
|
|
);
|
|
const nextValues = { ...currentValues };
|
|
|
|
const set = (parameterId: string, value: unknown) => {
|
|
const id = String(parameterId || "").trim();
|
|
const parameter = runtime.definition.parameterMap?.[id];
|
|
if (!parameter) {
|
|
return;
|
|
}
|
|
nextValues[id] = normalizeParameterValue(parameter, value);
|
|
};
|
|
|
|
animation.update({
|
|
cycle: nextElapsed / duration,
|
|
duration,
|
|
elapsed: nextElapsed,
|
|
elapsedSec: nextElapsed,
|
|
loop: animation.loop !== false,
|
|
params: currentValues,
|
|
progress,
|
|
set,
|
|
});
|
|
|
|
runtime.animationElapsedSec = nextElapsed;
|
|
// The hero drives sidecar parameter values directly; keep time.playing false so
|
|
// sidecar-only inspection highlights do not override native STEP colors.
|
|
runtime.animationState = {
|
|
activeId: animation.id,
|
|
duration,
|
|
elapsedSec: nextElapsed,
|
|
loop: animation.loop !== false,
|
|
playing: false,
|
|
speed: GEAR_MESH_ANIMATION_SPEED,
|
|
};
|
|
runtime.parameterValues = nextValues;
|
|
}
|
|
|
|
export function HeroStepRender() {
|
|
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
|
const viewportRef = useRef<HTMLDivElement | null>(null);
|
|
const [scheme, setScheme] = useState<PreviewScheme>("dark");
|
|
const [status, setStatus] = useState("loading step");
|
|
const palette = STEP_PREVIEW_PALETTES[scheme];
|
|
|
|
useEffect(() => {
|
|
const syncScheme = () => {
|
|
setScheme(currentPreviewScheme());
|
|
};
|
|
|
|
syncScheme();
|
|
|
|
const observer = new MutationObserver(syncScheme);
|
|
observer.observe(document.documentElement, {
|
|
attributeFilter: ["class"],
|
|
attributes: true,
|
|
});
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) {
|
|
return;
|
|
}
|
|
|
|
let disposed = false;
|
|
let cadModel: ReturnType<typeof buildModel> | null = null;
|
|
let viewport: ReturnType<typeof renderModel> | null = null;
|
|
let stepParameterRuntime: StepParameterRuntime | null = null;
|
|
const dragState = {
|
|
active: false,
|
|
lastX: 0,
|
|
lastY: 0,
|
|
pitch: 0.18,
|
|
pointerId: -1,
|
|
yaw: -0.18,
|
|
};
|
|
|
|
const beforeRender = ({ deltaSeconds }: { deltaSeconds: number }) => {
|
|
if (disposed || !cadModel) {
|
|
return;
|
|
}
|
|
if (stepParameterRuntime) {
|
|
advanceStepParameterRuntime(stepParameterRuntime, deltaSeconds);
|
|
cadModel.update({ stepParameters: stepParameterRuntime });
|
|
}
|
|
|
|
if (!dragState.active) {
|
|
dragState.yaw += 0.0018;
|
|
}
|
|
cadModel.root.rotation.x = dragState.pitch;
|
|
cadModel.root.rotation.z = dragState.yaw;
|
|
};
|
|
|
|
const handlePointerDown = (event: PointerEvent) => {
|
|
dragState.active = true;
|
|
dragState.lastX = event.clientX;
|
|
dragState.lastY = event.clientY;
|
|
dragState.pointerId = event.pointerId;
|
|
canvas.setPointerCapture(event.pointerId);
|
|
};
|
|
|
|
const handlePointerMove = (event: PointerEvent) => {
|
|
if (!dragState.active || event.pointerId !== dragState.pointerId) {
|
|
return;
|
|
}
|
|
|
|
const dx = event.clientX - dragState.lastX;
|
|
const dy = event.clientY - dragState.lastY;
|
|
dragState.lastX = event.clientX;
|
|
dragState.lastY = event.clientY;
|
|
dragState.yaw += dx * 0.008;
|
|
dragState.pitch = Math.max(
|
|
-0.85,
|
|
Math.min(0.85, dragState.pitch + dy * 0.006)
|
|
);
|
|
};
|
|
|
|
const handlePointerEnd = (event: PointerEvent) => {
|
|
if (event.pointerId !== dragState.pointerId) {
|
|
return;
|
|
}
|
|
|
|
dragState.active = false;
|
|
dragState.pointerId = -1;
|
|
if (canvas.hasPointerCapture(event.pointerId)) {
|
|
canvas.releasePointerCapture(event.pointerId);
|
|
}
|
|
};
|
|
|
|
const load = async () => {
|
|
try {
|
|
setStatus("loading step");
|
|
const parameterUrl = `${HERO_STEP_PARAMETER_URL}?v=${Date.now()}`;
|
|
const source = await loadSource({
|
|
kind: "step",
|
|
glbUrl: HERO_STEP_URL,
|
|
stepParameterUrl: parameterUrl,
|
|
cadPath: HERO_STEP_CAD_PATH,
|
|
stepParameters: HERO_STEP_PARAMETER_VALUES,
|
|
});
|
|
if (disposed) {
|
|
return;
|
|
}
|
|
if (!source.stepParameterSource?.definition) {
|
|
throw new Error("missing STEP parameter sidecar");
|
|
}
|
|
stepParameterRuntime = createHeroStepParameterRuntime(
|
|
source.stepParameterSource.definition,
|
|
parameterUrl
|
|
);
|
|
|
|
cadModel = buildModel(THREE, source, {
|
|
theme: buildWorkbenchTheme(scheme),
|
|
displayMode: "solid",
|
|
stepParameters: stepParameterRuntime,
|
|
scale: CAD_SCENE_SCALE.CAD,
|
|
selection: {
|
|
showEdges: true,
|
|
},
|
|
edgeRendering: {
|
|
mode: "screen-space",
|
|
Line2,
|
|
LineGeometry,
|
|
LineMaterial,
|
|
LineSegments2,
|
|
LineSegmentsGeometry,
|
|
},
|
|
});
|
|
cadModel.root.rotation.x = dragState.pitch;
|
|
cadModel.root.rotation.z = dragState.yaw;
|
|
viewport = renderModel(THREE, cadModel, {
|
|
autoStart: true,
|
|
beforeRender,
|
|
canvas,
|
|
direction: [1, -1, 0.65],
|
|
hostElement: viewportRef.current ?? canvas,
|
|
lockedHalfHeightScale: 0.86,
|
|
padding: 0.1,
|
|
scale: CAD_SCENE_SCALE.CAD,
|
|
theme: buildWorkbenchTheme(scheme),
|
|
});
|
|
setStatus(HERO_STEP_LABEL);
|
|
} catch (error) {
|
|
setStatus(error instanceof Error ? error.message : "render failed");
|
|
}
|
|
};
|
|
|
|
canvas.addEventListener("pointerdown", handlePointerDown);
|
|
canvas.addEventListener("pointermove", handlePointerMove);
|
|
canvas.addEventListener("pointerup", handlePointerEnd);
|
|
canvas.addEventListener("pointercancel", handlePointerEnd);
|
|
void load();
|
|
|
|
return () => {
|
|
disposed = true;
|
|
canvas.removeEventListener("pointerdown", handlePointerDown);
|
|
canvas.removeEventListener("pointermove", handlePointerMove);
|
|
canvas.removeEventListener("pointerup", handlePointerEnd);
|
|
canvas.removeEventListener("pointercancel", handlePointerEnd);
|
|
viewport?.dispose();
|
|
};
|
|
}, [palette, scheme]);
|
|
|
|
return (
|
|
<div
|
|
className="flex h-full min-h-0 flex-col overflow-hidden"
|
|
style={{ backgroundColor: palette.background }}
|
|
>
|
|
<div ref={viewportRef} className="relative min-h-0 flex-1 overflow-hidden">
|
|
<canvas
|
|
ref={canvasRef}
|
|
aria-label="Light 3D render of a sample STEP planetary gear assembly"
|
|
className="absolute inset-0 h-full w-full cursor-grab touch-none active:cursor-grabbing"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="flex min-h-8 shrink-0 items-center justify-between gap-3 border-t px-3 py-[7px] text-label uppercase leading-none tracking-[1.5px]"
|
|
style={{
|
|
backgroundColor: palette.headerBackground,
|
|
borderColor: palette.border,
|
|
color: palette.headerText,
|
|
}}
|
|
>
|
|
{status === HERO_STEP_LABEL ? (
|
|
<a
|
|
className="min-w-0 truncate transition hover:text-primary"
|
|
href={HERO_STEP_DEMO_URL}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
title="Open planetary gear assembly in the CAD Skills demo"
|
|
>
|
|
{status}
|
|
</a>
|
|
) : (
|
|
<span className="min-w-0 truncate">{status}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|