javascript - 三个js键盘旋转

Question

谁能帮我制作一个 3D 对象在 y 轴上旋转？按下键盘按钮？ (二)

我已经在这个问题上坐了很多天了，每次我尝试做某事时我的代码都会出错，

拜托拜托

这是需要转动的3D物体

https://www.dropbox.com/s/8yefhx3yc11zbik/b.obj?dl=0

这是代码

var lesson6 = {
  scene: null,
  camera: null,
  renderer: null,
  container: null,
  controls: null,
  clock: null,
  stats: null,


  init: function() { // Initialization


this.scene = new THREE.Scene();

var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight;


// prepare camera
var VIEW_ANGLE = 15, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 0;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(10, 200, 0);
this.camera.lookAt(new THREE.Vector3(0,30,0));

// prepare renderer
this.renderer = new THREE.WebGLRenderer({ antialias:true });
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;


// prepare container
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.container.appendChild(this.renderer.domElement);

// events
THREEx.WindowResize(this.renderer, this.camera);

// prepare controls (OrbitControls)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);
this.controls.maxDistance = 2000;


//keyboard control





 // L I G H T S
  //bottom

var light = new THREE.DirectionalLight(0xffffff, 1);
    light.castShadow = true;
    light.shadowCameraVisible = true;
    light.shadowCameraNear = 100;
    light.shadowCameraFar = 200;
    light.shadowCameraLeft = -20; // CHANGED
    light.shadowCameraRight = 20; // CHANGED
    light.shadowCameraTop = 20; // CHANGED
    light.shadowCameraBottom = -20; // CHANGED
    light.position.set(180  ,20, 0); // CHANGED
    this.scene.add(light);
    this.scene.add( new THREE.DirectionalLightHelper(light, 0.2) );


//left



var dlight = new THREE.DirectionalLight(0xffffff, 1);
    dlight.castShadow = true;
    dlight.shadowCameraVisible = true;
    dlight.shadowCameraNear = 100;
    dlight.shadowCameraFar = 200;
    dlight.shadowCameraLeft = -20; // CHANGED
    dlight.shadowCameraRight = 20; // CHANGED
    dlight.shadowCameraTop = 20; // CHANGED
    dlight.shadowCameraBottom = -20; // CHANGED
    dlight.position.set(0, 20, 100); // CHANGED
    this.scene.add(dlight);
    this.scene.add( new THREE.DirectionalLightHelper(dlight, 0.2) );


// add simple ground

// load a model
this.loadModel();


},
  loadModel: function() {

// prepare loader and load the model
var oLoader = new THREE.OBJLoader();
oLoader.load('b.obj', function( geometry ) {

var material = new THREE.MeshLambertMaterial({ color: "red" });
var mesh = new THREE.Mesh (geometry, material);



geometry.traverse( function(child) {
    if (child instanceof THREE.Mesh) {

      // apply custom material
      child.material = material;
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });

  geometry.rotation.y = -Math.PI / -1.7;
  geometry.position.x = 0;
  geometry.position.y = 0;
  geometry.position.z = 0;
  geometry.scale.set(1, 1, 1);
  lesson6.scene.add(geometry);
});
  }
};

// Animate the scene
function animate() {
  requestAnimationFrame(animate);
  render();
}


// Render the scene
function render() {
  if (lesson6.renderer) {
    lesson6.renderer.render(lesson6.scene, lesson6.camera);

    }
  }


// Initialize lesson on page load
function initializeLesson() {
  lesson6.init();
  animate();
}

if (window.addEventListener)
  window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
  window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;

Answer 1

在处理这类输入时，您希望按钮按下时不修改任何对象。您希望您的 keyup/keydown/其他输入事件尽可能少地执行:切换 true/false 变量或更改数字。

在这个例子中:

function handleKeyDown(event) {
  if (event.keyCode === 66) { //66 is "b"
    window.isBDown = true;
  }
}

function handleKeyUp(event) {
  if (event.keyCode === 66) {
    window.isBDown = false;
  }
}

window.addEventListener('keydown', handleKeyDown, false);
window.addEventListener('keyup', handleKeyUp, false);

从那里，您可以将 animate() 函数修改为:

function animate() {
  requestAnimationFrame(animate);
  if (window.isBDown) {
    //Increment your object's Y rotation value a little bit.
    //Ideally, you would listen to animate()'s first argument,
    //which is a high resolution timestamp that says the current time
    //in milliseconds since the tab was opened.
  }
  render();
}

请注意所有工作是如何在 animate() 中进行的。选择正确的速度，物体将缓慢旋转，直到您松开按键。 (一旦熟悉了这个概念，您还可以向 animate() 添加加速度和动量。)

游戏 handle 操纵杆的工作方式相同，不同之处在于您得到的不是 true 或 false，而是一个十进制数。您可以将其乘以您用于“速度”的任何值。通常 0 表示操纵杆居中，1 表示操纵杆在该轴上达到最大值，介于两者之间的某个数字表示正在传递输入，但不是一直传递(或沿对 Angular 线拉动)。