【13】实战——添加坐标轴辅助器

摘要： 这段代码是一个使用Three.js和Vue实现的3D场景示例。代码开始于导入Three.js库和Vue框架的ref函数，同时引入了Three.js的轨道控制器模块OrbitControls。 组件App定义了三个基本的数据属性：renderer、scene和camera。在mounted生命周期钩子中执行以下步骤：首先创建一个新的Three.js场景，然后创建一个透视相机并设置其位置和视野。接着，相机被添加到场景中。此外，定义了一个立方体几何体和材质，并将其作为一个Mesh添加到场景中。 接着初始化WebGL渲染器，并设置其大小以匹配视口。将渲染器的DOM元素附加到容器div中，并使用相机渲染场景。之后，创建了一个轨道控制器以允许交互式操作，并添加了一个长度为5的轴助手到场景中以方便可视化坐标轴。 在methods中定义了一个renders方法，它负责渲染场景并通过requestAnimationFrame递归调用自身以创建动画循环。注意，为了避免调用堆栈溢出，renders方法被绑定到当前实例。 样式部分设置容器div的高度和宽度为视口的大小，并为背景颜色赋予一个灰色调。这样，整个容器会填充整个视口，并为3D场景的渲染提供了空间。 整体上，这段代码演示了如何在Vue中创建和渲染一个基本的3D场景，展示了Three.js库与Vue框架结合使用的能力，以及如何通过组件化的方式构建可交互的3D应用程序。