三个js键盘旋转

Three js keyboard rotation

本文关键字：旋转 键盘 js 三个      更新时间：2023-09-26

有人能帮助我使三维对象在y轴上旋转吗？按下键盘按钮？（B）

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

拜托拜托

这是需要转动的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;

在处理这种输入时，您希望按下按钮不修改任何对象。您希望您的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()添加加速度和动量。）

游戏手柄的工作方式相同，只是给你一个十进制数字，而不是true或false。你可以将它乘以你用来表示"速度"的任何值。通常，0表示操纵杆居中，1表示操纵杆在该轴上达到最大值，中间的一些数字表示输入正在传递，但不是一直传递（或斜向拉动）。

相关文章：