Aframe version is higher than 1.2 render problem

[twice7713]

There is a problem with the rendering of the place where the camera takes when create object. I create 360° banana If the camera is look at the sky or the floor (not creat object position) and create object, it work will. if not there will be problems with the rendering of objects created by the camera's look.

[twice7713]

Picture 1->camera look position object render have problem Picture 2->camera not look object render is well Picture 3->camera look well object and problem

[gloomcheng]

I have made modifications to support aframe version 1.3.0 and above in the aframe-gif-shader. You can find the updated code at https://github.com/gloomcheng/aframe-gif-shader.

[twice7713]

I have made modifications to support aframe version 1.3.0 and above in the aframe-gif-shader. You can find the updated code at https://github.com/gloomcheng/aframe-gif-shader.

i try your aframe-gif-shader.min.js the same error on aframe:1.4.1

[gloomcheng]

Hi, could you please provide source code and your image target, I could give a try.

twice7713 @.***> 於 2023年10月23日 週一 12:09 寫道：

I have made modifications to support aframe version 1.3.0 and above in the aframe-gif-shader. You can find the updated code at https://github.com/gloomcheng/aframe-gif-shader.

i try your aframe-gif-shader.min.js the same error on aframe:1.4.1

— Reply to this email directly, view it on GitHub https://github.com/mayognaise/aframe-gif-shader/issues/25#issuecomment-1774399736, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQ3HYZC6FTCE4MQJ4QU6IDYAXUY3AVCNFSM6AAAAAA47S7KQWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZUGM4TSNZTGY . You are receiving this because you commented.Message ID: @.***>

[twice7713]

Hi, could you please provide source code and your image target, I could give a try. twice7713 @.> 於 2023年10月23日 週一 12:09 寫道： … I have made modifications to support aframe version 1.3.0 and above in the aframe-gif-shader. You can find the updated code at https://github.com/gloomcheng/aframe-gif-shader. i try your aframe-gif-shader.min.js the same error on aframe:1.4.1 — Reply to this email directly, view it on GitHub <#25 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQ3HYZC6FTCE4MQJ4QU6IDYAXUY3AVCNFSM6AAAAAA47S7KQWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZUGM4TSNZTGY . You are receiving this because you commented.Message ID: @.>

thank for your reply,

