【43】three.js模型与灯光的使用

Three.js场景设置及模型加载

本文介绍了如何使用Three.js与Vue.js创建一个3D场景，添加模型和灯光，并将其渲染到Web页面上。

初始化配置

代码首先导入必要的库和模块，包括Three.js的核心功能，Vue.js的引用，轨道控制器，动画库gsap，dat.gui界面库，水面对象，GLTFLoader和DRACOLoader用于模型加载，以及RGBELoader用于环境贴图加载。

场景和相机设置

在Vue组件的mounted钩子中，初始化了一个Three.js场景和一个透视相机。相机位置被设置在坐标(0,2,6)，以便于观察场景。

网格和光源

场景中添加了一个网格辅助对象以及八个方向光源，用于照亮场景中的物体。

模型加载

使用GLTFLoader和DRACOLoader加载了一个gltf格式的汽车模型，并将其添加到场景中。模型的位置被设置在(0,1,0)。

渲染器和控制器

创建了一个WebGL渲染器，并设置了其大小和抗锯齿属性。场景的背景色被设置为灰色。然后，实例化了一个OrbitControls控制器，允许用户通过鼠标操作来旋转、缩放和平移场景。控制器的阻尼效果被启用，以提供更真实的交互体验。

动画循环

定义了一个名为renders的方法，用于在动画帧中渲染场景和更新控制器。该方法将通过requestAnimationFrame递归调用自身，从而形成一个连续的渲染循环。

CSS样式

提供了简单的CSS样式，设置了容器元素的大小和背景颜色，以及全局的margin和padding。

渲染到页面

最后，将渲染器的DOM元素添加到Vue组件的引用容器中，使3D场景能够在Web页面上显示。

想要了解更多内容？

查看原文：【43】three.js模型与灯光的使用

文章来源：

小南瓜开发平台

扫码关注公众号