Question

任何人都可以帮我制作3D对象在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;

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()添加加速度和动量。）

游戏手柄操纵杆以相同的方式工作，除了代替true或false，您将获得一个十进制数字。您可以将其乘以您用于＆＃34;速度＆＃34;的任何值。通常0表示操纵杆居中，1表示操纵杆在该轴处达到最大值，并且意味着输入之间的某个数字正在传递，但不是一直传递（或者被对角拉动）。

三个js键盘旋转

1 个答案: