Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Three.js 如何使用多面体几何创建十二面体?_Three.js - Fatal编程技术网

Three.js 如何使用多面体几何创建十二面体?

Three.js 如何使用多面体几何创建十二面体?,three.js,Three.js,我目前正在使用创建十二面体。使用以下示例 /** * @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#Car

我目前正在使用创建十二面体。使用以下示例

/**
 * @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 );
我的问题是如何通过三个多面体几何来达到同样的效果


(我遵循中的示例,但是当我添加十二面体顶点和面时,没有任何渲染,但没有抛出错误)

在撰写本文时,在初始问题三年后,现在有了一个特定的对象。在这里该对象派生自。下面是一个演示如何使用十二面体缓冲几何体的示例:

      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();