掌握Three.js中的材质颜色设置

建议先阅读完文章，再查看 实例代码

在Three.js中，材质的颜色是渲染3D场景时非常重要的视觉属性。本文将详细解释如何使用Three.js中的Color对象来设置和修改材质的颜色。

1. 材质颜色属性.color

Three.js中的网格材质，如MeshBasicMaterial、MeshLambertMaterial和MeshPhongMaterial，都具有一个.color属性，用于定义材质的颜色。这个属性是一个Color对象。

2. 颜色对象Color

Color对象是Three.js中用于表示颜色的类。它有三个基本属性：.r（红色分量）、.g（绿色分量）和.b（蓝色分量），分别对应RGB颜色模型中的三个颜色通道。

创建颜色对象

const color = new THREE.Color(); // 默认颜色为纯白色，即0xffffff
console.log(color); // 查看颜色对象的默认RGB值

设置颜色值

你可以通过修改Color对象的.r、.g、.b属性来改变颜色，或者使用Color提供的方法来设置颜色。

3. 修改颜色的方法

Color对象提供了多种设置颜色的方法，包括：

• .setHex()：通过十六进制值设置颜色。
• .setRGB()：通过RGB分量设置颜色。
• .setStyle()：通过CSS颜色值设置颜色。

使用方法设置颜色

color.setHex(0xff0000); // 设置为纯红色
color.setRGB(0, 1, 0); // 设置为纯绿色
color.setStyle('#00ff00'); // 设置为纯绿色，使用CSS颜色值

4. 应用颜色到材质

一旦你创建并设置了Color对象，你可以将其应用到材质上。

设置材质颜色

const material = new THREE.MeshPhongMaterial();
material.color = new THREE.Color(0x00ff00); // 应用绿色到材质

5. 完整示例

以下是一个完整的示例，展示了如何创建一个3D场景，其中包括一个使用自定义颜色的网格模型。

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建材质颜色
const color = new THREE.Color();
color.setHex(0x00ff00); // 设置为绿色

// 创建材质
const material = new THREE.MeshPhongMaterial({ color: color });

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建网格模型
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 环境光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// 点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 1000);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

这个示例创建了一个带有自定义颜色的3D盒子模型，并在页面上渲染。通过动画循环，模型会不断旋转，展示其颜色和光照效果。