ThreeJS-自定义矩形BufferGeometry(八)

代码：

 

效果图：

 

 这里有个坑：

  const cubeGeometry = new THREE.BufferGeometry();

    const vertices = new Float32Array([

      0,-2,-2,

      0,-2,2,

      0,2,2,

      0,2,2,

      0,2,-2,

      0,-2,-2

    ]);

 因为threejs矩形是两个三角形拼接而成的，所以画六个点，但是如果六个点全部描述在同一个Float32Array中，则必须要保证第一个三角形的起始点是第二个三角形的终端，第一个三角形的终点是第二个三角形的起始点，否则将会出现一下情况：

比如我们将代码改成一下：

    const vertices = new Float32Array([

      0,-2,-2,

      0,-2,2,

      0,2,2,

      0,2,-2,

       0,2,2,

      0,-2,-2

    ]);

 效果图：（不是一个完整的正方形，而只是显示一半）

 那有没有不用保持第一个三角形的起始点是第二个三角形的终端，第一个三角形的终点是第二个三角形的起始点，也能正常显示呢？

答案是可以的：

只需每个三角形单独创建一个物体，因此我们创建两个物体

代码如下：

  const cubeGeometry = new THREE.BufferGeometry();

    const cubeGeometry2 = new THREE.BufferGeometry();

    const vertices = new Float32Array([

      0,-2,-2,

      0,-2,2,

      0,2,2

    ]);

    const vertices2 = new Float32Array([

      0,2,2,

      0,2,-2,

      0,-2,-2

    ]);

    //每三个值为一个坐标

    cubeGeometry2.setAttribute('position', new THREE.BufferAttribute(vertices2, 3));

    cubeGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

    //根据几何体和材质创建物体

    const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);

    const mesh2 = new THREE.Mesh(cubeGeometry2, cubeMaterial);

    //将物体加入到场景

    scene.add(mesh);

    scene.add(mesh2);

 效果图：