@ntalmagor/3drize-viewer 0.1.23 → 0.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AnimatedObject.js +1 -1
- package/dist/components/Clouds.js +1 -1
- package/dist/components/CreatedObject.d.ts.map +1 -1
- package/dist/components/CreatedObject.js +4 -2
- package/dist/components/CustomPrimitive.js +31 -27
- package/dist/components/EffectsGroup.d.ts +1 -1
- package/dist/components/EffectsGroup.d.ts.map +1 -1
- package/dist/components/EffectsGroup.js +2 -1
- package/dist/components/Galaxy.d.ts +3 -1
- package/dist/components/Galaxy.d.ts.map +1 -1
- package/dist/components/Galaxy.js +2 -2
- package/dist/components/LightObject.d.ts +8 -0
- package/dist/components/LightObject.d.ts.map +1 -0
- package/dist/components/LightObject.js +65 -0
- package/dist/components/LightsManager.d.ts +2 -3
- package/dist/components/LightsManager.d.ts.map +1 -1
- package/dist/components/LightsManager.js +89 -106
- package/dist/components/ObjectNode.d.ts.map +1 -1
- package/dist/components/ObjectNode.js +15 -6
- package/dist/components/ObjectsRenderer.js +1 -1
- package/dist/components/Ocean.js +1 -1
- package/dist/components/SceneBuilder.js +1 -1
- package/dist/components/SkyController.d.ts.map +1 -1
- package/dist/components/SkyController.js +1 -1
- package/dist/components/SkySystem.d.ts.map +1 -1
- package/dist/components/SkySystem.js +4 -2
- package/dist/components/Skybox.d.ts.map +1 -1
- package/dist/components/Skybox.js +37 -28
- package/dist/components/Stars.d.ts.map +1 -1
- package/dist/components/Stars.js +12 -2
- package/dist/hooks/useCameraAnimation.js +25 -19
- package/dist/hooks/useInteractionEffects.d.ts +3 -3
- package/dist/hooks/useInteractionEffects.d.ts.map +1 -1
- package/dist/hooks/useInteractionEffects.js +66 -23
- package/dist/hooks/useLightAnimation.d.ts +10 -0
- package/dist/hooks/useLightAnimation.d.ts.map +1 -0
- package/dist/hooks/useLightAnimation.js +34 -0
- package/dist/hooks/useLightMouseMove.d.ts +11 -0
- package/dist/hooks/useLightMouseMove.d.ts.map +1 -0
- package/dist/hooks/useLightMouseMove.js +27 -0
- package/dist/hooks/useLightShadow.d.ts +6 -0
- package/dist/hooks/useLightShadow.d.ts.map +1 -0
- package/dist/hooks/useLightShadow.js +63 -0
- package/dist/hooks/useMaterialApplication.d.ts.map +1 -1
- package/dist/hooks/useMaterialApplication.js +65 -6
- package/dist/hooks/useMaterialUniforms.js +6 -6
- package/dist/hooks/useObjectAnimation.d.ts.map +1 -1
- package/dist/hooks/useObjectAnimation.js +3 -3
- package/dist/hooks/useObjectEdges.d.ts +1 -2
- package/dist/hooks/useObjectEdges.d.ts.map +1 -1
- package/dist/hooks/useObjectEdges.js +5 -5
- package/dist/hooks/useShadowApplication.d.ts +3 -0
- package/dist/hooks/useShadowApplication.d.ts.map +1 -0
- package/dist/hooks/useShadowApplication.js +31 -0
- package/dist/hooks/useSkySystem.d.ts.map +1 -1
- package/dist/hooks/useSkySystem.js +4 -3
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +4 -3
|
@@ -17,7 +17,7 @@ visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointe
|
|
|
17
17
|
const stepEase = useRef('linear');
|
|
18
18
|
const animProgress = useRef(0);
|
|
19
19
|
const hasHoverFunctionalities = hasHoverAnimation(createdObject.animations);
|
|
20
|
-
const hasMouseInteraction = createdObject.
|
|
20
|
+
const hasMouseInteraction = (createdObject.actions?.length ?? 0) > 0;
|
|
21
21
|
const baseRef = useRef({ position: [...position], scale: [...scale], rotation: [...rotation] });
|
|
22
22
|
const targetRef = useRef({
|
|
23
23
|
position: targetPosition ? [...targetPosition] : [...position],
|
|
@@ -35,7 +35,7 @@ const Clouds = ({ settings, timeSettings, }) => {
|
|
|
35
35
|
const mouseOverrideRef = useRef({});
|
|
36
36
|
const { animateNumeric } = useNumericAnimation();
|
|
37
37
|
const effectiveMaterialSettings = materialSettings ?? DEFAULT_MATERIAL;
|
|
38
|
-
useMaterialApplication(meshRef.current, effectiveMaterialSettings, true);
|
|
38
|
+
useMaterialApplication(settings.visible ? meshRef.current : null, effectiveMaterialSettings, true);
|
|
39
39
|
const handleTimeUpdate = useCallback((state) => {
|
|
40
40
|
const { normalizedTime, isDaytime, delta } = state;
|
|
41
41
|
if (isDaytime) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatedObject.d.ts","sourceRoot":"","sources":["../../src/components/CreatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAG,qBAAqB,EAAkC,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"CreatedObject.d.ts","sourceRoot":"","sources":["../../src/components/CreatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAG,qBAAqB,EAAkC,MAAM,wBAAwB,CAAC;AAQrG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAWrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAElH;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6J9C,CAAC;AAIH,eAAe,aAAa,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useRef, useEffect, useState, memo } from "react";
|
|
3
3
|
import { DEFAULT_EDGES_SETTINGS } from "@ntalmagor/3drize-core";
|
|
4
4
|
import { useMaterialApplication } from "../hooks/useMaterialApplication.js";
|
|
5
|
+
import { useShadowApplication } from "../hooks/useShadowApplication.js";
|
|
5
6
|
import { useTransformControls } from "../hooks/useTransformControls.js";
|
|
6
7
|
import { RigidBody } from '@react-three/rapier';
|
|
7
8
|
import { cameraManager } from "../utils/CameraSingleton.js";
|
|
@@ -25,9 +26,10 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
|
|
|
25
26
|
const { controllersRef } = useTransformControls();
|
|
26
27
|
const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(isSelected);
|
|
27
28
|
const [mountedObject, setMountedObject] = useState(null);
|
|
28
|
-
useObjectEdges(
|
|
29
|
+
useObjectEdges(createdObject.id, createdObject.edgesSettings ?? DEFAULT_EDGES_SETTINGS);
|
|
29
30
|
// useObjectGenerativeEffects(mountedObject, createdObject.effects);
|
|
30
31
|
useMaterialApplication(meshRef.current, createdObject.materialSettings, shouldApply3driseMaterial);
|
|
32
|
+
useShadowApplication(meshRef.current, createdObject.meshSettings.castShadow, createdObject.meshSettings.receiveShadow);
|
|
31
33
|
const anchoredPosition = cameraManager.getAnchorPosition(createdObject.meshSettings.anchor?.anchor || 'center', 0, createdObject.meshSettings.anchor?.offset || { y: 0, x: 0, z: 0 }, createdObject.meshSettings.anchor?.padding || 0);
|
|
32
34
|
useEffect(() => {
|
|
33
35
|
if (meshRef.current) {
|
|
@@ -68,7 +70,7 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
|
|
|
68
70
|
return;
|
|
69
71
|
// e.stopPropagation();
|
|
70
72
|
handlePointerEnter(e);
|
|
71
|
-
if (createdObject.
|
|
73
|
+
if (createdObject.actions?.length || createdObject.mouseMove?.enabled) {
|
|
72
74
|
document.body.style.cursor = 'pointer';
|
|
73
75
|
}
|
|
74
76
|
};
|
|
@@ -1,47 +1,51 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { ObjectManager
|
|
4
|
-
// import ObjectManager from "~/utils/ObjectManager";
|
|
5
|
-
import { useMaterialApplication } from "../hooks/useMaterialApplication.js";
|
|
2
|
+
import { useRef, memo } from "react";
|
|
3
|
+
import { ObjectManager } from "@ntalmagor/3drize-core";
|
|
6
4
|
import MaterialLibrary from "./MaterialLibrary.js";
|
|
7
|
-
// import type { AnimatedTransform } from "~/types/mesh";
|
|
8
|
-
import CreatedObject from "./CreatedObject.js";
|
|
9
5
|
const CustomPrimitive = memo(({ createdObject, onObjectReady, handleObjectClick, }) => {
|
|
10
6
|
// const { handleObjectClick } = useSceneClick();
|
|
11
7
|
// console.log("Rendering CustomPrimitive with settings:", createdObject.name, createdObject);
|
|
12
8
|
const meshRef = useRef(null);
|
|
13
|
-
const effectStateRef = useRef(null);
|
|
14
|
-
const [animatedTransform, setAnimatedTransform] = React.useState({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
});
|
|
9
|
+
// const effectStateRef = useRef<EffectState | null>(null);
|
|
10
|
+
// const [animatedTransform, setAnimatedTransform] = React.useState<AnimatedTransform>({
|
|
11
|
+
// position: createdObject.meshSettings.position,
|
|
12
|
+
// rotation: createdObject.meshSettings.rotation,
|
|
13
|
+
// scale: createdObject.meshSettings.scale,
|
|
14
|
+
// });
|
|
19
15
|
// Initialize transform controls
|
|
20
16
|
// const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(true);
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}, [createdObject.meshSettings.position, createdObject.meshSettings.rotation, createdObject.meshSettings.scale]);
|
|
17
|
+
// useEffect(() => {
|
|
18
|
+
// setAnimatedTransform({
|
|
19
|
+
// position: createdObject.meshSettings.position,
|
|
20
|
+
// rotation: createdObject.meshSettings.rotation,
|
|
21
|
+
// scale: createdObject.meshSettings.scale,
|
|
22
|
+
// });
|
|
23
|
+
// }, [createdObject.meshSettings.position, createdObject.meshSettings.rotation, createdObject.meshSettings.scale]);
|
|
28
24
|
const useDreiMaterials = createdObject.materialSettings.materialType === "advanced";
|
|
29
|
-
const apply3driseMaterials = !useDreiMaterials;
|
|
30
|
-
const willApplyMaterial = apply3driseMaterials && !!createdObject.materialSettings.materialVariant;
|
|
31
|
-
const [materialReady, setMaterialReady] = useState(!willApplyMaterial);
|
|
25
|
+
// const apply3driseMaterials = !useDreiMaterials;
|
|
26
|
+
// const willApplyMaterial = apply3driseMaterials && !!createdObject.materialSettings.materialVariant;
|
|
27
|
+
// const [materialReady, setMaterialReady] = useState(!willApplyMaterial);
|
|
32
28
|
// get initial object from ObjectManager to add to scene with primitive, then use findById to get updated reference with materials applied by useMaterialApplication
|
|
33
29
|
const obj = ObjectManager.getObject(createdObject.id);
|
|
34
|
-
const object = findById(createdObject.id);
|
|
35
|
-
useMaterialApplication(object ?? null, createdObject.materialSettings, apply3driseMaterials, () => setMaterialReady(true));
|
|
30
|
+
// const object = findById(createdObject.id);
|
|
31
|
+
// useMaterialApplication(object ?? null, createdObject.materialSettings, apply3driseMaterials, () => setMaterialReady(true));
|
|
36
32
|
if (!obj) {
|
|
37
33
|
// console.warn(`CustomPrimitive - Object with ID ${createdObject.id} not found.`);
|
|
38
34
|
return null;
|
|
39
35
|
}
|
|
40
36
|
return (
|
|
41
37
|
// <Select enabled={isSelected}>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
38
|
+
// <CreatedObject createdObject={createdObject}
|
|
39
|
+
// shouldApply3driseMaterial={false} // Material is owned by useMaterialApplication above (applied to obj.object directly)
|
|
40
|
+
// handleObjectClick={handleObjectClick}
|
|
41
|
+
// onObjectReady={(object, ref) => {
|
|
42
|
+
// onObjectReady && onObjectReady(object, ref);
|
|
43
|
+
// }}
|
|
44
|
+
// >
|
|
45
|
+
_jsx("primitive", { ref: meshRef, name: obj.name, object: obj.object, visible: createdObject.meshSettings.visible, position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1], children: useDreiMaterials && createdObject.type === 'mesh' && createdObject.meshSettings.visible && (_jsx(MaterialLibrary, { materialSettings: createdObject.materialSettings })) }, obj.id)
|
|
46
|
+
// {/* <LineEdges object={obj.object} />
|
|
47
|
+
// <MeshEdges object={obj.object} /> */}
|
|
48
|
+
// </CreatedObject>
|
|
45
49
|
// {/* </Select> */}
|
|
46
50
|
);
|
|
47
51
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EffectsGroup.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"EffectsGroup.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAG3F,UAAU,iBAAiB;IACzB,aAAa,EAAE,qBAAqB,CAAC;CACtC;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAU7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { GEREATIVE_EFFECTS_KEY } from '@ntalmagor/3drize-core';
|
|
2
3
|
import EffectsGenerator from './EffectsGenerator.js';
|
|
3
4
|
const EffectsGroup = ({ createdObject }) => {
|
|
4
5
|
if (!createdObject.effects || createdObject.effects.length === 0)
|
|
5
6
|
return null;
|
|
6
|
-
return (_jsx("group", { name: `${createdObject.id}-effects`, children: createdObject.effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) }));
|
|
7
|
+
return (_jsx("group", { name: `${createdObject.id}-effects`, userData: { [GEREATIVE_EFFECTS_KEY]: true }, children: createdObject.effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) }));
|
|
7
8
|
};
|
|
8
9
|
export default EffectsGroup;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { StarsSettings } from '@ntalmagor/3drize-core';
|
|
2
|
+
import type { StarsSettings, TimeSettings } from '@ntalmagor/3drize-core';
|
|
3
3
|
export interface GalaxyProps {
|
|
4
4
|
settings: StarsSettings;
|
|
5
|
+
timeSettings?: TimeSettings;
|
|
6
|
+
sunSystemEnabled?: boolean;
|
|
5
7
|
}
|
|
6
8
|
declare const Galaxy: React.FC<GalaxyProps>;
|
|
7
9
|
export default Galaxy;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Galaxy.d.ts","sourceRoot":"","sources":["../../src/components/Galaxy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"Galaxy.d.ts","sourceRoot":"","sources":["../../src/components/Galaxy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI1E,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAajC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Stars from './Stars.js';
|
|
3
3
|
import ShootingStars from './ShootingStars.js';
|
|
4
|
-
const Galaxy = ({ settings }) => {
|
|
4
|
+
const Galaxy = ({ settings, timeSettings, sunSystemEnabled }) => {
|
|
5
5
|
// if (!settings.visible) return null;
|
|
6
|
-
return (_jsxs(_Fragment, { children: [_jsx(Stars, { settings: settings }), _jsx(ShootingStars, { settings: settings.shootingStars })] }));
|
|
6
|
+
return (_jsxs(_Fragment, { children: [_jsx(Stars, { settings: settings, timeSettings: timeSettings, sunSystemEnabled: sunSystemEnabled }), _jsx(ShootingStars, { settings: settings.shootingStars })] }));
|
|
7
7
|
};
|
|
8
8
|
export default Galaxy;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { CreatedObjectSettings } from '@ntalmagor/3drize-core';
|
|
3
|
+
type LightObjectProps = {
|
|
4
|
+
createdObject: CreatedObjectSettings;
|
|
5
|
+
};
|
|
6
|
+
declare const LightObject: React.FC<LightObjectProps>;
|
|
7
|
+
export default LightObject;
|
|
8
|
+
//# sourceMappingURL=LightObject.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LightObject.d.ts","sourceRoot":"","sources":["../../src/components/LightObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,KAAK,EAEV,qBAAqB,EAKtB,MAAM,wBAAwB,CAAC;AAKhC,KAAK,gBAAgB,GAAG;IACtB,aAAa,EAAE,qBAAqB,CAAC;CACtC,CAAC;AA8EF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef } from 'react';
|
|
3
|
+
import { useThree } from '@react-three/fiber';
|
|
4
|
+
import { useLightShadow } from '../hooks/useLightShadow.js';
|
|
5
|
+
import { useLightAnimation } from '../hooks/useLightAnimation.js';
|
|
6
|
+
import { useLightMouseMove } from '../hooks/useLightMouseMove.js';
|
|
7
|
+
const DirectionalLightR3F = ({ config, animations, mouseMove }) => {
|
|
8
|
+
const lightRef = useRef(null);
|
|
9
|
+
useLightShadow(lightRef, config.shadow);
|
|
10
|
+
useLightAnimation(lightRef, animations);
|
|
11
|
+
useLightMouseMove(lightRef, mouseMove, { lightConfig: config });
|
|
12
|
+
return (_jsx("directionalLight", { ref: lightRef, color: config.color || '#ffffff', intensity: config.intensity ?? 1 }));
|
|
13
|
+
};
|
|
14
|
+
const SpotLightR3F = ({ config, animations, mouseMove }) => {
|
|
15
|
+
const { scene } = useThree();
|
|
16
|
+
const lightRef = useRef(null);
|
|
17
|
+
const targetRef = useRef(null);
|
|
18
|
+
const [tx, ty, tz] = config.targetPosition ?? [0, 0, 0];
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
const light = lightRef.current;
|
|
21
|
+
if (!light)
|
|
22
|
+
return;
|
|
23
|
+
if (!targetRef.current) {
|
|
24
|
+
targetRef.current = light.target;
|
|
25
|
+
scene.add(targetRef.current);
|
|
26
|
+
}
|
|
27
|
+
targetRef.current.position.set(tx, ty, tz);
|
|
28
|
+
targetRef.current.updateMatrixWorld();
|
|
29
|
+
return () => {
|
|
30
|
+
if (targetRef.current) {
|
|
31
|
+
scene.remove(targetRef.current);
|
|
32
|
+
targetRef.current = null;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}, [scene, tx, ty, tz]);
|
|
36
|
+
useLightShadow(lightRef, config.shadow);
|
|
37
|
+
useLightAnimation(lightRef, animations);
|
|
38
|
+
useLightMouseMove(lightRef, mouseMove, { lightConfig: config });
|
|
39
|
+
return (_jsx("spotLight", { ref: lightRef, color: config.color || '#ffffff', intensity: config.intensity ?? 1, angle: config.angle ?? Math.PI / 4, penumbra: config.penumbra ?? 0.1, decay: config.decay ?? 1, distance: config.distance ?? 0 }));
|
|
40
|
+
};
|
|
41
|
+
const PointLightR3F = ({ config, animations, mouseMove }) => {
|
|
42
|
+
const lightRef = useRef(null);
|
|
43
|
+
useLightShadow(lightRef, config.shadow);
|
|
44
|
+
useLightAnimation(lightRef, animations);
|
|
45
|
+
useLightMouseMove(lightRef, mouseMove, { lightConfig: config });
|
|
46
|
+
return (_jsx("pointLight", { ref: lightRef, color: config.color || '#ffffff', intensity: config.intensity ?? 1, decay: config.decay ?? 1, distance: config.distance ?? 0 }));
|
|
47
|
+
};
|
|
48
|
+
const LightObject = ({ createdObject }) => {
|
|
49
|
+
const config = createdObject.config;
|
|
50
|
+
if (!config || config.enabled === false)
|
|
51
|
+
return null;
|
|
52
|
+
const animations = createdObject.animations?.light?.animations;
|
|
53
|
+
const mouseMove = createdObject.mouseMove?.light;
|
|
54
|
+
switch (config.type) {
|
|
55
|
+
case 'directional':
|
|
56
|
+
return _jsx(DirectionalLightR3F, { config: config, animations: animations, mouseMove: mouseMove });
|
|
57
|
+
case 'spot':
|
|
58
|
+
return _jsx(SpotLightR3F, { config: config, animations: animations, mouseMove: mouseMove });
|
|
59
|
+
case 'point':
|
|
60
|
+
return _jsx(PointLightR3F, { config: config, animations: animations, mouseMove: mouseMove });
|
|
61
|
+
default:
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
export default LightObject;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { SceneLightConfig } from '@ntalmagor/3drize-core';
|
|
3
3
|
export interface LightsManagerProps {
|
|
4
|
-
|
|
5
|
-
selectedLight?: string | null;
|
|
4
|
+
config: SceneLightConfig;
|
|
6
5
|
}
|
|
7
6
|
declare const LightsManager: React.FC<LightsManagerProps>;
|
|
8
7
|
export default LightsManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightsManager.d.ts","sourceRoot":"","sources":["../../src/components/LightsManager.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"LightsManager.d.ts","sourceRoot":"","sources":["../../src/components/LightsManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAS/D,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAID,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4H/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,121 +1,104 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { useRef, useEffect
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useEffect } from 'react';
|
|
3
3
|
import { useFrame, useThree } from '@react-three/fiber';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
if (!hasHandlers)
|
|
10
|
-
return null;
|
|
11
|
-
return (_jsxs("mesh", { visible: false, position: position, onPointerEnter: (e) => { e.stopPropagation(); onEnter(lightName); }, onPointerLeave: (e) => { e.stopPropagation(); onLeave(lightName); }, children: [_jsx("sphereGeometry", { args: [size, 16, 16] }), _jsx("meshBasicMaterial", { color: lightColor, transparent: true, opacity: 0.3, depthWrite: false })] }));
|
|
12
|
-
};
|
|
13
|
-
const LightsManager = ({ lights, selectedLight = null }) => {
|
|
4
|
+
import { createSunPosition } from '@ntalmagor/3drize-core';
|
|
5
|
+
import { Color, } from 'three';
|
|
6
|
+
import { useLightAnimation } from '../hooks/useLightAnimation.js';
|
|
7
|
+
const SUN_DISTANCE = 100;
|
|
8
|
+
const LightsManager = ({ config }) => {
|
|
14
9
|
const { scene } = useThree();
|
|
15
|
-
const config = lights[0];
|
|
16
|
-
const debug = config.showHelpers || false;
|
|
17
10
|
const ambientLightRef = useRef(null);
|
|
18
|
-
const directionalLightRefs = useRef(new Map());
|
|
19
|
-
const spotLightRefs = useRef(new Map());
|
|
20
|
-
const spotLightTargets = useRef(new Map());
|
|
21
|
-
const pointLightRefs = useRef(new Map());
|
|
22
11
|
const sunLightRef = useRef(null);
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
if (
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return configs;
|
|
32
|
-
}, [config.directionalLights, config.spotLights, config.pointLights]);
|
|
33
|
-
const { handleLightEnter, handleLightLeave } = useLightHandlers({ directionalLightRefs, spotLightRefs, pointLightRefs }, allLightConfigs);
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
if (!config.directionalLights)
|
|
36
|
-
return;
|
|
37
|
-
config.directionalLights.forEach((dc) => {
|
|
38
|
-
const light = directionalLightRefs.current.get(dc.name);
|
|
39
|
-
if (!light)
|
|
40
|
-
return;
|
|
41
|
-
light.color = new Color(dc.color || '#ffffff');
|
|
42
|
-
light.intensity = dc.intensity || 1;
|
|
43
|
-
light.position.set(dc.position?.[0] ?? 0, dc.position?.[1] ?? 10, dc.position?.[2] ?? 0);
|
|
44
|
-
});
|
|
45
|
-
}, [config.directionalLights]);
|
|
46
|
-
useEffect(() => {
|
|
47
|
-
if (ambientLightRef.current && config.ambient?.color) {
|
|
48
|
-
ambientLightRef.current.color = new Color(config.ambient.color);
|
|
49
|
-
ambientLightRef.current.intensity = config.ambient.intensity || 1;
|
|
12
|
+
const ambientConfig = config.ambient;
|
|
13
|
+
const sunConfig = config.sun;
|
|
14
|
+
const followSun = config.followSun;
|
|
15
|
+
const handleAmbientLightChange = () => {
|
|
16
|
+
if (ambientLightRef.current && ambientConfig && ambientConfig.color) {
|
|
17
|
+
const light = ambientLightRef.current;
|
|
18
|
+
light.color = new Color(ambientConfig.color);
|
|
19
|
+
light.intensity = ambientConfig.intensity || 1;
|
|
50
20
|
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
21
|
+
};
|
|
22
|
+
const handleSunLightChange = () => {
|
|
23
|
+
const light = sunLightRef.current;
|
|
24
|
+
if (!light)
|
|
54
25
|
return;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
26
|
+
const elevation = sunConfig?.elevation ?? 45;
|
|
27
|
+
const azimuth = sunConfig?.azimuth ?? -90;
|
|
28
|
+
const sunPos = createSunPosition(elevation, azimuth);
|
|
29
|
+
light.position.set(sunPos.x * SUN_DISTANCE, sunPos.y * SUN_DISTANCE, sunPos.z * SUN_DISTANCE);
|
|
30
|
+
light.target.position.set(0, 0, 0);
|
|
31
|
+
light.target.updateMatrixWorld();
|
|
32
|
+
light.color = new Color(sunConfig?.color || '#ffffff');
|
|
33
|
+
light.intensity = sunConfig?.intensity ?? 1;
|
|
34
|
+
const shadow = sunConfig?.shadow;
|
|
35
|
+
// undefined shadow.enabled → treat as on; only an explicit `false` disables.
|
|
36
|
+
const shadowsEnabled = (shadow?.enabled ?? true) && (config.enableShadows ?? true);
|
|
37
|
+
light.castShadow = shadowsEnabled;
|
|
38
|
+
if (shadow) {
|
|
39
|
+
if (shadow.mapSize !== undefined) {
|
|
40
|
+
const previousMapSize = light.shadow.mapSize.x;
|
|
41
|
+
light.shadow.mapSize.set(shadow.mapSize, shadow.mapSize);
|
|
42
|
+
// Force the renderer to recreate the shadow map texture when size changes
|
|
43
|
+
if (previousMapSize !== shadow.mapSize && light.shadow.map) {
|
|
44
|
+
light.shadow.map.dispose();
|
|
45
|
+
light.shadow.map = null;
|
|
46
|
+
}
|
|
69
47
|
}
|
|
70
|
-
|
|
71
|
-
|
|
48
|
+
if (shadow.bias !== undefined)
|
|
49
|
+
light.shadow.bias = shadow.bias;
|
|
50
|
+
if (shadow.normalBias !== undefined)
|
|
51
|
+
light.shadow.normalBias = shadow.normalBias;
|
|
52
|
+
if (shadow.radius !== undefined)
|
|
53
|
+
light.shadow.radius = shadow.radius;
|
|
54
|
+
if (shadow.intensity !== undefined)
|
|
55
|
+
light.shadow.intensity = shadow.intensity;
|
|
56
|
+
const cam = light.shadow.camera;
|
|
57
|
+
if (shadow.cameraNear !== undefined)
|
|
58
|
+
cam.near = shadow.cameraNear;
|
|
59
|
+
if (shadow.cameraFar !== undefined)
|
|
60
|
+
cam.far = shadow.cameraFar;
|
|
61
|
+
if (shadow.cameraLeft !== undefined)
|
|
62
|
+
cam.left = shadow.cameraLeft;
|
|
63
|
+
if (shadow.cameraRight !== undefined)
|
|
64
|
+
cam.right = shadow.cameraRight;
|
|
65
|
+
if (shadow.cameraTop !== undefined)
|
|
66
|
+
cam.top = shadow.cameraTop;
|
|
67
|
+
if (shadow.cameraBottom !== undefined)
|
|
68
|
+
cam.bottom = shadow.cameraBottom;
|
|
69
|
+
cam.updateProjectionMatrix();
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
handleAmbientLightChange();
|
|
74
|
+
}, [ambientConfig]);
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
handleSunLightChange();
|
|
77
|
+
}, [sunConfig]);
|
|
78
|
+
// Drive keyframe animations stored on ambient / sun configs. These arrays are
|
|
79
|
+
// populated by the per-light Animation tab in LightSettings.
|
|
80
|
+
useLightAnimation(ambientLightRef, ambientConfig?.animations);
|
|
81
|
+
useLightAnimation(sunLightRef, sunConfig?.animations);
|
|
82
|
+
// directionalLight needs its target object in the scene
|
|
72
83
|
useEffect(() => {
|
|
73
|
-
|
|
84
|
+
const light = sunLightRef.current;
|
|
85
|
+
if (!light)
|
|
74
86
|
return;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
light.intensity = pc.intensity || 1;
|
|
81
|
-
light.position.set(pc.position?.[0] ?? 0, pc.position?.[1] ?? 10, pc.position?.[2] ?? 0);
|
|
82
|
-
light.decay = pc.decay || 1;
|
|
83
|
-
light.distance = pc.distance || 0;
|
|
84
|
-
});
|
|
85
|
-
}, [config.pointLights, config.enableShadows]);
|
|
87
|
+
scene.add(light.target);
|
|
88
|
+
return () => {
|
|
89
|
+
scene.remove(light.target);
|
|
90
|
+
};
|
|
91
|
+
}, [scene]);
|
|
86
92
|
useFrame((state) => {
|
|
87
|
-
if (
|
|
93
|
+
if (followSun && sunLightRef.current) {
|
|
88
94
|
const time = state.clock.getElapsedTime();
|
|
89
|
-
const
|
|
90
|
-
|
|
95
|
+
const slowRotation = time * 0.01;
|
|
96
|
+
const dynamicElevation = sunConfig?.elevation || 45;
|
|
97
|
+
const dynamicAzimuth = (sunConfig?.azimuth || -90) + slowRotation;
|
|
98
|
+
const sunPosition = createSunPosition(dynamicElevation, dynamicAzimuth);
|
|
99
|
+
sunLightRef.current.position.set(sunPosition.x * SUN_DISTANCE, sunPosition.y * SUN_DISTANCE, sunPosition.z * SUN_DISTANCE);
|
|
91
100
|
}
|
|
92
101
|
});
|
|
93
|
-
|
|
94
|
-
const hasHandlers = (lightConfig) => !!lightConfig.handlers && (!!lightConfig.handlers.onMouseMove?.enabled ||
|
|
95
|
-
!!lightConfig.handlers.onMouseEnter?.enabled ||
|
|
96
|
-
!!lightConfig.handlers.onMouseLeave?.enabled);
|
|
97
|
-
return (_jsxs(_Fragment, { children: [_jsx("ambientLight", { ref: ambientLightRef, color: config.ambient?.color, intensity: config.ambient?.intensity }), config.enabled && (_jsxs(_Fragment, { children: [config.directionalLights?.map((dc) => dc.enabled !== false ? (_jsxs("group", { children: [_jsx("directionalLight", { color: dc.color || '#ffffff', intensity: dc.intensity || 1, position: dc.position || [0, 10, 0], castShadow: true, ref: (ref) => { if (ref)
|
|
98
|
-
directionalLightRefs.current.set(dc.name, ref); } }), _jsx(LightHelperMesh, { position: dc.position || [0, 10, 0], lightName: dc.name, lightColor: dc.color || '#ffffff', hasHandlers: hasHandlers(dc), onEnter: handleLightEnter, onLeave: handleLightLeave, size: 1 })] }, dc.name)) : null), config.spotLights?.map((sc) => sc.enabled !== false ? (_jsxs("group", { children: [_jsx("spotLight", { ref: (ref) => {
|
|
99
|
-
if (ref) {
|
|
100
|
-
spotLightRefs.current.set(sc.name, ref);
|
|
101
|
-
if (!spotLightTargets.current.has(sc.name)) {
|
|
102
|
-
scene.add(ref.target);
|
|
103
|
-
spotLightTargets.current.set(sc.name, ref.target);
|
|
104
|
-
}
|
|
105
|
-
if (sc.targetPosition) {
|
|
106
|
-
ref.target.position.set(sc.targetPosition[0], sc.targetPosition[1], sc.targetPosition[2]);
|
|
107
|
-
ref.target.updateMatrixWorld();
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
else {
|
|
111
|
-
const target = spotLightTargets.current.get(sc.name);
|
|
112
|
-
if (target) {
|
|
113
|
-
scene.remove(target);
|
|
114
|
-
spotLightTargets.current.delete(sc.name);
|
|
115
|
-
}
|
|
116
|
-
spotLightRefs.current.delete(sc.name);
|
|
117
|
-
}
|
|
118
|
-
}, color: sc.color || '#ffffff', intensity: sc.intensity || 1, position: sc.position || [0, 10, 0], angle: sc.angle || Math.PI / 3, penumbra: sc.penumbra || 0, decay: sc.decay || 1, distance: sc.distance || 0, castShadow: config.enableShadows }), _jsx(LightHelperMesh, { position: sc.position || [0, 10, 0], lightName: sc.name, lightColor: sc.color || '#ffffff', hasHandlers: hasHandlers(sc), onEnter: handleLightEnter, onLeave: handleLightLeave, size: 0.8 })] }, sc.name)) : null), config.pointLights?.map((pc) => pc.enabled !== false ? (_jsxs("group", { children: [_jsx("pointLight", { ref: (ref) => { if (ref)
|
|
119
|
-
pointLightRefs.current.set(pc.name, ref); }, color: pc.color || '#ffffff', intensity: pc.intensity || 1, position: pc.position || [0, 10, 0], decay: pc.decay || 1, distance: pc.distance || 0, castShadow: config.enableShadows }), _jsx(LightHelperMesh, { position: pc.position || [0, 10, 0], lightName: pc.name, lightColor: pc.color || '#ffffff', hasHandlers: hasHandlers(pc), onEnter: handleLightEnter, onLeave: handleLightLeave, size: 0.6 })] }, pc.name)) : null)] })), debug && selectedLight && (_jsxs(_Fragment, { children: [config.directionalLights?.map((lc) => lc.enabled !== false && selectedLight === lc.name && directionalLightRefs.current.get(lc.name) ? (_jsx("primitive", { object: new DirectionalLightHelper(directionalLightRefs.current.get(lc.name), 3, 'red') }, `helper-${lc.name}`)) : null), config.spotLights?.map((lc) => lc.enabled !== false && selectedLight === lc.name && spotLightRefs.current.get(lc.name) ? (_jsx("primitive", { object: new SpotLightHelper(spotLightRefs.current.get(lc.name), 'yellow') }, `helper-${lc.name}`)) : null), config.pointLights?.map((lc) => lc.enabled !== false && selectedLight === lc.name && pointLightRefs.current.get(lc.name) ? (_jsx("primitive", { object: new PointLightHelper(pointLightRefs.current.get(lc.name), 1, 'blue') }, `helper-${lc.name}`)) : null)] }))] }));
|
|
102
|
+
return (_jsxs(_Fragment, { children: [_jsx("ambientLight", { ref: ambientLightRef, color: ambientConfig?.color, intensity: ambientConfig?.intensity, visible: ambientConfig?.enabled }), _jsx("directionalLight", { visible: sunConfig?.enabled, ref: sunLightRef, color: sunConfig?.color || '#ffffff', intensity: sunConfig?.intensity ?? 1, castShadow: config.enableShadows ?? true })] }));
|
|
120
103
|
};
|
|
121
104
|
export default LightsManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAA6D,cAAc,EAA0B,MAAM,wBAAwB,CAAC;AAEpL,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAA6D,cAAc,EAA0B,MAAM,wBAAwB,CAAC;AAEpL,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAYrD,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAC7G,CAAC;AA+CF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiLzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -10,20 +10,28 @@ import EffectsGenerator from './EffectsGenerator.js';
|
|
|
10
10
|
import ParticlesR3f from "./ParticlesR3f.js";
|
|
11
11
|
import Lines from "./Lines.js";
|
|
12
12
|
import GridHelper from "./GridHelper.js";
|
|
13
|
+
import LightObject from "./LightObject.js";
|
|
13
14
|
const EffectsLayer = ({ effects }) => effects?.length ? (_jsx(_Fragment, { children: effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) })) : null;
|
|
14
15
|
const GroupWithChildren = ({ createdObject, children, cameraSettings, onObjectReady, handleObjectClick, renderObject }) => {
|
|
15
16
|
const isGroup = createdObject.type === 'group';
|
|
16
|
-
return (_jsxs(CreatedObject, { createdObject: createdObject, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, shouldApply3driseMaterial: !isGroup, children: [!isGroup && renderObject(createdObject, handleObjectClick), children.map(childNode => (_jsx(ObjectNode, { node: childNode, cameraSettings: cameraSettings, handleObjectClick: handleObjectClick, onObjectReady: onObjectReady }, childNode.objectId)))
|
|
17
|
+
return (_jsxs(CreatedObject, { createdObject: createdObject, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, shouldApply3driseMaterial: !isGroup, children: [!isGroup && renderObject(createdObject, handleObjectClick), children.map(childNode => (_jsx(ObjectNode, { node: childNode, cameraSettings: cameraSettings, handleObjectClick: handleObjectClick, onObjectReady: onObjectReady }, childNode.objectId)))] }, createdObject.id));
|
|
17
18
|
};
|
|
18
19
|
const ObjectNode = ({ node, cameraSettings, onObjectReady, handleObjectClick }) => {
|
|
19
20
|
const { children, createdObject } = node;
|
|
20
|
-
// console.log(createdObject.meshSettings.name, createdObject.
|
|
21
|
+
// console.log(createdObject.meshSettings.name, createdObject.actions, createdObject.mouseMove)
|
|
21
22
|
// Specialized renderers for each object type
|
|
22
23
|
const renderers = useMemo(() => ({
|
|
23
24
|
group: () => null,
|
|
24
|
-
mesh: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id)),
|
|
25
|
-
model: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id)),
|
|
26
|
-
custom_primitive: (obj, cameraSettings, onObjectReady
|
|
25
|
+
mesh: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: _jsx(CustomPrimitive, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id) }, obj.id)),
|
|
26
|
+
model: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: _jsx(CustomPrimitive, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick }, obj.id) }, obj.id)),
|
|
27
|
+
// custom_primitive: (obj: CreatedObjectSettings, cameraSettings: CameraState, onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void) => (
|
|
28
|
+
// <CustomPrimitive
|
|
29
|
+
// key={obj.id}
|
|
30
|
+
// createdObject={obj}
|
|
31
|
+
// onObjectReady={onObjectReady}
|
|
32
|
+
// handleObjectClick={handleObjectClick}
|
|
33
|
+
// />
|
|
34
|
+
// ),
|
|
27
35
|
text: (obj, cameraSettings, onObjectReady) => {
|
|
28
36
|
const renderMode = obj.config?.renderMode ?? 'bitmap';
|
|
29
37
|
return (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, children: renderMode === 'text3d'
|
|
@@ -41,6 +49,7 @@ const ObjectNode = ({ node, cameraSettings, onObjectReady, handleObjectClick })
|
|
|
41
49
|
config: obj.config,
|
|
42
50
|
} }, obj.id)),
|
|
43
51
|
gallery: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, shouldApply3driseMaterial: true, children: _jsx(GalleryLayout, { createdObject: obj, handleObjectClick: handleObjectClick }) }, obj.id)),
|
|
52
|
+
light: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, shouldApply3driseMaterial: false, children: _jsx(LightObject, { createdObject: obj }) }, obj.id)),
|
|
44
53
|
}), [handleObjectClick]);
|
|
45
54
|
if (!createdObject) {
|
|
46
55
|
console.warn(`createdObject not found.`);
|
|
@@ -56,7 +65,7 @@ const ObjectNode = ({ node, cameraSettings, onObjectReady, handleObjectClick })
|
|
|
56
65
|
const renderedObject = shouldRenderAsGroup
|
|
57
66
|
? _jsx(GroupWithChildren, { createdObject: createdObject, children: children, cameraSettings: cameraSettings, onObjectReady: onObjectReady, handleObjectClick: handleObjectClick, renderObject: renderObject })
|
|
58
67
|
: createdObject.effects
|
|
59
|
-
?
|
|
68
|
+
? _jsx(_Fragment, { children: renderObject(createdObject) })
|
|
60
69
|
: renderObject(createdObject);
|
|
61
70
|
return renderedObject;
|
|
62
71
|
};
|
|
@@ -24,7 +24,7 @@ const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSet
|
|
|
24
24
|
sequences,
|
|
25
25
|
});
|
|
26
26
|
const handleObjectClickHandler = (createdObject, ref, event) => {
|
|
27
|
-
const clickInteractions = filterInteractionsByEvent(createdObject.
|
|
27
|
+
const clickInteractions = filterInteractionsByEvent(createdObject.actions, "click");
|
|
28
28
|
clickInteractions.forEach((interaction) => {
|
|
29
29
|
executeInteraction({ interaction, ref, createdObject });
|
|
30
30
|
});
|
package/dist/components/Ocean.js
CHANGED
|
@@ -20,7 +20,7 @@ const Ocean = ({ settings }) => {
|
|
|
20
20
|
const rotation = settings.rotation || [-Math.PI / 2, 0, 0];
|
|
21
21
|
const handlers = settings.handlers || {};
|
|
22
22
|
const { interpolateProperty } = useMouseHandlers();
|
|
23
|
-
useMaterialApplication(meshRef.current, settings.materialSettings);
|
|
23
|
+
useMaterialApplication(settings.visible ? meshRef.current : null, settings.materialSettings);
|
|
24
24
|
useWaterEnvironment(settings.visible ? meshRef : { current: null });
|
|
25
25
|
useWaterReflections(settings.visible ? meshRef : { current: null }, {
|
|
26
26
|
waterPosition: new THREE.Vector3(...position),
|
|
@@ -128,6 +128,6 @@ const SceneBuilder = ({ project, width = "100%", height = "100vh", style = {}, c
|
|
|
128
128
|
if (onSceneInitialized) {
|
|
129
129
|
onSceneInitialized();
|
|
130
130
|
}
|
|
131
|
-
}, children: _jsxs(Physics, { gravity: physicsSettings.gravity, paused: !physicsSettings.enabled, debug: physicsSettings.debug, children: [_jsx(LightsManager, {
|
|
131
|
+
}, children: _jsxs(Physics, { gravity: physicsSettings.gravity, paused: !physicsSettings.enabled, debug: physicsSettings.debug, children: [_jsx(LightsManager, { config: lighting[0] }), environment && _jsx(EnvironmentManager, { environment: environment, timeSettings: timeSettings }), _jsx(CameraController, { settings: camera }), environment && environment.ocean && _jsx(Ocean, { settings: environment.ocean }), _jsx(ObjectsRenderer, { cameraSettings: camera, generalObjectSettings: generalObjectSettings, createdObjects: sceneObjects, onObjectsReady: undefined, sequences: animationSequences, handleObjectClick: onObjectClick ? (object, ref, event) => onObjectClick(object, ref, event) : undefined })] }) }) }));
|
|
132
132
|
};
|
|
133
133
|
export default SceneBuilder;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkyController.d.ts","sourceRoot":"","sources":["../../src/components/SkyController.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAIxE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;CACpD;AAED,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,YAAY,EACZ,KAAY,EACZ,gBAAgB,GACjB,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"SkyController.d.ts","sourceRoot":"","sources":["../../src/components/SkyController.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAIxE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;CACpD;AAED,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,YAAY,EACZ,KAAY,EACZ,gBAAgB,GACjB,EAAE,kBAAkB,2CAkMpB;AA4BD,eAAe,aAAa,CAAC"}
|