主页 / 问题 / 922925
Accepted
Ivan
Asked:2020-12-19 19:51:05 +0800 CST2020-12-19 19:51:05 +0800 CST

Webgl，three.js，如何使模型在按钮单击时向前、向后或从右向左移动？

  • 772

请告诉我，我需要通过按“右”、“左”、“前进”和“后退”按钮来移动我的抽屉柜。怎么做？ 有两个按钮

这是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;
    }
}
three.js

1 个回答

  1. Best Answer

    怎么做（只是一个理解的工作概念）：

    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>

    • 6

相关问题