【11】实战—使用three.js渲染第一个场景和物体

本文档提供了一个使用Three.js和Vue.js创建3D场景的基本示例。示例中包含了创建场景、相机、几何体、材质及渲染器的必要步骤，并展示了如何将3D内容嵌入Vue组件中。

首先，通过Three.js的Scene创建了一个场景，并设置了一个透视相机PerspectiveCamera，其中包括视野角度、长宽比、近端面和远端面的参数。相机的位置被设置在距离原点10个单位长度的地方。然后，相机被添加到场景中。

接下来，示例代码展示了如何创建一个几何体和材质来生成一个物体，本例中创建了一个黄色的立方体。立方体的几何体使用BoxGeometry来定义，而材质使用MeshBasicMaterial来设置颜色。创建完成后，此立方体被添加到场景中。

然后，初始化了Three.js的WebGLRenderer渲染器，并设置其尺寸以匹配窗口内部尺寸。渲染器的canvas元素被添加到Vue组件的引用容器中。最终，使用渲染器和相机将场景渲染到视图中。

在Vue组件的mounted生命周期钩子中，以上步骤被执行以设置3D场景。组件的methods中还包含了一个renders方法，该方法确保场景能够在每一帧被重新渲染。该方法使用requestAnimationFrame来创建一个渲染循环，但是这里需要注意，直接调用方法可能导致调用堆栈超出上限的问题，因此使用bind来正确绑定this上下文。

示例代码还包含了简单的CSS样式，设置了容器的高度和宽度，并定义了背景颜色。通过这些步骤，可以在Web页面中展示一个基本的3D立方体，并且可以通过轨道控制器来操作相机视角。