// 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 objectvar 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.
