orillusion入门系列一 | 第一印象

oldguy

做了很多年的应用开发想要在技术上有些突破，是时候学点真正的技术了，我选择了3D技术，因为接触3D技术之前我似乎是一只二维生物，只能在一个平面上思考问题，但是3D技术难度不小，所以必须找个足够高的肩膀来踩，那就要借助引擎的力量了。经过一翻搜索，orillusion 着实让我感动，满足了我所有的要求，而且还是国产的。

为什么选择 orillusion

没有专业的对比，仅凭我个人的好恶盲目来选择，简单从这两个方面来考虑

Native or Web?

如果您是专业人士建议详细对比两种类型的发展历史和原理再做出判断，对于我一个3D新手来说，有一个简单粗暴的判断思路，那就是在应用系统上，CS架构仍在某些特定领域仍然存在，但是能够迁移到BS的，几乎都在大规模的迁移到了BS架构上，所以我挺Web渲染架构。

足够新

新人就要有新人的觉悟，老牌的各路引擎已经有无数高手浸淫其中多年了，冒然投入进去会被沉重的历史信息淹没，作技术还是要有点野心的新手终有一天会成老鸟，所以要选择最新推出的面向最新技术架构的引擎，那么有多新呢，标准还没正式应用的够新吧，那就是以面向WebGPU为第一图形标准实现功能，至于WebGPU是什么，我的理解是更新、更快、更强，至于具体如何做到，相信以后我们会知道的。

准备工作

唯一必须的的准备工作是做好心理建设，不要想一口吃成个胖子，不要过早深究原理，我们的目标是借助引擎的能力来实现3D效果，除此以外还有两件小事需要留意。

开发环境

请先安装nodejs，并配置好环境变量，同时假设vue3已经可以正常使用。这里我使用vite作为项目创建工具，使用vscode做编辑器，没有其它的前置条件，轻装上阵。如果这一步有什么疑问，请自行查找资料，相信聪明的你不会被难住。

运行环境

由于WebGPU标准并未正式推出，需要使用开发浏览器，这里推荐 chrome canary ，下载后在在canary中运行效果，由于canary仍然在变动中，需要在地址栏中输入 chrome://flags/#enable-unsafe-webgpu，然后开启 Unsafe WebGPU 选项。

如果无法开启或者没有效果，需要搜索最新的开启方法，相信不久的将来在正式版就可以附带WebGPU支持了，不需要这么繁琐了。
同时为了做两手准备，也可以考虑用 Edge Canary 来应个急，下载后正常安装，启动后在地址栏中输入edge://flags/#enable-unsafe-webgpu，开启WebGPU支持。

创建项目

这里我们先创建一个普通的vue3项目，再将引擎引入项目，操练起来吧，很快就能看到我们在做什么了。

创建根目录
a. 选择一个文件夹，创建orillusion目录
b. 进入orillusion，并在该目录下打开命令提示行
创建项目
a. 执行命令 npm create vite@latest
b. Project name 下输入 hello3d 作为项目名并回车
c. 使用键盘方向键选择 vue 作为框架，并回车
d. 仍然使用键盘方向键选择 vue-ts 作为项目类型，并回车，已经创建了 hello3d 项目目录结构
e. 输入 cd hello3d 进入项目目录
f. 输入 npm install 安装依赖包，至此，基本的vue3项目已经创建完成
安装 orillusion
a. 输入 npm install @orillusion/core --save 安装 orillusion 开发包(如果安装失败，请注意分辨网络原因或安装权限)
b. 输入 npm run dev ，可以看到在5173端口启动了服务
c. 打开 canary 浏览器，输入完整地址可以看到显示了vue3的欢迎页，至此项目已经安装完成，后面进行开发。

编写代码

在 vscode 中打开 hello3d 目录
在 src 目录下新建目录 demo
在 demo 目录下创建文件 hello.ts

import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, HDRLitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 } from "@orillusion/core";

export default class Hello {
    async run() {
        console.log('hello 3d');
        // 初始化引擎
        await Engine3D.init();
        // 创建一个场景
        let scene3D: Scene3D = new Scene3D();
        // 创建一个相机
        let cameraObj: Object3D = new Object3D();
        let camera = cameraObj.addComponent(Camera3D);
        // 设置相机类型
        camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
        // 设置相机控制器
        let controller = cameraObj.addComponent(HoverCameraController);
        controller.setCamera(20, -20, 25);
        // 添加相机至场景
        scene3D.addChild(cameraObj);
        // 创建一个对象
        const obj: Object3D = new Object3D();
        // 创建渲染组件
        let mr: MeshRenderer = obj.addComponent(MeshRenderer);
        // 设置形状
        mr.geometry = new BoxGeometry(5, 5, 5);
        // 设置材质
        mr.material = new HDRLitMaterial();
        // 添加到场景
        scene3D.addChild(obj);
        // 创建前向渲染
        let renderJob: ForwardRenderJob = new ForwardRenderJob(scene3D);
        // 开始渲染
        Engine3D.startRender(renderJob);
    }
}

完成项目

可以看到，创建完一个项目后，只添加了hello.ts文件和修改了App.vue。这样一个真正的3D项目开发完成了，再在浏览器里面看一下运行效果(不要忘记在canary)。

你得到了一个可以用鼠标操作的立方体，按住左键拖拽可以任意旋转，滑动滚动可以调整距离，按住右键拖拽可以快速调整立方体位置，可以多操作一下熟悉一下这种最常见的操作方式。
回忆我刚运行这一步时还是有点激动的，终于迈进了3D技术的大门，尽管是借用了引擎的助力，不过我们程序员就要擅长找到适合自己的工具。

代码解析

作为3D小白，我的目标是始于orillusion但不会止于某一引擎，通过充分熟悉一个引擎的用法来积累3D知识。可以看到每一个类都对应着3D世界的基础概念，在这里做一个简单的对应，顺便看看一个3D世界由哪些部分组成的，当然这里只有一个基础印象即可，不必深究。

立方体：我们看到的立方体，是一个基础几何体，由类BoxGeometry来创建，实例化这个类在构造函数中指定长宽高，引擎就会为我们绘制出一个立方体，就像我们看到的这样。
相机：相机是一个比较抽象但是在3D中无处不在，可以理解成我们的眼睛，我们是通过相机来观察3D内景物的，比如前面的立方体要在相机的可视范围内我们才能看到，在这里用组件Camera3D来定义。
场景：是一个容器，前面的立方体、相机等等还有其它的对象、组件都是要添加到场景内才能被引擎组织和使用的，我们创建一个3D程序必须有一个场景，我们可以通过Scene3D类创建场景

这里只介绍了三个最基础的组成部分，几何体、相机、场景，这三个部分在每一个3D程序中都是最基础的不可少的，以后我们会逐渐深入了解他们，也将会慢慢知道更多的工具。

小结

这篇文章是个开篇，快速上手了一个入门级别的3D示例，主要的作用并不是学习3D的基本技能，可以说更重要的是消除疑惑，最简单的上手3D项目。不得不说orillusion没有让我失望，以我目前这么简单的诉求也不会让我失望吧。

作为3D新手，后续会不断的记录学习过程，期待与你一起学习一起飞！

shuangliu

目前 @orillusion/core 还在内测中，正在完善文档教程，无法直接使用 npm 安装，请再等待一段时间，即将跟大家见面

as3324

没有贴出app.vue的代码

as3324

这demo太卡了，我机器性能不算差，运行个demo cpu就将近100%