mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 17:38:10 +00:00
Merge branch 'test' into feature/audio-sidepanel-v2
This commit is contained in:
wil committed
commit
5d98bede5f
6 files changed
+246
-89
No files matched your search
@@ -1,24 +1,35 @@
|
||||
import { useRef } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { disableHotkeyInput,enableHotkeyInput,DomLevels } from "~/pages/PageEnigma/store";
|
||||
import {
|
||||
disableHotkeyInput,
|
||||
enableHotkeyInput,
|
||||
DomLevels,
|
||||
} from "~/pages/PageEnigma/store";
|
||||
|
||||
interface InputVectorProps {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
onChange: (v: { x: number; y: number; z: number }) => void;
|
||||
increment?: number;
|
||||
}
|
||||
|
||||
export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
|
||||
export const InputVector = ({
|
||||
x,
|
||||
y,
|
||||
z,
|
||||
onChange,
|
||||
increment = 0.1,
|
||||
}: InputVectorProps) => {
|
||||
const xRef = useRef<HTMLInputElement>(null);
|
||||
const yRef = useRef<HTMLInputElement>(null);
|
||||
const zRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const inputCommonClasses =
|
||||
"relative w-14 h-7 rounded-r-lg bg-brand-secondary p-3 text-sm text-white transition-all duration-150 ease-in-out outline-none -outline-offset-2";
|
||||
"relative h-6 rounded-r-lg bg-brand-secondary p-2 text-sm text-white transition-all duration-100 ease-in-out outline-none -outline-offset-2 text-end w-full hover:cursor-e-resize hover:bg-brand-secondary-900";
|
||||
|
||||
const wrapperCommonClasses =
|
||||
"flex items-center before:inline-block before:w-10 before:h-10 before:bg-brand-primary before:text-white before:rounded-l-lg before:h-7 before:w-5 before:text-center before:justify-center before:items-center before:font-semibold before:flex before:align-middle before:leading-8 text-xs";
|
||||
"relative flex items-center before:inline-block before:h-6 before:bg-brand-primary before:text-white before:rounded-l-lg before:w-1.5 before:text-center before:justify-center before:items-center before:font-semibold before:flex before:align-middle before:leading-8 text-xs";
|
||||
|
||||
function handleOnChange() {
|
||||
const newVector = {
|
||||
@@ -28,14 +39,67 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
|
||||
};
|
||||
onChange(newVector);
|
||||
}
|
||||
|
||||
const blurAllInputs = () => {
|
||||
xRef.current?.blur();
|
||||
yRef.current?.blur();
|
||||
zRef.current?.blur();
|
||||
};
|
||||
|
||||
// For dragging the input value to increment/decrement
|
||||
const handleMouseDown = (
|
||||
e: React.MouseEvent,
|
||||
ref: React.RefObject<HTMLInputElement>,
|
||||
) => {
|
||||
e.preventDefault();
|
||||
blurAllInputs();
|
||||
let isDragging = false;
|
||||
let previousMousePosition = e.clientX;
|
||||
|
||||
const mouseMoveHandler = (e: MouseEvent) => {
|
||||
isDragging = true;
|
||||
const currentMousePosition = e.clientX;
|
||||
const direction = currentMousePosition > previousMousePosition ? 1 : -1;
|
||||
previousMousePosition = currentMousePosition;
|
||||
|
||||
const currentValue = Number(ref.current?.value) || 0;
|
||||
const newValue = currentValue + direction * increment;
|
||||
|
||||
if (ref.current) {
|
||||
ref.current.value = newValue.toFixed(1);
|
||||
ref.current.blur();
|
||||
}
|
||||
|
||||
onChange({
|
||||
x: Number(xRef.current?.value) || 0,
|
||||
y: Number(yRef.current?.value) || 0,
|
||||
z: Number(zRef.current?.value) || 0,
|
||||
});
|
||||
};
|
||||
|
||||
const mouseUpHandler = () => {
|
||||
document.removeEventListener("mousemove", mouseMoveHandler);
|
||||
document.removeEventListener("mouseup", mouseUpHandler);
|
||||
if (!isDragging) {
|
||||
ref.current?.focus();
|
||||
ref.current?.select();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousemove", mouseMoveHandler);
|
||||
document.addEventListener("mouseup", mouseUpHandler);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
(e.currentTarget as HTMLInputElement).blur(); // Unfocus the input field on pressing Enter
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full justify-between gap-2">
|
||||
<span
|
||||
className={twMerge(
|
||||
wrapperCommonClasses,
|
||||
"before:bg-axis-x before:content-['X']",
|
||||
)}
|
||||
>
|
||||
<div className="flex w-full flex-col justify-between gap-1.5">
|
||||
<span className={twMerge(wrapperCommonClasses, "before:bg-axis-x")}>
|
||||
<div className="absolute left-3.5 z-10 font-semibold">X</div>
|
||||
<input
|
||||
className={twMerge(inputCommonClasses, "focus:outline-axis-x")}
|
||||
type="number"
|
||||
@@ -44,14 +108,12 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
|
||||
value={x}
|
||||
onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
|
||||
onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
|
||||
onMouseDown={(e) => handleMouseDown(e, xRef)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className={twMerge(
|
||||
wrapperCommonClasses,
|
||||
"before:bg-axis-y before:content-['Y']",
|
||||
)}
|
||||
>
|
||||
<span className={twMerge(wrapperCommonClasses, "before:bg-axis-y")}>
|
||||
<div className="absolute left-3.5 z-10 font-semibold">Y</div>
|
||||
<input
|
||||
className={twMerge(inputCommonClasses, "focus:outline-axis-y")}
|
||||
type="number"
|
||||
@@ -60,14 +122,12 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
|
||||
value={y}
|
||||
onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
|
||||
onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
|
||||
onMouseDown={(e) => handleMouseDown(e, yRef)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className={twMerge(
|
||||
wrapperCommonClasses,
|
||||
"before:bg-axis-z before:content-['Z']",
|
||||
)}
|
||||
>
|
||||
<span className={twMerge(wrapperCommonClasses, "before:bg-axis-z")}>
|
||||
<div className="absolute left-3.5 z-10 font-semibold">Z</div>
|
||||
<input
|
||||
className={twMerge(inputCommonClasses, "focus:outline-axis-z")}
|
||||
type="number"
|
||||
@@ -76,6 +136,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
|
||||
value={z}
|
||||
onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
|
||||
onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
|
||||
onMouseDown={(e) => handleMouseDown(e, zRef)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useContext, useEffect } from "react";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import {
|
||||
faArrowRightArrowLeft,
|
||||
faChevronDown,
|
||||
faChevronUp,
|
||||
faCube,
|
||||
faTrash,
|
||||
} from "@fortawesome/pro-solid-svg-icons";
|
||||
@@ -19,9 +20,30 @@ import Queue from "~/pages/PageEnigma/Queue/Queue";
|
||||
import { toTimelineActions } from "../../Queue/toTimelineActions";
|
||||
import { QueueKeyframe } from "~/pages/PageEnigma/models";
|
||||
|
||||
// TODO this will be useful later to fix the bug on leading zeros
|
||||
const formatNumber = (input: string): number => {
|
||||
// Convert the input string to a number to remove leading zeros
|
||||
const num = parseFloat(input);
|
||||
// Convert the number back to a string with at least two decimal places
|
||||
const str = num.toFixed(2);
|
||||
return parseFloat(str);
|
||||
}
|
||||
|
||||
// console.log(formatNumber("000123.4567")); // Outputs: "123.46"
|
||||
// console.log(formatNumber("000123.4")); // Outputs: "123.40"
|
||||
// console.log(formatNumber("000123")); // Outputs: "123.00"
|
||||
// console.log(formatNumber("0000.00")); // Outputs: "0.00"
|
||||
// console.log(formatNumber("0000.000001")); // Outputs: "0.00"
|
||||
|
||||
export const ControlPanelSceneObject = () => {
|
||||
const editorEngine = useContext(EngineContext);
|
||||
const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
|
||||
const toggleCollapse = () => {
|
||||
setIsCollapsed(!isCollapsed);
|
||||
};
|
||||
|
||||
|
||||
const position =
|
||||
appUiState.controlPanel.currentSceneObject?.objectVectors?.position;
|
||||
@@ -31,6 +53,7 @@ export const ControlPanelSceneObject = () => {
|
||||
appUiState.controlPanel.currentSceneObject?.objectVectors?.scale;
|
||||
const currentSceneObject = appUiState.controlPanel.currentSceneObject;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// TODO this causes a subtle bug because it renders way too many times.
|
||||
if (!appUiState.controlPanel.currentSceneObject) {
|
||||
@@ -169,63 +192,73 @@ export const ControlPanelSceneObject = () => {
|
||||
show={appUiState?.controlPanel.isShowing}
|
||||
className={[
|
||||
"absolute bottom-0 right-0",
|
||||
"m-4 flex h-fit w-fit flex-col gap-2",
|
||||
"m-4 flex h-fit w-56 flex-col gap-2",
|
||||
"rounded-lg",
|
||||
"border border-ui-panel-border",
|
||||
"bg-ui-panel p-4 text-white",
|
||||
"bg-ui-panel p-3.5 text-white",
|
||||
].join(" ")}
|
||||
enter="transition-opacity duration-100"
|
||||
enter="transition-opacity duration-150"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition-opacity duration-100"
|
||||
leave="transition-opacity duration-150"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0">
|
||||
<div className="flex justify-between">
|
||||
<div className="mb-1 flex justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FontAwesomeIcon icon={faCube} />
|
||||
<p className="font-semibold">
|
||||
<p className="max-w-36 truncate font-semibold">
|
||||
{appUiState.controlPanel.currentSceneObject.object_name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs font-medium opacity-60">
|
||||
<FontAwesomeIcon icon={faArrowRightArrowLeft} />
|
||||
<p>Swap Object</p>
|
||||
<FontAwesomeIcon
|
||||
icon={isCollapsed ? faChevronUp : faChevronDown}
|
||||
onClick={toggleCollapse}
|
||||
className="cursor-pointer opacity-75 transition-opacity duration-100 ease-in-out hover:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
show={!isCollapsed}
|
||||
enter="transition-all duration-200 ease-in-out"
|
||||
enterFrom="opacity-0 max-h-0"
|
||||
enterTo="opacity-100 max-h-96"
|
||||
leave="transition-all duration-200 ease-in-out"
|
||||
leaveFrom="opacity-100 max-h-96"
|
||||
leaveTo="opacity-0 max-h-0"
|
||||
className={"flex flex-col gap-2 overflow-y-auto"}>
|
||||
<div className="flex flex-col gap-1">
|
||||
<H5>Location</H5>
|
||||
<InputVector
|
||||
x={position?.x || 0}
|
||||
y={position?.y || 0}
|
||||
z={position?.z || 0}
|
||||
onChange={handlePositionChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="h-1" />
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<H5>Position</H5>
|
||||
<InputVector
|
||||
x={position?.x || 0}
|
||||
y={position?.y || 0}
|
||||
z={position?.z || 0}
|
||||
onChange={handlePositionChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<H5>Rotation</H5>
|
||||
<InputVector
|
||||
x={rotation?.x || 0}
|
||||
y={rotation?.y || 0}
|
||||
z={rotation?.z || 0}
|
||||
onChange={handleRotationChange}
|
||||
increment={1}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<H5>Rotation</H5>
|
||||
<InputVector
|
||||
x={rotation?.x || 0}
|
||||
y={rotation?.y || 0}
|
||||
z={rotation?.z || 0}
|
||||
onChange={handleRotationChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<H5>Scale</H5>
|
||||
<InputVector
|
||||
x={scale?.x || 0}
|
||||
y={scale?.y || 0}
|
||||
z={scale?.z || 0}
|
||||
onChange={handleScaleChange}
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<H5>Scale</H5>
|
||||
<InputVector
|
||||
x={scale?.x || 0}
|
||||
y={scale?.y || 0}
|
||||
z={scale?.z || 0}
|
||||
onChange={handleScaleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="h-2" />
|
||||
<div className="flex gap-2">
|
||||
<div className="mt-2 flex gap-1.5">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="grow"
|
||||
|
||||
@@ -110,6 +110,8 @@ class Editor {
|
||||
last_scrub: number;
|
||||
record_stream: any | undefined;
|
||||
recorder: MediaRecorder | undefined;
|
||||
|
||||
selectedCanvas: boolean;
|
||||
// Default params.
|
||||
|
||||
constructor() {
|
||||
@@ -181,6 +183,7 @@ class Editor {
|
||||
this.last_scrub = 0;
|
||||
this.frames = 0;
|
||||
this.last_selected_sum = 0;
|
||||
this.selectedCanvas = false;
|
||||
// Audio Engine Test.
|
||||
|
||||
this.render_width = 1280;
|
||||
@@ -250,27 +253,34 @@ class Editor {
|
||||
// Find the container element
|
||||
const container = document.getElementById("video-scene-container");
|
||||
|
||||
if(container == null) { return; }
|
||||
if (container == null) { return; }
|
||||
|
||||
// Use the container's dimensions
|
||||
const width = container.offsetWidth;
|
||||
const height = container.offsetHeight;
|
||||
|
||||
// Sets up camera and base position.
|
||||
this.camera = new THREE.PerspectiveCamera(70, width / height, 0.15, 30);
|
||||
this.camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 200);
|
||||
this.camera.position.z = 3;
|
||||
this.camera.position.y = 3;
|
||||
this.camera.position.x = -3;
|
||||
|
||||
this.camera.layers.enable(0);
|
||||
this.camera.layers.enable(1); // This camera does not see this layer
|
||||
|
||||
|
||||
this.timeline.camera = this.camera;
|
||||
|
||||
this.render_camera = new THREE.PerspectiveCamera(
|
||||
70,
|
||||
width / height,
|
||||
0.15,
|
||||
30,
|
||||
0.01,
|
||||
200,
|
||||
);
|
||||
|
||||
|
||||
this.render_camera.layers.disable(1); // This camera does not see this layer );
|
||||
|
||||
// Base WebGL render and clock for delta time.
|
||||
this.renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
@@ -314,24 +324,27 @@ class Editor {
|
||||
this.renderer.domElement,
|
||||
);
|
||||
|
||||
this.orbitControls.mouseButtons = {
|
||||
MIDDLE: THREE.MOUSE.ROTATE,
|
||||
RIGHT: THREE.MOUSE.PAN,
|
||||
}; // Blender Style
|
||||
// this.orbitControls.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }; // Standard
|
||||
//this.orbitControls.mouseButtons = {
|
||||
// MIDDLE: THREE.MOUSE.ROTATE,
|
||||
// RIGHT: THREE.MOUSE.PAN,
|
||||
//}; // Blender Style
|
||||
this.orbitControls.mouseButtons = {
|
||||
LEFT: THREE.MOUSE.ROTATE,
|
||||
MIDDLE: THREE.MOUSE.DOLLY,
|
||||
RIGHT: THREE.MOUSE.PAN }; // Standard
|
||||
|
||||
this.control = new TransformControls(this.camera, this.renderer.domElement);
|
||||
this.control.space = "local"; // Local transformation mode
|
||||
// .space = 'world'; // Global mode
|
||||
|
||||
this.control.setScaleSnap(0.05);
|
||||
this.control.setTranslationSnap(0.05);
|
||||
this.control.setRotationSnap(0.05);
|
||||
this.control.setScaleSnap(0.01);
|
||||
this.control.setTranslationSnap(0.01);
|
||||
this.control.setRotationSnap(0.01);
|
||||
console.log("Control Sensitivity:", this.control.sensitivity);
|
||||
|
||||
// OnClick and MouseMove events.
|
||||
window.addEventListener("mousemove", this.onMouseMove.bind(this), false);
|
||||
window.addEventListener("click", this.onMouseClick.bind(this), false);
|
||||
window.addEventListener("keydown", this.onkeydown.bind(this), false);
|
||||
// Base control and debug stuff remove debug in prod.
|
||||
if (this.control == undefined) {
|
||||
return;
|
||||
@@ -348,6 +361,10 @@ class Editor {
|
||||
});
|
||||
this.control.setSize(0.5); // Good default value for visuals.
|
||||
this.raycaster = new THREE.Raycaster();
|
||||
// Configure raycaster to check both layers
|
||||
this.raycaster.layers.set(0); // Enable default layer
|
||||
this.raycaster.layers.enable(1); // Also check objects on the custom layer
|
||||
|
||||
this.mouse = new THREE.Vector2();
|
||||
this.activeScene.scene.add(this.control);
|
||||
// Resets canvas size.
|
||||
@@ -395,9 +412,11 @@ class Editor {
|
||||
this.orbitControls.enabled = true;
|
||||
this.cameraViewControls.enabled = false;
|
||||
}
|
||||
this.selectedCanvas = true;
|
||||
} else {
|
||||
this.orbitControls.enabled = false;
|
||||
this.cameraViewControls.enabled = false;
|
||||
this.selectedCanvas = false;
|
||||
}
|
||||
this.cameraViewControls?.reset();
|
||||
}
|
||||
@@ -419,7 +438,7 @@ class Editor {
|
||||
console.log(result);
|
||||
}
|
||||
|
||||
public async testTestTimelineEvents() {}
|
||||
public async testTestTimelineEvents() { }
|
||||
|
||||
public async loadScene(scene_media_token: string) {
|
||||
this.dispatchAppUiState({
|
||||
@@ -570,6 +589,11 @@ class Editor {
|
||||
type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
|
||||
});
|
||||
this.updateSelectedUI();
|
||||
if (this.activeScene.hot_items) {
|
||||
this.activeScene.hot_items.forEach((element) => {
|
||||
element.visible = false;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.camera.position.copy(this.last_cam_pos);
|
||||
this.camera.rotation.copy(this.last_cam_rot);
|
||||
@@ -660,9 +684,9 @@ class Editor {
|
||||
|
||||
this.saoPass = new SAOPass(this.activeScene.scene, this.camera);
|
||||
|
||||
this.saoPass.params.saoBias = 3.1;
|
||||
this.saoPass.params.saoBias = 4.1;
|
||||
this.saoPass.params.saoIntensity = 1.0;
|
||||
this.saoPass.params.saoScale = 6.0;
|
||||
this.saoPass.params.saoScale = 32.0;
|
||||
this.saoPass.params.saoKernelRadius = 5.0;
|
||||
this.saoPass.params.saoMinResolution = 0.0;
|
||||
|
||||
@@ -928,10 +952,10 @@ class Editor {
|
||||
audioSegment,
|
||||
"-filter_complex",
|
||||
"[1:a]adelay=" +
|
||||
startTime * 1000 +
|
||||
"|" +
|
||||
startTime * 1000 +
|
||||
"[a1];[0:a][a1]amix=inputs=2[a]",
|
||||
startTime * 1000 +
|
||||
"|" +
|
||||
startTime * 1000 +
|
||||
"[a1];[0:a][a1]amix=inputs=2[a]",
|
||||
"-map",
|
||||
"[a]",
|
||||
`${itteration}final_tmp.wav`,
|
||||
@@ -1325,6 +1349,19 @@ class Editor {
|
||||
}
|
||||
}
|
||||
|
||||
onkeydown(event: any) {
|
||||
if (event.key === 'f' && this.selected && this.orbitControls) {
|
||||
this.orbitControls.target.copy(this.selected.position);
|
||||
this.orbitControls.maxDistance = 4;
|
||||
this.orbitControls.update();
|
||||
this.orbitControls.maxDistance = 999;
|
||||
} else if (event.key === ' ') {
|
||||
if(this.rendering == false && this.switchPreviewToggle == false && this.selectedCanvas){
|
||||
this.startPlayback();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sets new mouse location usually used in raycasts.
|
||||
onMouseMove(event: any) {
|
||||
const rect = this.canvReference.getBoundingClientRect();
|
||||
|
||||
@@ -75,6 +75,7 @@ class Scene {
|
||||
obj.receiveShadow = false;
|
||||
obj.castShadow = false;
|
||||
obj.userData['media_id'] = "Point::" + keyframe_uuid;
|
||||
obj.layers.set(1); // Enable default layer
|
||||
if (this.hot_items != undefined) {
|
||||
this.hot_items.push(obj);
|
||||
}
|
||||
@@ -105,6 +106,7 @@ class Scene {
|
||||
cam_obj.userData["name"] = "::CAM::";
|
||||
cam_obj.name = "::CAM::";
|
||||
cam_obj.position.set(0, 0.6, 1.5);
|
||||
cam_obj.layers.set(1);
|
||||
this.scene.add(cam_obj);
|
||||
});
|
||||
}
|
||||
@@ -140,6 +142,7 @@ class Scene {
|
||||
glb.scene.children.forEach(child => {
|
||||
child.traverse((c: THREE.Object3D) => {
|
||||
if (c instanceof THREE.Mesh) {
|
||||
c.material.side = THREE.FrontSide;
|
||||
c.material.metalness = 0.0;
|
||||
c.material.specular = 0.5;
|
||||
c.material.shininess = 0.0;
|
||||
@@ -155,6 +158,8 @@ class Scene {
|
||||
child.userData["metalness"] = 0.0;
|
||||
child.userData["shininess"] = 0.5;
|
||||
child.userData["specular"] = 0.5;
|
||||
child.layers.enable(0);
|
||||
child.layers.enable(1);
|
||||
if (auto_add) { this.scene.add(child); }
|
||||
resolve(child);
|
||||
});
|
||||
@@ -251,6 +256,7 @@ class Scene {
|
||||
const size = 25;
|
||||
const divisions = 50;
|
||||
this.gridHelper = new THREE.GridHelper(size, divisions, new THREE.Color("rgb(199,195,195)"), new THREE.Color("rgb(161,157,157)"));
|
||||
this.gridHelper.layers.set(1); // Enable default layer
|
||||
this.scene.add(this.gridHelper);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -290,7 +290,10 @@ export class TimeLine {
|
||||
),
|
||||
);
|
||||
|
||||
this.scene.createPoint(data_json["position"], data_json["keyframe_uuid"]);
|
||||
let point = this.scene.createPoint(data_json["position"], data_json["keyframe_uuid"]);
|
||||
if(this.editorEngine.camera_person_mode){
|
||||
point.visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
public deleteObject(object_uuid: string) {
|
||||
@@ -404,11 +407,13 @@ export class TimeLine {
|
||||
const media_id = data["data"]["media_id"];
|
||||
const offset = data["data"]["offset"];
|
||||
const length = data["data"]["length"] + offset;
|
||||
const clip_uuid = data['data']['clip_uuid'];
|
||||
|
||||
for (const element of this.timeline_items) {
|
||||
if (
|
||||
element.media_id === media_id &&
|
||||
element.object_uuid === object_uuid
|
||||
element.object_uuid === object_uuid &&
|
||||
element.clip_uuid == clip_uuid
|
||||
) {
|
||||
element.length = length;
|
||||
element.offset = offset;
|
||||
@@ -421,12 +426,14 @@ export class TimeLine {
|
||||
const object_uuid = data["data"]["object_uuid"];
|
||||
const media_id = data["data"]["media_id"];
|
||||
const type = data["type"];
|
||||
const clip_uuid = data['data']['clip_uuid'];
|
||||
|
||||
for (let i = 0; i < this.timeline_items.length; i++) {
|
||||
const element = this.timeline_items[i];
|
||||
if (
|
||||
element.media_id === media_id &&
|
||||
element.object_uuid === object_uuid
|
||||
element.object_uuid === object_uuid &&
|
||||
element.clip_uuid == clip_uuid
|
||||
) {
|
||||
this.timeline_items.splice(i, 1);
|
||||
break;
|
||||
|
||||
@@ -18,6 +18,18 @@
|
||||
border: 3px solid gray;
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
color: #fff;
|
||||
|
||||
Reference in new issue
Block a user