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

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

不是操纵灯光，而是操纵您想要 'turn on' 的对象的 material。使用具有发射（颜色）和发射强度（值）的标准 material（不平坦）。通过使这些（通过动画或 setAttribute）达到最大值（白色和 1），对象看起来完全自发光，就像视频屏幕监视器）。

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

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

Textured geometry loses image on lighting update

three.js

aframe