【39】three.js实战—灯光与阴影的关系与设置

本文介绍了如何在一个Vue组件中集成Three.js来创建一个3D场景。首先，通过导入必要的Three.js模块、轨道控制器、动画库gsap和dat.gui库，来准备开发环境。

在Vue组件的mounted生命周期钩子中，首先创建了一个Three.js场景，并设置了一个透视相机，包括视野角度、长宽比以及近端面和远端面距离。相机被放置在指定位置并添加到场景中。然后，使用CubeTextureLoader加载了环境贴图，并创建了一个球体和平面几何体，这些物体使用标准材质来支持光照和阴影效果。

场景中添加了环境光和平行光源来实现光照效果，平行光源还被设置为投射阴影。然后初始化了WebGL渲染器，并设置其尺寸和开启阴影贴图。渲染器的canvas元素被添加到DOM中。

为了交互性，创建了轨道控制器来允许用户控制相机视角，并且通过监听双击事件来实现全屏和退出全屏的功能。同时，监听窗口尺寸变化以更新相机投影矩阵和渲染器尺寸，确保3D场景正确响应屏幕调整。

最后，在methods中定义了renders方法，它负责更新控制器和通过渲染器渲染场景。此方法在动画帧回调中不断被调用，以实现动态渲染。代码中注意到了requestAnimationFrame的正确使用，避免了潜在的调用栈溢出问题。

整个组件的样式通过CSS设置，确保渲染容器占据整个视口，并且移除了默认的边距和内填充。