three.js入门：创建生动的3D世界（下）

探索three.js的魅力：深入了解模型、材质、光源和相机

模型：三维对象的本质

three.js中的模型代表了三维空间中的对象，从简单的几何体（如球体和立方体）到复杂的角色和环境。通过操纵模型的位置、旋转和缩放，我们可以创建场景中的对象。three.js提供了各种内置几何体，例如BoxGeometry、SphereGeometry、CylinderGeometry和PlaneGeometry。

材质：赋予模型生命

材质决定了模型的外观和感觉，定义了其颜色、纹理和透明度。three.js提供了多种材质，包括MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial和MeshStandardMaterial。MeshBasicMaterial是最基本的材质，适用于不透明对象，而MeshStandardMaterial是最先进的材质，提供全面的物理照明模型。

光源：照亮场景

光源是三维场景中必不可少的元素，它们照亮了场景并投下阴影。three.js提供了多种光源类型，包括AmbientLight、DirectionalLight、PointLight和SpotLight。AmbientLight是一种全局光源，均匀地照亮整个场景，而SpotLight是一种投射锥形光束的光源，类似于舞台聚光灯。

相机：观察者的视角

相机决定了观察者在三维场景中的视角。three.js提供了两种主要类型的相机：PerspectiveCamera和OrthographicCamera。PerspectiveCamera模拟人眼的透视效果，产生具有深度感的图像，而OrthographicCamera是一种平行投影相机，不会产生透视效果。

让你的模型动起来

掌握了模型、材质、光源和相机的基本属性后，下一步就是让3D模型动起来。three.js提供了丰富的动画功能，允许您创建动态交互式场景。您可以使用代码示例来旋转、移动和缩放模型，还可以添加交互性，例如响应用户输入或与其他场景元素交互。

常见问题解答

• 如何创建自定义几何体？

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute([
    0, 0, 0, // 第一顶点
    1, 0, 0, // 第二顶点
    0, 1, 0, // 第三顶点
  ], 3));
  geometry.setAttribute('normal', new THREE.Float32BufferAttribute([
    0, 0, 1, // 第一个法线
    0, 0, 1, // 第二个法线
    0, 0, 1, // 第三个法线
  ], 3));
  geometry.setAttribute('uv', new THREE.Float32BufferAttribute([
    0, 0, // 第一个纹理坐标
    1, 0, // 第二个纹理坐标
    0, 1, // 第三个纹理坐标
  ], 2));
  

• 如何加载纹理到模型？

  const texture = new THREE.TextureLoader().load('path/to/texture.jpg');
  const material = new THREE.MeshBasicMaterial({ map: texture });
  const mesh = new THREE.Mesh(geometry, material);
  

• 如何添加交互性？

  mesh.addEventListener('click', function() {
    console.log('模型被点击了！');
  });
  

• 如何实现物理模拟？

  const physicsWorld = new CANNON.World();
  const physicsBody = new CANNON.Body({ mass: 1 });
  physicsWorld.addBody(physicsBody);
  

• 如何优化three.js性能？

  • 避免使用复杂的几何体和材质。
  • 使用缓存和合并网格。
  • 调整渲染器设置。
  • 优化代码。

结论

three.js是一个功能强大的库，可以创建令人惊叹的3D世界。通过理解模型、材质、光源和相机的基本属性，我们可以创建复杂生动的场景，将我们的想法转化为交互式体验。在未来的教程中，我们将探索更高级的主题，例如动画、物理模拟和WebGL渲染，帮助您创建更令人印象深刻的three.js项目。