20 questions help with the basics! Move, rotate, scale, destroy

I will get the ball rolling, but I think a lot of these questions will answer themselves once you jump in and start creating stuff.
You can always look for how things are done by viewing the source of the threejs examples. When you need further information about the functions used, you can read up on the threejs docs.
Further there are some resources curated and available here And @looeee has written a good beginner guide available here

  1. How to rotate a cube?
// Simple
function update (event){
  this.rotation.x += 0.01;
}

Delta is the time that has passed since the last the last time this function was called. This is important so that the performance of individual computers shouldn’t affect the animation speed of your app. eg you will want your cube to make 1 full rotation in 1 second regardless of the user’s framerate.
More Info

// Better
function update (event){
  var rotateSpeed = 10; //Change this value to whatever you want
  this.rotation.x += rotateSpeed*event.delta;
}
  1. How to move a cube? (like a push, velocity, or accelerate)
// Simple
function update (event){
  this.position.x += 0.01;
}
// Better
function update (event){
  var velocity = new THREE.Vector3(10, 0, 0);
  velocity.multiplyScalar(event.delta);
  this.position.add(velocity);
}
  1. How to move a cube to a location? (MoveTo)
// Simple
function update (event){
  this.position.set(10, 0, 0);
}

Using linear interpolation
Source - Docs

// Using interpolation
var timer = 0;
function update (event){
  timer += event.delta;
  if(timer > 1.0){
    timer -= 1.0; // resets back to the start
  }
  this.position.lerp(new THREE.Vector3(10, 0, 0), timer);
}
  1. How to trigger move and/or rotation with a key press (endless movement or rotation)
    onKeyDown
    Variety of ways of doing this, I have one example below. You will need to work with event listeners for when keys are pressed/released.
//Simple
window.onkeydown = function(){
  this.position.x += 0.1;
}
window.onkeydown = function(){
  keydown = true;
}
window.onkeyup = function(){
  keydown = false;
}
function update(event){
  if(keydown){
    this.position.x += 0.01;
  }
}
  1. How to reset everything? Let’s say you build a super simple game. Is there a universal “reset” that will put us back at the beginning, original state?
    Not ideal but fine for starting out:
    location.reload();
3 Likes