Javascript 三次键盘旋转

Javascript 三次键盘旋转,javascript,rotation,three.js,keypress,Javascript,Rotation,Three.js,Keypress,有人能帮我让一个3D物体在y轴上旋转吗?按一下键盘按钮?(B) 我已经在这个问题上坐了很多天了,每次我尝试做某事时,我的代码都会中断 求你了,求你了 这是需要旋转的3D对象 这就是代码 var lesson6 = { scene: null, camera: null, renderer: null, container: null, controls: null, clock: null, stats: null, init: function() { /

有人能帮我让一个3D物体在y轴上旋转吗?按一下键盘按钮?(B)

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

求你了,求你了

这是需要旋转的3D对象

这就是代码

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;

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

在本例中:

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()


Gamepad操纵手柄的工作方式相同,只是您得到的不是
true
false
,而是一个十进制数字。您可以将其乘以“速度”的任何值。通常0表示操纵杆居中,1表示操纵杆在该轴上处于最大位置,中间的一些数字表示输入正在传送,但不是一直传送(或沿对角线拉动)。

可能重复的您不能连续问相同的问题。对不起,没有人会正确回答我的上一个问题,所以我一直在努力