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

深入探索Three.js中的几何体与材质属性

在Three.js中，3D对象的可视化是通过几何体（Geometry）和材质（Material）共同作用实现的。本文将深入探讨如何操作和修改这些属性来创建丰富的视觉效果。

1. 几何体与材质属性概览

在Three.js中，每个3D模型对象（通常是一个网格Mesh）由几何体和材质组成。几何体定义了模型的形状和结构，而材质则决定了模型的外观和质感。

2. 检查和修改模型属性

通过浏览器的开发者工具，我们可以检查和修改模型的几何体和材质属性。

检查模型属性

const mesh = new THREE.Mesh(geometry, material);
console.log(mesh); // 打印整个模型对象
console.log(mesh.geometry); // 打印模型的几何体属性
console.log(mesh.material); // 打印模型的材质属性

修改材质颜色

mesh.material.color.setHex(0xff0000); // 设置材质颜色为红色

修改几何体位置

mesh.geometry.translate(0, 100, 0); // 沿Y轴平移几何体

3. 共享几何体和材质

在Three.js中，多个模型可以共享同一个几何体或材质。这意味着，如果你修改了共享的几何体或材质，所有使用它的模型都会受到影响。

创建共享材质的模型

const sharedMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // 创建共享材质
const mesh1 = new THREE.Mesh(geometry, sharedMaterial);
const mesh2 = new THREE.Mesh(geometry, sharedMaterial);
mesh2.position.x = 100; // 将第二个模型沿X轴移动

修改共享材质

sharedMaterial.color.setHex(0xff00ff); // 修改共享材质的颜色，两个模型都会更新

4. 完整示例：创建和操作3D场景

以下是一个完整的示例，展示了如何创建一个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 geometry = new THREE.BoxGeometry(1, 1, 1);

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

// 创建两个共享几何体和材质的模型
const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.x = 2; // 稍微移动第二个模型

scene.add(mesh1);
scene.add(mesh2);

// 添加光源
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);
  mesh1.rotation.x += 0.01;
  mesh1.rotation.y += 0.01;
  mesh2.rotation.x += 0.01;
  mesh2.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

这个示例创建了一个包含两个立方体的3D场景，这两个立方体共享相同的几何体和材质。通过动画循环，立方体会绕自身旋转，展示了共享材质的效果。