diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts index 9e3dbfa19..425afbbfe 100644 --- a/src/extensions/core/load3d.ts +++ b/src/extensions/core/load3d.ts @@ -123,8 +123,6 @@ app.registerExtension({ const material = node.widgets.find((w: IWidget) => w.name === 'material') - const bgColor = node.widgets.find((w: IWidget) => w.name === 'bg_color') - const lightIntensity = node.widgets.find( (w: IWidget) => w.name === 'light_intensity' ) @@ -143,7 +141,6 @@ app.registerExtension({ 'input', modelWidget, material, - bgColor, lightIntensity, upDirection, fov, @@ -257,14 +254,6 @@ app.registerExtension({ if (modelWidget) { modelWidget.value = '' } - - const speedSelect = node.widgets?.find( - (w: IWidget) => w.name === 'animation_speed' - ) - - if (speedSelect) { - speedSelect.value = '1' - } }) return { @@ -297,8 +286,6 @@ app.registerExtension({ const material = node.widgets.find((w: IWidget) => w.name === 'material') - const bgColor = node.widgets.find((w: IWidget) => w.name === 'bg_color') - const lightIntensity = node.widgets.find( (w: IWidget) => w.name === 'light_intensity' ) @@ -307,17 +294,6 @@ app.registerExtension({ (w: IWidget) => w.name === 'up_direction' ) - const speedSelect = node.widgets.find( - (w: IWidget) => w.name === 'animation_speed' - ) - - speedSelect.callback = (value: string) => { - const load3d = containerToLoad3D.get(container.id) as Load3dAnimation - if (load3d) { - load3d.setAnimationSpeed(parseFloat(value)) - } - } - const fov = node.widgets.find((w: IWidget) => w.name === 'fov') let cameraState = node.properties['Camera Info'] @@ -328,7 +304,6 @@ app.registerExtension({ 'input', modelWidget, material, - bgColor, lightIntensity, upDirection, fov, @@ -439,8 +414,6 @@ app.registerExtension({ const material = node.widgets.find((w: IWidget) => w.name === 'material') - const bgColor = node.widgets.find((w: IWidget) => w.name === 'bg_color') - const lightIntensity = node.widgets.find( (w: IWidget) => w.name === 'light_intensity' ) @@ -474,7 +447,6 @@ app.registerExtension({ 'output', modelWidget, material, - bgColor, lightIntensity, upDirection, fov @@ -566,8 +538,6 @@ app.registerExtension({ const material = node.widgets.find((w: IWidget) => w.name === 'material') - const bgColor = node.widgets.find((w: IWidget) => w.name === 'bg_color') - const lightIntensity = node.widgets.find( (w: IWidget) => w.name === 'light_intensity' ) @@ -576,17 +546,6 @@ app.registerExtension({ (w: IWidget) => w.name === 'up_direction' ) - const speedSelect = node.widgets.find( - (w: IWidget) => w.name === 'animation_speed' - ) - - speedSelect.callback = (value: string) => { - const load3d = containerToLoad3D.get(container.id) as Load3dAnimation - if (load3d) { - load3d.setAnimationSpeed(parseFloat(value)) - } - } - const fov = node.widgets.find((w: IWidget) => w.name === 'fov') const onExecuted = node.onExecuted @@ -612,7 +571,6 @@ app.registerExtension({ 'output', modelWidget, material, - bgColor, lightIntensity, upDirection, fov diff --git a/src/extensions/core/load3d/Load3DConfiguration.ts b/src/extensions/core/load3d/Load3DConfiguration.ts index 35e9ea834..089123baf 100644 --- a/src/extensions/core/load3d/Load3DConfiguration.ts +++ b/src/extensions/core/load3d/Load3DConfiguration.ts @@ -11,7 +11,6 @@ class Load3DConfiguration { loadFolder: 'input' | 'output', modelWidget: IWidget, material: IWidget, - bgColor: IWidget, lightIntensity: IWidget, upDirection: IWidget, fov: IWidget, @@ -25,7 +24,6 @@ class Load3DConfiguration { postModelUpdateFunc ) this.setupMaterial(material) - this.setupBackground(bgColor) this.setupLighting(lightIntensity) this.setupDirection(upDirection) this.setupCamera(fov) @@ -58,13 +56,6 @@ class Load3DConfiguration { ) } - private setupBackground(bgColor: IWidget) { - bgColor.callback = (value: string) => { - this.load3d.setBackgroundColor(value) - } - this.load3d.setBackgroundColor(bgColor.value as string) - } - private setupLighting(lightIntensity: IWidget) { lightIntensity.callback = (value: number) => { this.load3d.setLightIntensity(value) @@ -99,6 +90,10 @@ class Load3DConfiguration { const showGrid = this.load3d.loadNodeProperty('Show Grid', true) this.load3d.toggleGrid(showGrid) + + const bgColor = this.load3d.loadNodeProperty('Background Color', '#282828') + + this.load3d.setBackgroundColor(bgColor) } private createModelUpdateHandler( diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts index 216fbdd20..feeb60919 100644 --- a/src/extensions/core/load3d/Load3d.ts +++ b/src/extensions/core/load3d/Load3d.ts @@ -44,6 +44,7 @@ class Load3d { cameraSwitcherContainer: HTMLDivElement = {} as HTMLDivElement gridSwitcherContainer: HTMLDivElement = {} as HTMLDivElement node: LGraphNode = {} as LGraphNode + bgColorInput: HTMLInputElement = {} as HTMLInputElement constructor(container: Element | HTMLElement) { this.scene = new THREE.Scene() @@ -127,6 +128,8 @@ class Load3d { this.createCameraSwitcher(container) + this.createColorPicker(container) + this.handleResize() this.startAnimation() @@ -143,7 +146,11 @@ class Load3d { } loadNodeProperty(name: string, defaultValue: any) { - if (!this.node || !(name in this.node.properties)) { + if ( + !this.node || + !this.node.properties || + !(name in this.node.properties) + ) { return defaultValue } return this.node.properties[name] @@ -275,6 +282,47 @@ class Load3d { container.appendChild(this.cameraSwitcherContainer) } + createColorPicker(container: Element | HTMLElement) { + const colorPickerContainer = document.createElement('div') + colorPickerContainer.style.position = 'absolute' + colorPickerContainer.style.top = '53px' + colorPickerContainer.style.left = '3px' + colorPickerContainer.style.width = '20px' + colorPickerContainer.style.height = '20px' + colorPickerContainer.style.cursor = 'pointer' + colorPickerContainer.style.alignItems = 'center' + colorPickerContainer.style.justifyContent = 'center' + colorPickerContainer.title = 'Background Color' + + const colorInput = document.createElement('input') + colorInput.type = 'color' + colorInput.style.opacity = '0' + colorInput.style.position = 'absolute' + colorInput.style.width = '100%' + colorInput.style.height = '100%' + colorInput.style.cursor = 'pointer' + + const colorIcon = document.createElement('div') + colorIcon.innerHTML = ` + + + + + + ` + + colorInput.addEventListener('input', (event) => { + const color = (event.target as HTMLInputElement).value + this.setBackgroundColor(color) + this.storeNodeProperty('Background Color', color) + }) + + this.bgColorInput = colorInput + colorPickerContainer.appendChild(colorInput) + colorPickerContainer.appendChild(colorIcon) + container.appendChild(colorPickerContainer) + } + setFOV(fov: number) { if (this.activeCamera === this.perspectiveCamera) { this.perspectiveCamera.fov = fov @@ -939,6 +987,10 @@ class Load3d { setBackgroundColor(color: string) { this.renderer.setClearColor(new THREE.Color(color)) this.renderer.render(this.scene, this.activeCamera) + + if (this.bgColorInput) { + this.bgColorInput.value = color + } } } diff --git a/src/extensions/core/load3d/Load3dAnimation.ts b/src/extensions/core/load3d/Load3dAnimation.ts index a5f264dc5..91f5ee0cd 100644 --- a/src/extensions/core/load3d/Load3dAnimation.ts +++ b/src/extensions/core/load3d/Load3dAnimation.ts @@ -12,11 +12,13 @@ class Load3dAnimation extends Load3d { animationSpeed: number = 1.0 playPauseContainer: HTMLDivElement = {} as HTMLDivElement animationSelect: HTMLSelectElement = {} as HTMLSelectElement + speedSelect: HTMLSelectElement = {} as HTMLSelectElement constructor(container: Element | HTMLElement) { super(container) this.createPlayPauseButton(container) this.createAnimationList(container) + this.createSpeedSelect(container) } createAnimationList(container: Element | HTMLElement) { @@ -122,6 +124,52 @@ class Load3dAnimation extends Load3d { this.playPauseContainer.style.display = 'none' } + createSpeedSelect(container: Element | HTMLElement) { + this.speedSelect = document.createElement('select') + Object.assign(this.speedSelect.style, { + position: 'absolute', + top: '3px', + left: '50%', + transform: 'translateX(-75px)', + width: '60px', + height: '20px', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + color: 'white', + border: 'none', + borderRadius: '4px', + fontSize: '12px', + padding: '0 8px', + cursor: 'pointer', + display: 'none', + outline: 'none' + }) + + const speeds = [0.1, 0.5, 1, 1.5, 2] + speeds.forEach((speed) => { + const option = document.createElement('option') + option.value = speed.toString() + option.text = `${speed}x` + option.selected = speed === 1 + this.speedSelect.appendChild(option) + }) + + this.speedSelect.addEventListener('mouseenter', () => { + this.speedSelect.style.backgroundColor = 'rgba(0, 0, 0, 0.5)' + }) + + this.speedSelect.addEventListener('mouseleave', () => { + this.speedSelect.style.backgroundColor = 'rgba(0, 0, 0, 0.3)' + }) + + this.speedSelect.addEventListener('change', (event) => { + const select = event.target as HTMLSelectElement + const newSpeed = parseFloat(select.value) + this.setAnimationSpeed(newSpeed) + }) + + container.appendChild(this.speedSelect) + } + protected async setupModel(model: THREE.Object3D) { await super.setupModel(model) @@ -161,10 +209,12 @@ class Load3dAnimation extends Load3d { if (this.animationClips.length > 0) { this.playPauseContainer.style.display = 'block' this.animationSelect.style.display = 'block' + this.speedSelect.style.display = 'block' this.updateAnimationList() } else { this.playPauseContainer.style.display = 'none' this.animationSelect.style.display = 'none' + this.speedSelect.style.display = 'none' } } @@ -233,6 +283,11 @@ class Load3dAnimation extends Load3d { this.animationSelect.style.display = 'none' this.animationSelect.innerHTML = '' } + + if (this.speedSelect) { + this.speedSelect.style.display = 'none' + this.speedSelect.value = '1' + } } getAnimationNames(): string[] {