Question

绘制四面体时，我想为每个面设置一种颜色，例如红色，绿色，蓝色和橙色。

这是代码：

const divid = document.getElementById("myid");

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  70,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
let renderer = new THREE.WebGLRenderer({ alpha: true });

divid.appendChild(renderer.domElement);

camera.position.z = 3;

let triangle = new THREE.Mesh(
  new THREE.TetrahedronBufferGeometry(),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
  );
scene.add(triangle);

let animate = function() {
  requestAnimationFrame(animate);
  triangle.rotation.x += 0.005;
  triangle.rotation.y += 0.01;
  renderer.render(scene, camera);
};

animate();

我们不能在每个面上传递4种颜色的数组来设置吗？这里也提供了代码：https://codepen.io/jeffprod/pen/JjdLdjO

Answer 1

对材质使用.vertexColors: true，并向几何图形添加color属性，为面的每个顶点设置相同的颜色：

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  70,
  innerWidth / innerHeight,
  1,
  1000
);
let renderer = new THREE.WebGLRenderer({
  alpha: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.z = 3;

let geom = new THREE.TetrahedronBufferGeometry();
geom.setAttribute("color", new THREE.Float32BufferAttribute([
  1, 0, 0, //red
  1, 0, 0,
  1, 0, 0,
  0, 1, 0, //green
  0, 1, 0,
  0, 1, 0,
  0, 0, 1, //blue
  0, 0, 1,
  0, 0, 1,
  1, 0.75, 0.25, //orange (sort of)
  1, 0.75, 0.25,
  1, 0.75, 0.25
], 3));
let triangle = new THREE.Mesh(
  geom,
  new THREE.MeshBasicMaterial({
    vertexColors: true
  })
);
scene.add(triangle);

let animate = function() {
  requestAnimationFrame(animate);
  triangle.rotation.x += 0.005;
  triangle.rotation.y += 0.01;
  renderer.render(scene, camera);
};

animate();

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

在脸上创建具有不同颜色的对象

1 个答案: