Wendeltreppe ...在three.js的螺旋楼梯

Question

我是JavaScript和Coputer Grapics的初学者，今天我必须用JavaScript设计一个带有three.js的螺旋楼梯。但是，我不能得到一个完整的楼梯，我不知道我怎么能继续下去。有人帮助我。非常感谢你。

＆＃13;

＆＃13;

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%
}

＆＃13;

<script src="https://threejs.org/build/three.js"></script>
<!-- Einbinden der OrbitControls, um die Darstellung mit der Maus rotieren zu können. -->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  /*Szene wird erzeugt*/
  var scene = new THREE.Scene();

  /*Kamera wird erzeugt und auf der Position (-2, 2, 4) gesetzt*/
  var camera = new THREE.PerspectiveCamera(45, 1200 / 800, 1, 1000);
  camera.position.x = -2;
  camera.position.y = 2;
  camera.position.z = 4;
  camera.lookAt(new THREE.Vector3(0, 1, 0));

  /*Licht wird auf der Punkte (5,5,5) erzeugt.*/
  var ambientLight = new THREE.AmbientLight(0x222222);
  scene.add(ambientLight);
  var light = new THREE.PointLight(0xffffff);
  light.position.set(5, 5, 5);
  scene.add(light);

  /*Renderer wird erzeugt und ans den Body-Tag des HTML Dokuments gebunden*/
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(1200, 800);
  document.body.appendChild(renderer.domElement);


  /*Plane wird erzeugt, mit Width und Height 5 und Segments 10 und wird auf x-Achse rotiert*/
  var planeGeometry = new THREE.PlaneGeometry(5, 5, 10, 10);
  var material = new THREE.MeshLambertMaterial({
    color: 0x575757
  });
  var plane = new THREE.Mesh(planeGeometry, material);

  plane.rotation.x = -90 * Math.PI / 180;
  scene.add(plane);


  /*Ein blaues Kube wird erzeugt*/

  var stepWidth = 1;
  var stepHeight = 0.1;
  var stepDepth = 0.3;

  var cubeGeometry = new THREE.CubeGeometry(stepWidth, stepHeight, stepDepth);
  material = new THREE.MeshLambertMaterial({
    color: 0x006677
  });


  /*Object in 3D ist erzeugt*/
  var step = new THREE.Object3D();
  var cube = new THREE.Mesh(
    cubeGeometry,
    material
  );

  cube.position.x = -stepWidth / 2;
  cube.position.y = 0.1 + stepHeight / 2;
  step.add(cube);
  scene.add(step);

  /*Add alle Object in der Szene auf bestimmte Positionen*/
  var finalStep = new THREE.Object3D();
  var cubeFinalStep = new THREE.Mesh(
    cubeGeometry,
    material
  );
  cubeFinalStep.position.x = -0.5;
  cubeFinalStep.position.y = 20 * 0.1 + 0.05;
  cubeFinalStep.rotation.y = 360 / 20 * 20 * Math.PI / 180;
  finalStep.add(cubeFinalStep);
  scene.add(finalStep);


  /*Zeigt doch alle OBject in der Szene*/
  renderer.render(scene, camera);
</script>

＆＃13;

＆＃13;

＆＃13;