threejs 差值不生效

125 阅读1分钟

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); 为什么生成的是如下效果?? 如何能生成 从中间向两侧渐变 以及两侧也向中间渐变的立方体?

微信图片_20230911192709.png