import '../../../../../lib/aframe-gif-shader'
export const numberobjectComponent = (addScore, countReadyTime) => ({
  fallObjectInterval: null,
  collisionHandler: null,
  tickInterval: null,
  objectArray: [],
  scoreArray: [],
  readyTime: 5,
  active: false,
  start: false,

  async init() {
    const camera = document.getElementById('camera')
    const cameraPosition = camera.getAttribute('position')

    document.addEventListener('keydown', (event) => {
      const moveDistance = 1

      switch (event.key) {
        case 'w':
          cameraPosition.z -= moveDistance
          camera.setAttribute('position', this.cameraPosition)
          break
        case 's':
          cameraPosition.z += moveDistance
          camera.setAttribute('position', this.cameraPosition)
          break
        case 'a':
          cameraPosition.x -= moveDistance
          camera.setAttribute('position', this.cameraPosition)
          break
        case 'd':
          cameraPosition.x += moveDistance
          camera.setAttribute('position', this.cameraPosition)
          break
        case 'g':
          this.objectArray.forEach((object, i) => {
            object.setAttribute('position', `${0}} ${0} ${-2}`)
          })
          break
      }
    })
    this.scoreArray = []
    this.readyTime = 5
    console.log(`number-object-readyTime: ${this.readyTime}`)
    const AnimalName = (i) => {
      if (i === 0) return 'bird'
      else if (i === 1) return 'black-horse'
      else if (i === 2) return 'cat'
      else if (i === 3) return 'fish'
      else if (i === 4) return 'giraffe'
      else if (i === 5) return 'snake'
      else if (i === 6) return 'white-horse'
      else return 'none'
    }
    const createObject = (i) => {
      const object = document.createElement('a-entity')

      object.setAttribute('id', `Animal-${AnimalName(i)}`)
      // object.setAttribute('id', `Animal-${AnimalName(i)}`)
      object.setAttribute('scale', '5 5 5')
      object.setAttribute('geometry', 'primitive: plane;')
      // object.setAttribute('material', 'shader: gif; src: #gif')
      object.setAttribute('material', `shader: gif; src: #animal-gif-${0}; transparent: true;opacity: 0.99`)
      object.setAttribute('class', 'cantap')
      const ground = document.getElementById('ground')
      const groundPosition = ground.getAttribute('position')
      // (測試用)让物体的位置随机分布在相机四周
      const angle = (i / 360) * 2 * Math.PI  // 根据循环索引计算角度
      const radius = 10  // 设置一个固定的半径，可以根据需要进行调整
      const x = cameraPosition.x + radius * Math.cos(angle)
      const z = cameraPosition.z + radius * Math.sin(angle)
      console.log(`position: ${x}, ${groundPosition.y + 3}, ${z}`)
      object.setAttribute('position', `${x} 0 ${z}`)
      // (實際用)先讓物體生在攝影機看不到的地方(躲bug)
      // (實際用)舊版
      // object.setAttribute('position', `${0}} ${300} ${-100}`)
      // (實際用)新版
      // const angle = (90 / 360) * 2 * Math.PI  // 根据循环索引计算角度
      // const radius = 10  // 设置一个固定的半径，可以根据需要进行调整
      // const x = cameraPosition.x + radius * Math.cos(angle)
      // const z = cameraPosition.z + radius * Math.sin(angle)
      // object.setAttribute('position', `${x} 0 ${z}`)
      // 让物体一直面向相机
      object.setAttribute('look-at', '[camera]')

      this.el.sceneEl.appendChild(object)
      this.objectArray.push(object)

      let canClick = true  // 用于防止连续点击

      object.addEventListener('click', (event) => {
        if (!canClick) return  // 如果不能点击，直接返回

        canClick = false  // 设置为不能点击

        this.scoreArray.push(object.id.split('-')[1])
        console.log(this.scoreArray.length)
        addScore(this.scoreArray)
        const clickedObject = event.target

        const scaleDownInterval = setInterval(() => {
          const currentScale = clickedObject.getAttribute('scale')
          const newScale = {
            x: currentScale.x - 0.5,
            y: currentScale.y - 0.5,
            z: currentScale.z - 0.5,
          }

          clickedObject.setAttribute('scale', newScale)

          if (newScale.x <= 0 || newScale.y <= 0 || newScale.z <= 0) {
            clearInterval(scaleDownInterval)
            this.el.sceneEl.removeChild(clickedObject)
            const objectIndex = this.objectArray.indexOf(clickedObject)
            if (objectIndex !== -1) {
              this.objectArray.splice(objectIndex, 1)
            }
          }
        }, 100)
      })
    }
    for (let i = 0; i < 360; i++) {
      createObject(i)
    }
    this.tickInterval = setInterval(() => {
      this.readyTime--
      countReadyTime(this.readyTime)

      if (this.readyTime === -1) {
        setTimeout(() => {
          // 進行位置設置
          // this.objectArray.forEach((object, i) => {
          //   const randomAngle = Math.random() * 2 * Math.PI  // Generate a random angle
          //   const radius = 20  // Circle's radius
          //   const x = cameraPosition.x + radius * Math.cos(randomAngle)
          //   const z = cameraPosition.z + radius * Math.sin(randomAngle)
          //   object.setAttribute('position', `${x}} ${2} ${z}`)
          // })
        }, 0)  // 0毫秒延迟，将在下一帧执行
        clearInterval(this.tickInterval)
      } else if (this.readyTime <= 0) {
        // createBug()
        this.active = true
      }
    }, 1000)
  },
  tick() {

  },

  remove() {
    clearInterval(this.tickInterval)  // Clear the countdown interval

    // Remove all objects created during initialization
    // this.objectArray.forEach((object) => {
    //   if (object) object.parentNode.removeChild(object)  // Remove the object from the scene
    // })

    this.objectArray = []  // Clear the objectArray
    this.active = false  // Reset the active flag if needed
  },
})

[gloomcheng]

UPDATE

Sorry, I misunderstand your previous comment I do not update js file in lib folder, you could upadte it for your purpose, or I will update it in my free time.