三个Js：不同的颜色到不同的几何面答案

【问题标题】：Three Js : Different colors to different face of geometry三个Js：不同的颜色到不同的几何面
【发布时间】：2021-09-06 05:25:07
【问题描述】：

我正在学习三个 js，我想用每个面都有不同的颜色来创建几何图形，这里我选择 Isocahedron，我尝试给面添加颜色，但是 每个面都有颜色的过渡脸 而不是我想要每张脸的单一颜色

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);

【问题讨论】：

标签： three.js react-three-fiber

【解决方案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>

【讨论】：