javaScript编码魔方，真香！！！

 作者：Itzhipan

目录

Html编码：

 动态图

javascript编码动态: 

总结

---

魔方，相信大家都玩过，但是有没有玩过手机或电脑上的魔方，没有吧！下面带你走入魔方世界

那么魔方大体结构如何构造？

Html编码：

<div class="ui__stats">

    <div class="stats" name="total-solves">

      <i>Total solves:</i><b>-</b>

扫描二维码关注公众号，回复： 11282571 查看本文章

    </div>

    <div class="stats" name="best-time">

      <i>Best time:</i><b>-</b>

    </div>

    <div class="stats" name="worst-time">

      <i>Worst time:</i><b>-</b>

    </div>

    <div class="stats" name="average-5">

      <i>Average of 5:</i><b>-</b>

    </div>

    <div class="stats" name="average-12">

      <i>Average of 12:</i><b>-</b>

    </div>

    <div class="stats" name="average-25">

      <i>Average of 25:</i><b>-</b>

    </div>

  </div>               

 动态图

javascript编码动态: 

function doVertices() {

    var cornerLayout = [

      new THREE.Vector3( 1, 1, 1 ),

      new THREE.Vector3( 1, 1, - 1 ),

      new THREE.Vector3( - 1, 1, - 1 ),

      new THREE.Vector3( - 1, 1, 1 ),

      new THREE.Vector3( 1, - 1, 1 ),

      new THREE.Vector3( 1, - 1, - 1 ),

      new THREE.Vector3( - 1, - 1, - 1 ),

      new THREE.Vector3( - 1, - 1, 1 )

    ];

  function doFaces() {

    var a = lastVertex;

    var b = lastVertex + cornerVertNumber;

    var c = lastVertex + cornerVertNumber * 2;

    var d = lastVertex + cornerVertNumber * 3;

    indices.push( a );

    indices.push( b );

    indices.push( c );

    indices.push( a );

    indices.push( c );

    indices.push( d );

    a = lastVertex + cornerVertNumber * 4;

    b = lastVertex + cornerVertNumber * 5;

    c = lastVertex + cornerVertNumber * 6;

    d = lastVertex + cornerVertNumber * 7;

    indices.push( a );

    indices.push( c );

    indices.push( b );

    indices.push( a );

    indices.push( d );

    indices.push( c );

    a = 0;

    b = cornerVertNumber;

    c = cornerVertNumber * 4;

    d = cornerVertNumber * 5;

    indices.push( a );

    indices.push( c );

    indices.push( b );

    indices.push( b );

    indices.push( c );

    indices.push( d );

    a = cornerVertNumber * 2;

    b = cornerVertNumber * 3;

    c = cornerVertNumber * 6;

    d = cornerVertNumber * 7;

    indices.push( a );

    indices.push( c );

    indices.push( b );

    indices.push( b );

    indices.push( c );

    indices.push( d );

    a = radiusSegments;

    b = radiusSegments + cornerVertNumber * 3;

    c = radiusSegments + cornerVertNumber * 4;

    d = radiusSegments + cornerVertNumber * 7;

    indices.push( a );

    indices.push( b );

    indices.push( c );

    indices.push( b );

    indices.push( d );

    indices.push( c );

    a = radiusSegments + cornerVertNumber;

    b = radiusSegments + cornerVertNumber * 2;

    c = radiusSegments + cornerVertNumber * 5;

    d = radiusSegments + cornerVertNumber * 6;

    indices.push( a );

    indices.push( c );

    indices.push( b );

    indices.push( b );

    indices.push( c );

    indices.push( d );

  }

  function doHeightEdges() {

    for ( var i = 0; i < 4; i ++ ) {

      var cOffset = i * cornerVertNumber;

      var cRowOffset = 4 * cornerVertNumber + cOffset;

      var needsFlip = i & 1 === 1;

      for ( var u = 0; u < radiusSegments; u ++ ) {

        var u1 = u + 1;

        var a = cOffset + u;

        var b = cOffset + u1;

        var c = cRowOffset + u;

        var d = cRowOffset + u1;

        if ( ! needsFlip ) {

          indices.push( a );

          indices.push( b );

          indices.push( c );

          indices.push( b );

          indices.push( d );

          indices.push( c );

        } else {

          indices.push( a );

          indices.push( c );

          indices.push( b );

          indices.push( b );

          indices.push( c );

          indices.push( d );

        }

      }

    }

  }

总结

最后希望对大家有帮助！至少都可以了解一下魔方写法，哈哈！不多说了，编码魔方，难道它不香吗？