【20】实战——three.js调用js接口控制画布全屏和退出全屏

本文介绍了如何使用Three.js、Vue和GSAP创建一个基本的3D场景，并添加了控制屏幕全屏退出的双击事件监听器。

首先，初始化了一个Three.js场景，并创建了一个透视相机。相机的位置被设置在(0, 0, 10)以确保能看到场景内的物体。

接着，向场景添加了一个立方体物体。该立方体使用了简单的颜色材质，并对其进行旋转设置。

然后，初始化了WebGL渲染器，并将渲染器的视图添加到了页面中的一个容器元素中。使用渲染器和相机将场景渲染到了页面上。

文章还介绍了如何添加轨道控制器以允许用户交互式地旋转和缩放视图，并设置了控制器的阻尼效果。

为了帮助开发者更好地理解场景结构，本文还展示了如何添加一个坐标轴辅助器。

使用GSAP库为立方体的位置和旋转添加了动画效果，使立方体在指定轴上循环移动并旋转。

文章最后介绍了如何实现双击控制屏幕的全屏和退出全屏功能，并监听画面变化事件，以实时更新渲染器和相机的设置以适应新的画面尺寸。

总结部分，文中还包含了一些关键的CSS样式设置，确保了容器元素具有全视图高度和宽度，并设置了背景颜色。