Javascript 将立方体面作为一个整体绘制，而不是组成面的三角形-three.js

尝试用不同的颜色绘制每个立方体面，我发现了一种方法，可以实现这一点：

var-geometry=新的3.BoxGeometry（5,5,5）；
对于（变量i=0；i

但是使用three.js r86，我得到了以下结果：

得到了组成每个面的三角形，分别绘制

为了达到理想的效果，我对上述代码进行了以下修改：

var-geometry=新的3.BoxGeometry（5,5,5）；
对于（变量i=0；i

但这一切似乎有点过分了

“严格使用”；
摄像机、场景、渲染器、立方体；
init（）；
render（）；
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
//渲染器
renderer=new THREE.WebGLRenderer({
阿尔法：是的
});
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
摄像机位置z=12；
//网格立方体
var geometry=新的3.BoxGeometry（5,5,5）；
对于（变量i=0；i

body，
帆布{
保证金：0；
填充：0；
}
身体{
溢出：隐藏；
背景色：#fff；
}

---

如果切换到

缓冲几何体

，则可以使用

组

控制几何体各部分的材质。组基于顶点索引，并允许您定义材质索引，该索引将引用材质数组中的材质

考虑：

// start, count, material index
bufferGeometry.addGroup(12, 6, 2)

这将告诉几何体在索引12处开始一组新的三角形，并说明6个索引（引用6个顶点）。最后一个参数告诉三角形组使用材质索引2（用于创建网格的材质数组的索引2）

在下面的示例中，我为立方体的每一侧指定了不同的颜色。您可能认为这与设置面部颜色的效果相同，但请注意，这是为每组设置材质，而不仅仅是颜色，这可能会产生一些非常酷的效果

var渲染器、场景、摄影机、控件、统计信息、网格；
变量宽度=window.innerWidth，
高度=窗内高度，
FOV=35，
近=1，
FAR=1000；
函数populateScene（）{
var bg=new THREE.BufferGeometry（）；
bg.addAttribute（“位置”，新的三个.BufferAttribute（新的浮点数组([
//正面
-1, 1, 1, // 0
-1, -1, 1, // 1
1, 1, 1, // 2
1, -1, 1, // 3
//对
1, 1, 1, // 4
1, -1, 1, // 5
1, 1, -1, // 6
1, -1, -1, // 7
//背
1, 1, -1, // 8
1, -1, -1, // 9
-1, 1, -1, // 10
-1, -1, -1, // 11
//左
-1, 1, -1, // 12
-1, -1, -1, // 13
-1, 1, 1, // 14
-1, -1, 1, // 15
//顶
-1, 1, -1, // 16
-1, 1, 1, // 17
1, 1, -1, // 18
1, 1, 1, // 19
//底部
-1, -1, 1, // 20
-1, -1, -1, // 21
1, -1, 1, // 22
1, -1, -1 // 23
]), 3));
bg.addAttribute（“正常”，新的三个.BufferAttribute（新的Float32Array([
//正面
0, 0, 1, // 0
0, 0, 1, // 1
0, 0, 1, // 2
0, 0, 1, // 3
//对
1, 0, 0, // 4
1, 0, 0, // 5
1, 0, 0, // 6
1, 0, 0, // 7
//背
0, 0, -1, // 8
0, 0, -1, // 9
0, 0, -1, // 10
0, 0, -1, // 11
//左
-1, 0, 0, // 12
-1, 0, 0, // 13
-1, 0, 0, // 14
-1, 0, 0, // 15
//顶
0, 1, 0, // 16
0, 1, 0, // 17
0, 1, 0, // 18
0, 1, 0, // 19
//底部
0, -1, 0, // 20
0, -1, 0, // 21
0, -1, 0, // 22
0, -1, 0 // 23
]), 3));
bg.setIndex（新的3.BufferAttribute（新的UINT32阵列([
//前0
0, 1, 2,
3, 2, 1,
//对六
4, 5, 6,
7, 6, 5,
//返回12
8, 9, 10,
11, 10, 9,
//左18
12, 13, 14,
15, 14, 13,
//前24名
16, 17, 18,
19, 18, 17,
//倒数第30名
20, 21, 22,
23, 22, 21
]), 1));
bg.clearGroups（）；
//开始、计数、物料索引
bg.addGroup（0,6,0）；
bg.addGroup（6,6,1）；
bg.addGroup（12,6,2）；
bg.addGroup（18,6,3）；
bg.addGroup（24,6,4）；
bg.addGroup（30,6,5）；
var材料=[
新的3.MeshLambertMaterial（{color:“red”}），
新的3.MeshLambertMaterial（{color:“green”}），
新的3.MeshLambertMaterial（{color:“blue”}），
新的三层网格材料（{color:“cyan”}），
新的三层网格材料（{color:“洋红”}），
新的3.MeshLambertMaterial（{color:“yellow”}）
];
网格=新的三个网格（背景，材料）；
网格。规模。设置（5，5，5）；
场景。添加（网格）；
}
函数init（）{
document.body.style.backgroundColor=“slateGray”；
renderer=new THREE.WebGLRenderer({
反别名：是的，
阿尔法：是的
});
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
文件。
attribute vec3 vertexColor;
varying vec3 vColor;

void main() {
  vColor = vertexColor;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
}

varying vec3 vColor;

void main() {
  gl_FragColor = vec4(vColor, 1.);
}

const ColorCubeShader = function () {
  THREE.ShaderMaterial.call(this, {
    vertexShader: vertexShaderSrc,
    fragmentShader: fragmentShaderSrc
  })
}

ColorCubeShader.prototype = Object.create(THREE.ShaderMaterial.prototype)
ColorCubeShader.prototype.constructor = ColorCubeShader

/**
 * Convenience method for coloring a face
 * @param {Number} r 
 * @param {Number} g 
 * @param {Number} b 
 * @returns {Array}
 */
const buildVertexColorArrayFace = function (r, g, b) {
  return [
    r, g, b,
    r, g, b,
    r, g, b,
    r, g, b
  ]
}

const ColorCube = function (size) {
  const geometry = new THREE.BoxBufferGeometry(size, size, size)

  // build color array
  let colorArray = []
  colorArray = colorArray
  .concat(buildVertexColorArrayFace(1, 0, 0))
  .concat(buildVertexColorArrayFace(0, 1, 0))
  .concat(buildVertexColorArrayFace(0, 0, 1))
  .concat(buildVertexColorArrayFace(1, 0, 1))
  .concat(buildVertexColorArrayFace(1, 1, 0))
  .concat(buildVertexColorArrayFace(0, 1, 1))

  // create a buffer attribute for the colors (for attribute vec3 vertexColor)
  const colorAttribute = new THREE.Float32BufferAttribute(
    new Float32Array(colorArray), 3)

  // set attribute vertexColor in vertex shader
  geometry.setAttribute('vertexColor', colorAttribute)

  // custom Shader Material instance
  const material = new ColorCubeShader()

  THREE.Mesh.call(this, geometry, material)
}

ColorCube.prototype = Object.create(THREE.Mesh.prototype)
ColorCube.prototype.constructor = ColorCube

const cube = new ColorCube(1)
cube.position.set(0, 2, -2)
scene.add(cube)