Webgl, three.js, как сделать что бы модель по нажатию кнопки двигалась вперед назад или вправо влево?

#threejs #webgl

Подскажите пожалуйста, мне нужно что бы мой комод двигался по нажатию на кнопки "вправо",
"влево", "вперед" и  "назад". Как это сделать? 


Это html часть:





В js название модели commode.

Вот например с помощью этого кода я изменяю цвет дивана, а вот как двигать обьекты
не знаю как сделать(

function choose_sofe(color) {
   switch (color) {
       case 'bt_organge':
           var orange = sofa.material.color.set("orange");
           break;
       case 'bt_grey':
           var grey = sofa.material.color.set("grey");
           break;
       case 'bt_green':
           var green = sofa.material.color.set("green");
           break;
    }
}

    

Ответы

Ответ 1

Как это можно сделать (просто рабочий концепт для понимания):



var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight,
1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var box = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshNormalMaterial());
scene.add(box);

btn_forward.addEventListener("click", onClick);
btn_back.addEventListener("click", onClick);

function onClick(event) {
  var action = event.target.id;
  console.log(action);
  var move = 0;
  switch (action) {
    case "btn_forward":
      move = -1;
      break;
    case "btn_back":
      move = 1;
      break;
  }
  box.position.z += move;
}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});
body {
  overflow: hidden;
  margin: 0;
}

#driving {
  position: absolute;
}