纹理几何在照明更新时丢失图像

Question

在这段代码中，我正在创建一个带有 360 度图像纹理天空和一个小信息图标的场景，当鼠标悬停时该图标会变亮。场景以默认照明开始，当图标悬停在不同的光源上时，会添加一个不同的光源。当我尝试在鼠标移出场景时移除照明对象时，添加球体光之前的原始照明不会恢复。当鼠标离开并且图标的图像纹理不再可见时，图标会完全变暗。谁能解释我应该使用图标上的什么照明布置或属性来防止它失去可见性？

下面的代码是场景创建的src。

AFRAME.registerComponent('mlisten',{
  init:function () {
    let el = this.el
    this.el.addEventListener('mouseenter',function() {
      let scene = document.querySelector("a-scene")
      let light = document.createElement("a-entity")
      light.id ="backlight"
      light.setAttribute("position","0 10 0")
      light.setAttribute("geometry",{
        primitive:"sphere",
        radius:"1"
      })
      light.setAttribute("material",{
        shader:"flat"
      })
      light.setAttribute("light",{
        type:"point",
        color:"#FFF"
      })
      scene.append(light)
    })
    this.el.addEventListener("mouseleave",function() {
      // remove light
      document.querySelector("#backlight").remove()
    })
  }
})




let basicScene = (room) => {
  let ob = {}
  ob.pointers =[] // this is the points of interest array will hold the objects
  ob.image = {} // structure will be name and path
  // the generic scene creation calls for aframe
  ob.create = ()=> {
    let scene = document.createElement("a-scene")
    scene.setAttribute("cursor","rayOrigin: mouse")
    // add rayOrigin mouse
    console.log("made scene")
    document.body.append(scene)
    let box = document.createElement("a-circle")
    box.setAttribute("position","0 0 -3")
    box.setAttribute("src","./resources/info.png")
    //box.setAttribute("geometry","primitive: circle; radius: 3")
    box.setAttribute("mlisten","")
    scene.append(box)
    //normal light

    scene.add(light)
    let sky = document.createElement("a-sky")

    let roomsImages = {
      "2181":"./resources/360-equirectangular.jpg",
      "2179":"./resources/gear-360_overview_bg.jpg",
      "2175":"./resources/DSCN0198.JPG",
      "2173":"./resources/Prague_Getty.jpg",
      "2169":"./resources/abu_06_big.jpg",
      "1347":"./resources/Venice.Still001.jpeg",
      "2171":"./resources/mountainscape-360_6.jpg",
      "2347":"./resources/01633841_20181218_Ocean_Terminal_Deck________360_____Tsim_Sha_Tsui__HK-1024x512.jpg",
      "2351":"./resources/01617830_ShibuyaCrossingView_360VR8K_h265-1024x512.jpg",
      "2349":"./resources/2A5E707000000578-3154678-image-a-27_1436438111376.jpg",
      "2353":"./resources/30279168385_925a9650ce_o.jpg"
    }
    sky.setAttribute("src",roomsImages[room])
    scene.append(sky)
    // just set static placed move and info icons
    // could include all the possible scenes again ordered by room icon
    // except that isn't going to stay around
    window.addEventListener("keydown",(e)=> {
      console.log(e)
      // remove the scene and go back to the previous view
      if (e.key === "Escape") {
        scene.remove()
      }
    })
  }
  return ob
}

// 

Answer 1

不要操纵灯光，而是操纵要“打开”的对象的材质。使用具有 emissive（颜色）和 emissiveIntensity（值）的标准材料（非平面）。通过将这些（通过动画或 setAttribute）设置为最大（白色和 1），对象看起来完全发光，就像视频屏幕监视器）。

手册中的材料标准属性 https://aframe.io/docs/0.9.0/components/material.html#standard