Блог

Я пытаюсь создать веб-игру о том, как ухаживать за лягушками. Очевидно, что частью этого является питание, я смог использовать HTML-кнопку, которая может загружаться в пищу, однако я хочу переместить модель лягушки вдоль оси Y, чтобы съесть пищу, однако все, что я пытался сделать, потерпело неудачу. Вот код, который загружает модель (для справки я использую JavaScript, HTML и CSS):

 const basePhrog = new GLTFLoader()
var obj
basePhrog.load('assets/models/Phrogs/base phrog/phrog.gltf', function (gltf) {
  mixer = new THREE.AnimationMixer(gltf.scene)
  obj = gltf.scene
  scene.add(obj)
  var action = mixer.clipAction(gltf.animations[0])
  action.loop = THREE.LoopOnce
  obj.userData.ground = true

  // Play animation randomly every 1-10s.
  setInterval(() => {
    action
      .reset()
      .play()
  }, Math.random() * 9000   1000)
})
 

Я пробовал использовать obj.position.y = 5, базовая программа.позиция.y = 5, базовая программа.объект.позиция.y = 5 и obj.translateY(5), которые ничего не сделали. Если вы хотите этого, вот мой код для цикла анимации и кнопки, которая добавляет еду:

 const foodGeometry = new THREE.SphereGeometry()
const foodColour = new THREE.MeshBasicMaterial({ color: 0xddbea9 })
const food = new THREE.Mesh(foodGeometry, foodColour)
food.position.y  = 5
food.userData.draggable = true
food.userData.name = 'food'

document.getElementById('food').onclick = feed
let fed = false
function feed () {
  if (!fed) {
    scene.add(food)
    fed = true
  } else {
    window.alert('Your phrog is already fed!')
  }
}
// animate loop
function animate () {
  requestAnimationFrame(animate)
  var delta = clock.getDelta()
  if (mixer) mixer.update(delta)
  renderer.render(scene, camera)
}
animate()
 

Любая помощь будет очень признательна!