Three Js : 不同颜色对应不同的几何面

Question

我正在学习三个 js，我想用 每个面都有不同的颜色 创建几何体，这里我选择等面体，我尝试给面着色但是 在每个面上获得颜色的过渡 而我想要每个面上的单一颜色

let g = new THREE.IcosahedronGeometry(8, 3)

const count = g.attributes.position.count;
const color = new THREE.Color();

                
g.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
const colors1 = g.attributes.color;
        
      
for ( let i = 0; i < count; i ++ ) {
    color.setHex( Math.random() * 0xffffff );
    colors1.setXYZ( i, color.r, color.g, color.b);
    }
        
let m =  new THREE.MeshLambertMaterial( {vertexColors: true,} );
let o = new THREE.Mesh(g, m);
scene.add(o);

Answer 1

设置颜色的循环必须是这样的：

for (let i = 0; i < (count / 3); i++) {
  color.setHex(Math.random() * 0xffffff);
  colors1.setXYZ(i * 3 + 0, color.r, color.g, color.b);
  colors1.setXYZ(i * 3 + 1, color.r, color.g, color.b);
  colors1.setXYZ(i * 3 + 2, color.r, color.g, color.b);
}

示例：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
console.clear();

import * as THREE from "https://cdn.skypack.dev/three@0.132.2";
import {
  OrbitControls
} from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 8, 13).setLength(10);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let g = new THREE.IcosahedronGeometry(5, 3)

const count = g.attributes.position.count;
const color = new THREE.Color();


g.setAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3));
const colors1 = g.attributes.color;


for (let i = 0; i < (count / 3); i++) {
  color.setHex(Math.random() * 0xffffff);
  colors1.setXYZ(i * 3 + 0, color.r, color.g, color.b);
  colors1.setXYZ(i * 3 + 1, color.r, color.g, color.b);
  colors1.setXYZ(i * 3 + 2, color.r, color.g, color.b);
}

let m = new THREE.MeshLambertMaterial({
  vertexColors: true,
});
let o = new THREE.Mesh(g, m);
scene.add(o);

renderer.setAnimationLoop(_ => {
  renderer.render(scene, camera);
})

</script>

Three Js : 不同颜色对应不同的几何面

Three Js : Different colors to different face of geometry

three.js

react-three-fiber