【31】three.js实战—设置粗糙度与粗糙度贴图

本文介绍了使用Three.js和Vue.js创建一个3D场景的基本步骤。首先，创建一个场景和一个透视相机，并设置相机的位置。然后使用TextureLoader导入了多个纹理，包括门的颜色、透明度、环境遮挡、置换和粗糙度贴图。

接下来，创建一个立方体和一个平面对象，并为它们设置了材质。这些材质包括颜色、纹理映射、透明度贴图、环境遮挡贴图、双面渲染、置换贴图与置换比例、粗糙度和粗糙度贴图。同时为立方体和平面添加了第二组UV坐标，以支持环境遮挡贴图。

为了完成场景的光照设置，添加了环境光和定向光源。随后，初始化了WebGLRenderer并设置其尺寸，将渲染的内容添加到HTML的div容器中。此外，创建了OrbitControls轨道控制器以便用户能够旋转和缩放视角，并开启了控制器的阻尼效果。

还添加了AxesHelper来显示坐标轴，并设置了监听器以处理双击全屏事件和窗口大小变化时的响应。最后，定义了一个渲染方法，通过requestAnimationFrame实现了渲染循环。

文章最后提供了CSS样式，用于设置容器的高度、宽度和背景颜色。