three.js - 如何使用 PolyhedronGeometry 创建十二面体？

Question

我目前正在使用 THREE.ConvexGeometry创建一个十二面体。使用以下示例

/**
 * @author ear / https://github.com/ear
 * https://github.com/ear/H3/blob/master/js/DodecahedronGeometry.js
 */

THREE.DodecahedronGeometry = function ( radius, detail ) {

    // http://en.wikipedia.org/wiki/Dodecahedron#Cartesian_coordinates

    var p = (1 + Math.sqrt(5))/2,
        q = 1/p;

    var vs = [          //  x   y   z
        new THREE.Vector3(  0,  q,  p), //  0  green
        new THREE.Vector3(  0,  q, -p), //  1
        new THREE.Vector3(  0, -q,  p), //  2
        new THREE.Vector3(  0, -q, -p), //  3

        new THREE.Vector3(  p,  0,  q), //  4  pink
        new THREE.Vector3(  p,  0, -q), //  5
        new THREE.Vector3( -p,  0,  q), //  6
        new THREE.Vector3( -p,  0, -q), //  7

        new THREE.Vector3(  q,  p,  0), //  8  blue
        new THREE.Vector3(  q, -p,  0), //  9
        new THREE.Vector3( -q,  p,  0), // 10
        new THREE.Vector3( -q, -p,  0), // 11

        new THREE.Vector3(  1,  1,  1), // 12  orange
        new THREE.Vector3(  1,  1, -1), // 13
        new THREE.Vector3(  1, -1,  1), // 14
        new THREE.Vector3(  1, -1, -1), // 15
        new THREE.Vector3( -1,  1,  1), // 16
        new THREE.Vector3( -1,  1, -1), // 17
        new THREE.Vector3( -1, -1,  1), // 18
        new THREE.Vector3( -1, -1, -1)] // 19

    var faces = [
        [16,0,2,18,6],

        [16,10,8,12,0],
        [0,12,4,14,2],
        [2,14,9,11,18],
        [18,11,19,7,6],
        [6,7,17,10,16],

        [1,17,10,8,13],
        [13,8,12,4,5],
        [5,4,14,9,15],
        [15,9,11,19,3],
        [3,19,7,17,1],

        [1,13,5,15,3]
    ]

    var list = new Array();

    faces.forEach(function(indices) {
        var vertices = indices.map(function(i) { return (vs[i]); }),
            geometry = new THREE.ConvexGeometry(vertices),
            material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.4 }),
            mesh     = new THREE.Mesh(geometry, material);

        list.push(mesh);
    })

    return list;
};

THREE.DodecahedronGeometry.prototype = Object.create( THREE.Geometry.prototype );

我的问题是如何通过 THREE.PolyhedronGeometry 实现相同的目标？

(我遵循了 https://github.com/mrdoob/three.js/tree/master/src/extras/geometries 中的示例，但是当我添加十二面体顶点和面时，没有渲染任何内容，但没有抛出错误)

Answer 1

在撰写本文时，在最初的问题三年后，现在有一个特定的 DodecahedronBufferGeometry目的。这里is the source .该对象源自 PolyhedronBufferGeometry .这是一个 jsfiddle展示如何使用 DodecahedronBufferGeometry:

      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );          var controls = new THREE.OrbitControls(camera);
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      var material = new THREE.MeshStandardMaterial( { color: 0x00ff00 } );
      var geometry = new THREE.DodecahedronBufferGeometry(2,0);
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      var wireframe = new THREE.WireframeGeometry( geometry );

      var line = new THREE.LineSegments( wireframe );
      scene.add( line );

      var aLight = new THREE.AmbientLight(0x404040, 5);
      scene.add(aLight);

      camera.position.z = 5;
      camera.position.x = 1;
      camera.position.y = 1;

      var render = function () {
        requestAnimationFrame( render );
        controls.update();
        renderer.render(scene, camera);
      };

      render();