5

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

Это html часть:

<button onclick="choose_sofa('bt_forward')" class="picture">Move forward</button>
<button onclick="choose_sofa('bt_back')" class="picture">Move back</button>

В 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;
    }
}
2
  • 1
    добро пожаловать на stack overflow на русском! текстовую информацию лучше прилагать в виде текста: а) читать легче; б) можно копировать; в) поиск работает. исправить текст вопроса можно, нажав править ниже текста вопроса 19 дек 2018 в 12:01
  • commode.position.z += 1.0; сдвиг на 1 единицу по оси z. Это можно сделать через обработчики событий. 19 дек 2018 в 15:42

1 ответ 1

6

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

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;
}
<script src="https://threejs.org/build/three.min.js"></script>
<div id="driving">
  <button id="btn_forward">Вперед</button>
  <button id="btn_back">Назад</button>
</div>

2
  • 1
    Спасибо, Вам, большое все пошло и моя модель движется)
    – Ivan
    20 дек 2018 в 14:51
  • @АннаВойтанник Рад помочь :) Если ответ решил проблему, пометьте его как принятый, пожалуйста :) 20 дек 2018 в 14:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.