[3d] move change background color button (#2365)

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

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(

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 = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+        <rect x="3" y="3" width="18" height="18" rx="2"/>
+        <path d="M12 3v18"/>
+        <path d="M3 12h18"/>
+      </svg>
+    `
+
+    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
+    }
   }
 }
 

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[] {