const geometry = new THREE.BoxGeometry( 100, 100,100 );
// 创建一个数组来存储顶点颜色值
const vertexColors = [];
var centerColor = new THREE.Color(0xff0000); // 中心颜色为红色
// 计算顶点颜色值
for (let i = 0; i < geometry.getAttribute('position').count; i++) {
let y = 0
let x = 0
let z = 0
y = geometry.getAttribute('position').array[i * 3+1] ;
x = geometry.getAttribute('position').array[i * 3] ;
z = geometry.getAttribute('position').array[i * 3 + 2] ;
vertexColors.push(x);
vertexColors.push(y);
vertexColors.push(z);
}
console.log('vertexColors', new THREE.Float32BufferAttribute(vertexColors, 3))
// 将顶点颜色值添加到几何体中
geometry.setAttribute('color', new THREE.Float32BufferAttribute(vertexColors, 3));
var material = new THREE.MeshBasicMaterial({vertexColors:true} )
var cube = new THREE.Mesh(geometry,material)
scene.add(cube);
为什么生成的是如下效果??
如何能生成 从中间向两侧渐变 以及两侧也向中间渐变的立方体?