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

[makman]

Hi everyone! I am new to three.js but I love it very much! And the community here has been really great so far. Thanks for your help and suggestions.

I am an experience visual artist with over 20 year of experience in 2D, 3D, and video post production. So I am very familiar with working in a 3D environment like Maya, 3DSmax, Blender… You can see some of my past work at makcreative.com

At the moment I am using the three.js editor: three.js / editor
Although it’s basic, it gives a non-programer like me a real head start with working in three.js!!

I understand the very basics of code, but being a visual designer and not a coder, getting simple things done at this stage can be difficult because I don’t know all the proper syntax of writing code.
(I have spent many hours going through documentation already)

I have figured out how to rotate a cube using the editor…
Add a cube to a new scene / add new script to the cube (this.rotation.x += 0.01;) / Press play! Boom MAGIC!

This is what it looks like obviously

That’s a very simple line of code that does something amazing. I would really love it if I could get some assistance with how to do some other very very basic things!

Like what would a simple line of code look like for the following?
(remember ill be using the editor if that makes a difference, I know the editor is adding is some basic code for me)

1. How to rotate a cube?
   this.rotation.x += 0.01;

2. How to move a cube? (like a push, velocity, or accelerate)

3. How to move a cube to a location? (MoveTo)

4. How to trigger move and/or rotation with a key press (endless movement or rotation)

5. How to trigger move and/or rotation with a key held down (moves on key is down only)

6. How to change size? (instant change from one size/scale to another)

7. How to change size over time? (interpolate scale over time)

8. How to create a timer?

9. How to use a timer? (after 3 seconds rotate cube… or for 3 seconds rotate cube)

10. How to spawn an object into a scene?

11. How to remove/destroy and object from a scene?

12. How to turn off a light?

13. How to change which camera is being looked through?

14. How to play a music track?

15. How to play a sound?

16. How to create and detect a collision between two cubes? (cubeA bumps into cubeB then CubeB destroys itself)

17. How to change/update the texture of an object?

18. How to create a piece of memory? Is this called a Var, variable? In other words how do I add +1 to a Var=score every time I press the spacebar? Then how do I display that score on screen for the user to visually see?

19. 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?

20. Just a huge THANK YOU for anyone who can help with giving me a bit of a jump start here! I work very quickly so I’d be happy to share my progress and projects so other can learn too!

[calrk]

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;
}

2. 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);
}

3. 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);
}

4. 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;
  }
}

19. 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();

[makman]

Thank you very much calrk. I’ll be practicing all of this!

[hofk]

See examples of questions from others. There are very short, elementary but also more advanced examples.

Collection of examples from discourse.threejs.org

The answers to some questions contain some very interesting and instructive basic examples. These are difficult to find in the large number of questions on discourse.There are also good examples in resources and showcase. Therefore I collected them and put them on one page, clearly arranged by time. The collection may be a help for beginners. UPDATE 2019 http://discourse.threejs.hofk.de/ is now redirected to the safe side * discourse.threejs.hofk.de UPDATE 202…

[makman]

Thank you! I’ll have a look

[makman]

Thank you!!

[makman]

@calrk

4. 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;
  }
}

Hi quick questions. How is it that I assign a specific key? Space, arrow, W…

[titansoftime]

@makman

window.onkeydown = function(){ keydown = true; }

I do this:

var keys_pressed = {};

window.onkeydown = function(event){

	var ev = event || window.event;

	keys_pressed[ev.keyCode] = true;

}

window.onkeyup = function(event){

	var ev = event || window.event;

	keys_pressed[ev.keyCode] = false;

}

[hofk]

@makman

Hi quick questions. How is it that I assign a specific key? Space, arrow, W…

something like this

document.addEventListener('keydown', function(event) {	   
		kcode = event.keyCode;	                               	 
		if (kcode == 76) { obj.rotation.y += 0.1 } // l 
		if (kcode == 82) { obj.rotation.y -= 0.1 } // r 
		if (kcode == 65) { obj.position.x -= 10 } // a 
		if (kcode == 68) { obj.position.x += 10 } // d 
		if (kcode == 87) { obj.position.z -= 10 } // w 
		if (kcode == 83) { obj.position.z += 10 } //s 
		if (kcode == 72) { obj.position.y += 10 } //h 
		if (kcode == 84) { obj.position.y -= 10 } // t 		
	});