Текстурная геометрия теряет изображение при обновлении освещения - PullRequest
Новая
       46

Текстурная геометрия теряет изображение при обновлении освещения

0 голосов
/ 23 сентября 2019

В этом коде я создаю сцену с текстурированным небом с 360 изображениями и небольшим информационным значком, который призван осветлить при наведении.Сцена начинается с освещения по умолчанию, и когда иконка накладывается на другой источник света, добавляется.Когда я пытаюсь удалить объект освещения, когда мышь выходит за пределы сцены, исходное освещение до добавления сферического света не восстанавливается.Значок становится абсолютно темным, когда мышь уходит, а текстура изображения значка больше не видна.Может кто-нибудь объяснить, какое освещение или атрибут на значке я должен использовать, чтобы он не потерял видимость?

Код внизу - это источник создания сцены. 

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
}

//

1 Ответ

0 голосов
/ 23 сентября 2019

Вместо того, чтобы манипулировать светом, манипулируйте материалом объекта, который вы хотите «включить».Используйте стандартный материал (не плоский), который имеет emissive (цвет) и emissiveIntensity (значение).Если довести их (посредством анимации или setAttribute) до максимума (белый и 1), объект выглядит полностью излучающим, как монитор видеоэкрана).

Стандартные свойства материала из руководства https://aframe.io/docs/0.9.0/components/material.html#standard

...