Javascript A帧更新每个对象的material.offset

我制作了一个用于创建热点的框架组件，我想在光标悬停热点时更改热点的material.offset.y。 所以我首先尝试使用一个frame animaiton属性，但是很明显，我们无法通过动画访问这个属性

因此，我向hotspot JS对象添加了一个eventListener，并更改了getObject3D（'mesh'）.material.map.offset.y，但当我悬停其中一个时，它会更新所有hotspot纹理，不知道为什么。。。我检查了它是否指向一个特定的热点，确实如此！所以我不明白为什么所有的纹理都在更新

代码如下：

从“../libs/shop”导入loadProduct
AFRAME.registerPrimitive（'a-hotspot'{
默认组件：{
“热点弹出窗口”：{}
},
映射：{
产品：“热点弹出窗口.产品”，
}
})
AFRAME.registerComponent（'hotspot-popup'{
模式：{
//变数
产品：{type:'string'}
},
init:function（）{
this.el.setAttribute（'mixin'，'mixin_hotspot'））
this.setHover（）
这是setClick（）
},
setHover（）{
this.el.addEventListener（'mouseenter'，（）=>{
设material=this.el.getObject3D（'mesh'）.material
if（material.map）{
material.map.offset.y=0
material.map.offset.x=0
}
})
this.el.addEventListener（'mouseleave'，（）=>{
设material=this.el.getObject3D（'mesh'）.material
if（material.map）{
材质.map.offset.y=0.5
material.map.offset.x=0
}
})
},
勾选：函数（）{
让cursorRotation=document.querySelector（'a-camera'）.getAttribute（'rotation'））
this.el.setAttribute（'rotation'，cursorRotation）
},
setClick:函数（）{
this.el.addEventListener（'click'，（）=>{
console.log（'load'，this.data.product）
loadProduct（this.data.product）
});
}
})

因此，如果有人知道如何防止这种行为，请毫不犹豫地评论这篇文章

谢谢，

---

Navalex

所有图像都具有相同偏移的原因是

a-frame

出于性能原因重新使用纹理

使用如下设置：

<a-box material="src: #image"></a-box>
<a-sphere material="src: #image"></a-sphere >

a-frame

将创建另一个

THREE.Texture（）的实例


否则，您可以创建一个
组件
，用副本替换纹理：

this.el.addEventListener("materialtextureloaded", e => {
  // grab the object
  let obj = this.el.getObject3D("mesh")
  // grab the texture
  let map = obj.material.map
  // create a new one
  const texture = new THREE.TextureLoader().load(map.image.src);
  // without wrapping, it will just "stretch" instead of "repeating"
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  // assign the new texture
  obj.material.map = texture;
  // update the material
  obj.material.needsUpdate = true
})

这让我们想到了一些东西（包括动画、包装等）
为什么所有图像都具有相同的偏移量，是因为
a-frame
出于性能原因重复使用纹理

使用如下设置：

<a-box material="src: #image"></a-box>
<a-sphere material="src: #image"></a-sphere >

a-frame
将创建另一个
THREE.Texture（）的实例


否则，您可以创建一个
组件
，用副本替换纹理：

this.el.addEventListener("materialtextureloaded", e => {
  // grab the object
  let obj = this.el.getObject3D("mesh")
  // grab the texture
  let map = obj.material.map
  // create a new one
  const texture = new THREE.TextureLoader().load(map.image.src);
  // without wrapping, it will just "stretch" instead of "repeating"
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  // assign the new texture
  obj.material.map = texture;
  // update the material
  obj.material.needsUpdate = true
})

这让我们想到了一些类似的东西（包括动画、包装等）
事实上，2个第一解决方案对我不起作用，但我在我的组件中包含了你的上一个解决方案，它工作得非常好@你是说有初始偏移量的
材料
？我只是想说这是一个选项，但它可能需要一个更具体的用例：）事实上，2个firsts解决方案对我不起作用，但我在我的组件中包含了你的最后一个解决方案，它工作得非常好@你是说有初始偏移量的
材料
？只是想说这是一个选项，但它可能需要一个更具体的用例：）