【33】three.js实战—法线贴图应用

本文提供了几个专业的贴图材质网站资源链接，这些网站包括：

• Poliigon
• 3D Textures
• Arroway Textures

此外，文章还包含了一个三维场景渲染的示例，使用了Three.js和Vue.js库。代码展示了如何创建一个场景、相机、物体(立方体和平面)，并为它们添加材质和纹理。同时，也展示了如何设置渲染器、光源、轨道控制器和事件监听器来响应屏幕尺寸变化和双击全屏事件。

在代码中，首先通过Three.js初始化场景、相机，并设置相机位置。然后，使用TextureLoader加载了不同的纹理贴图，包括颜色、透明度、环境遮挡、置换、粗糙度、金属度和法线贴图。接着，创建了一个立方体和一个平面几何体，并应用了标准材质，同时设置了物体的纹理映射。

场景中还添加了环境光和定向光源以使标准材质正确渲染。通过WebGLRenderer，场景和相机被渲染出来，并把渲染结果添加到DOM中。使用OrbitControls添加了交互能力，并通过监听器实现了全屏功能和自适应屏幕尺寸调整。

最后，通过递归调用renders方法结合requestAnimationFrame，实现了动画循环，渲染场景的持续更新。