// Over a few chapters, we are working up to a "Battleship" style Websocket game.

// A "Websocket" game is one you can play over the Internet with other users.
// At the end, you will be able to play your own game (that you made) across the Internet with anyone in the world.
// It will take us a few Chapters to get there.
// We start with:


// Ch.1
// Draw a block (a cube) in native Three.js space.

// Built-in code includes:
// A 3D space.  
// Easy to make a block.
// Built-in camera drag and zoom.

// Some of the built-in code is from the Three.js graphics library.
// Some of the built-in code is from the Ancient Brain platform.
// All of this support is to make coding 3D Worlds easy, and not requiring too many lines of code.
// Most of this file is comments! There are less than 20 lines of actual code.


// To start:
// Students Clone this World and then make changes.



// === start of code ===========================================================================================================

// define the image file for the "texture" to put on the block
// credit:
// https://commons.wikimedia.org/wiki/File:Regina_Maris.JPG
// you can change this!

    const TEXTURE_SHIP 	= '/uploads/chapters/ship.png' ;
 

// set up a Three.js scene
// the 3 "arguments" are:
// start camera position, maximum camera position, background colour
// you can change these!

	ABWorld.init3d ( 500, 2000, 'lightyellow'  );           


// start the read from the TEXTURE_SHIP image file 
// when this finishes we run a block of code (a "function") called makeBlock  
// this kind of thing is called "asynchronous" coding - very common in JavaScript  

	var loader  = new THREE.TextureLoader();
	loader.load ( TEXTURE_SHIP, makeBlock );      
	
	
// put a note in the "run header" to show the user they can move the camera 					
 
    AB.msg ( "Drag and scroll the mouse to move and zoom the camera.");		 

 


	
function makeBlock ( texture )	
// this is a "function" - a block of code separated from the other code 
// this is "called" when we have finished loading the texture from the image file
// we can now make a block or blocks with this texture
{
    // Most of this uses Three.js functions 
    // See "Three.js" in the Docs menu 
    
	 var shape   = new THREE.BoxGeometry ( 100, 100, 100 );		// shape parameters are: width, height, depth - if all the same this is a cube  
	 var thecube = new THREE.Mesh( shape );                     // make a new Three.js object of this shape 
 	 thecube.material =  new THREE.MeshBasicMaterial( { map: texture } );    // puts the texture on the object
 	 
 	 var position = new THREE.Vector3 ( 0, 0, 0 );          // position in 3D space - parameters are x,y,z numbers - you can change these 
 	 thecube.position.copy ( position ); 
 	 
	 ABWorld.scene.add(thecube);
}


// === end of code ===========================================================================================================



// Exercises:
// Change ship image.
// Make the block not a cube.
// Put block at different location in x,y,z space.
// Advanced exercise: Make multiple blocks. Select the code inside makeBlock and copy it, to get lines of code to make a 2nd block.
// Advanced exercise: Make multiple blocks in a 2D plane (one dimension all the same).

// Outcomes: Student can:
// Learn what a basic program looks like (in JavaScript).
// Learn the difference between program instructions and comments.
// Learn what (some, JavaScript) program instructions look like in practice, how they are separated from other instructions, and why precision matters.
// Learn what a function is (both pre-built and user-defined) and how it can be called by name.
// Learn how a program might define a 3D space.
// Learn how to create 3D objects in 3D space. (At least using the popular Three.js library. We generally use a library to help!)
// Learn how to create different shaped 3D objects.
// Learn how to put own image on objects.