The key is to copy and add one step at a time. If one step is coming properly (which was the code I gave to you), then make it two, and then try for three and so forth. or rewrite the code using the for loop.
Using three.js(HTML programming) create a stair case to reach the gold cup, teacher said repeat stair case function so the stairs can reach the gold cup.
!DOCTYPE html>
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Staircase exercise
// Your task is to complete the model for simple stairs
// Using the provided sizes and colors, complete the staircase
// and reach the Gold Cup!
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = false;
var gridY = false;
var gridZ = false;
var axes = false;
var ground = true;
function createStairs() {
// MATERIALS
var stepMaterialVertical = new THREE.MeshLambertMaterial( {
color: 0xA85F35
} );
var stepMaterialHorizontal = new THREE.MeshLambertMaterial( {
color: 0xBC7349
} );
var stepWidth = 500;
var stepSize = 200;
var stepThickness = 50;
// height from top of one step to bottom of next step up
var verticalStepHeight = stepSize;
var horizontalStepDepth = stepSize*2;
var stepHalfThickness = stepThickness/2;
// +Y direction is up
// Define the two pieces of the step, vertical and horizontal
// THREE.CubeGeometry takes (width, height, depth)
var stepVertical = new THREE.CubeGeometry(stepWidth, verticalStepHeight, stepThickness);
var stepHorizontal = new THREE.CubeGeometry(stepWidth, stepThickness, horizontalStepDepth);
var stepMesh;
// Make and position the vertical part of the step
stepMesh = new THREE.Mesh( stepVertical, stepMaterialVertical );
// The position is where the center of the block will be put.
// You can define position as THREE.Vector3(x, y, z) or in the following way:
stepMesh.position.x = 0; // centered at origin
stepMesh.position.y = verticalStepHeight/2; // half of height: put it above ground plane
stepMesh.position.z = 0; // centered at origin
scene.add( stepMesh );
// Make and position the horizontal part
stepMesh = new THREE.Mesh( stepHorizontal, stepMaterialHorizontal );
stepMesh.position.x = 0;
// Push up by half of horizontal step's height, plus vertical step's height
stepMesh.position.y = stepThickness/2 + verticalStepHeight;
// Push step forward by half the depth, minus half the vertical step's thickness
stepMesh.position.z = horizontalStepDepth/2 - stepHalfThickness;
scene.add( stepMesh );
}
function createCup() {
var cupMaterial = new THREE.MeshLambertMaterial( { color: 0xFDD017});
// THREE.CylinderGeometry takes (radiusTop, radiusBottom, height, segmentsRadius)
var cupGeo = new THREE.CylinderGeometry( 200, 50, 400, 32 );
var cup = new THREE.Mesh( cupGeo, cupMaterial );
cup.position.x = 0;
cup.position.y = 1725;
cup.position.z = 1925;
scene.add( cup );
cupGeo = new THREE.CylinderGeometry( 100, 100, 50, 32 );
cup = new THREE.Mesh( cupGeo, cupMaterial );
cup.position.x = 0;
cup.position.y = 1525;
cup.position.z = 1925;
scene.add( cup );
}
function init() {
var canvasWidth = 846;
var canvasHeight = 494;
// For grading the window is fixed in size; here's general code:
//var canvasWidth = window.innerWidth;
//var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
// CAMERA
camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 40000 );
camera.position.set( -700, 500, -1600 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,600,0);
// Camera(2) for testing has following values:
// camera.position.set( 1225, 2113, 1814 );
// cameraControls.target.set(-1800,180,630);
fillScene();
}
function addToDOM() {
var container = document.getElementById('container');
var canvas = container.getElementsByTagName('canvas');
if (canvas.length>0) {
container.removeChild(canvas[0]);
}
container.appendChild( renderer.domElement );
}
function fillScene() {
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 3000, 6000 );
// LIGHTS
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -400, 200, -300 );
scene.add(ambientLight);
scene.add(light);
scene.add(light2);
if (ground) {
Coordinates.drawGround({size:1000});
}
if (gridX) {
Coordinates.drawGrid({size:1000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:300,axisRadius:2,axisTess:50});
}
createCup();
var stairs = createStairs();
scene.add(stairs);
}
//
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
ground = effectController.newGround;
axes = effectController.newAxes;
fillScene();
}
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newGround: ground,
newAxes: axes
};
var gui = new dat.GUI();
gui.add(effectController, "newGridX").name("Show XZ grid");
gui.add( effectController, "newGridY" ).name("Show YZ grid");
gui.add( effectController, "newGridZ" ).name("Show XY grid");
gui.add( effectController, "newGround" ).name("Show ground");
gui.add( effectController, "newAxes" ).name("Show axes");
}
try {
init();
setupGui();
addToDOM();
animate();
} catch(e) {
var errorReport = "Your program encountered an unrecoverable error, can not draw on canvas. Error was:
";
$('#container').append(errorReport+e);
}`Preformatted text`Is there a certain problem / question you have? Otherwise, this probably belongs to #jobs category, if you’d like someone to solve it for you entirely. 
Also - you can make the code a bit easier to read by using preformatted text: 
Ok thank you this is my first time using this
1 Like
Are you able to solve it? I can repost
I reposted it on the jobs page, having trouble add the stair case
Are you able to solve this? Would greatly appreciate it
@Rome09 please edit this post to correctly format your code rather than create a new one. I’ve moved your post from the jobs to the questions category. Jobs is only for advertising paid work.
Please note that there’s a limit to how much we will help you with homework projects. You need to solve this yourself. Getting someone else to do it for you defeats the purpose.
1 Like
Ok, are you able to help me create more steps? thats the main problem Im having
Its due tonight thats why I just put the full question but I am willing to get help on it
1 Like
Man this brings me back to school and red bull days, good luck!
So what part of the homework assignment are you having problems with? Do you want us to do the entire assignment for you, or is there a specific step, task, function, etc. that you’re getting stuck on? What have you tried so far?
If you can do it that would be great! its due in a couple minutes
I feel like you’re not answering my questions. I’d be happy to help you with a specific task that you’re getting stuck on. But I’m not going to do your entire homework assignment for you. Taking a class is pointless if you’re going to shamelessly turn in other people’s work as your own.
1 Like
Oh, in that case it looks like simply calling createStairs() many times won’t work because each stair would be created in the same position as the previous one. You’ll have to move each stair up in the y-axis and in the z-axis. You can try modifying it to createStairs(yPos, zPos) and then you can use those arguments to change each step’s position. Something like:
stepMesh.position.y = yPos + verticalStepHeight/2;
stepMesh.position.z = zPos;
2 Likes