这一个系列文章将准备多个例子来说明threejs当中的一些概念和用法，采用
vue3为基础框架，示例不影响对框架的选择。
在vue模板当中，统一使用<div ref="container"></div>作为three渲染对象显示的容器，后续内容以此为基础。
在这个例子当中绘制一个立方体，用于说明一个简单的three程序的运行过程。
代码如下：
↓ 会员用户可见内容 ↓
您暂无权限阅读此内容😴,请先破解或登录并低成本开通本站会员（很实惠）
一般而言，创建一个三维的threejs程序必须存在的三要素：场景、相机、渲染器
本示例涉及的步骤如下：
- 创建渲染器
const renderer = new WebGLRenderer() - 将渲染器追加到页面元素容器
unref(container)?.append(renderer.domElement) - 创建场景
const scene = new Scene() - 设置一个光源
const light = new PointLight("red") - 设置相机
const camera = new OrthographicCamera(-s * rate, s * rate, s, -s, 1, 1000) - 创建材质
- 创建轨道控制器
new OrbitControls(camera, renderer.domElement);，通常在需要看车软件、电商软件看到物品360度旋转，基本上这样实现就可以了。
这算是一个初步的demo，对于初学者而言，涉及的知识较多，后续将逐步在一些示例当中分解
本章节源代码收录在demo-01.vue 文件当中