Three,js staircase project

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
// 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() {

   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 = 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 );
   cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);,600,0);

   // Camera(2) for testing has following values:
   // camera.position.set( 1225, 2113, 1814 );

function addToDOM() {
   var container = document.getElementById('container');
   var canvas = container.getElementsByTagName('canvas');
   if (canvas.length>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 );


   if (ground) {
   if (gridX) {
   if (gridY) {
       Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
   if (gridZ) {
       Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
   if (axes) {
   var stairs = createStairs();

function animate() {

function render() {
   var delta = clock.getDelta();
   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;

   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 {
} catch(e) {
   var errorReport = "Your program encountered an unrecoverable error, can not draw on canvas. Error was:


}`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. :thinking:

Also - you can make the code a bit easier to read by using preformatted text: Screenshot 2020-10-01 at 00.17.44

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;