orillusion入门系列一 | 第一印象
-
做了很多年的应用开发想要在技术上有些突破，是时候学点真正的技术了，我选择了3D技术，因为接触3D技术之前我似乎是一只二维生物，只能在一个平面上思考问题，但是3D技术难度不小，所以必须找个足够高的肩膀来踩，那就要借助引擎的力量了。经过一番搜索，orillusion 着实让我感动，满足了我所有的要求，并且国产引擎能提供全面的中文资料支持和更小的交流成本。
为什么选择 orillusion
没有专业的对比，仅凭我个人的好恶盲目来选择，简单从这两个方面来考虑
Native or Web?
如果您是专业人士建议详细对比两种类型的发展历史和原理再做出判断，对于我一个3D新手来说，有一个简单粗暴的判断思路，那就是在应用系统上，CS架构仍在某些特定领域仍然存在，但是能够迁移到BS的，几乎都在大规模的迁移到了BS架构上，所以我挺Web渲染架构。
足够新
新人就要有新人的觉悟，老牌的各路引擎已经有无数高手浸淫其中多年了，冒然投入进去会被沉重的历史信息淹没，作技术还是要有点野心的新手终有一天会成老鸟，所以要选择最新推出的面向最新技术架构的引擎，那么有多新呢，标准还没正式应用的够新吧，那就是以面向WebGPU为第一图形标准实现功能，至于WebGPU是什么，我的理解是更新、更快、更强，至于具体如何做到，相信以后我们会知道的。
准备工作
唯一必须的的准备工作是做好心理建设，不要想一口吃成个胖子，不要过早深究原理，我们的目标是借助引擎的能力来实现3D效果，除此以外还有两件小事需要留意。
开发环境
理论可以不借助任何第三方库运行orillusion框架，所以我们先体验一下最简化的版本。
但是随着功能的增多，推荐node+vite+vue这套工具链，当然可以用其它任何熟悉的开发工具完全可以，所以建议请安装好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支持。
在浏览器正式版本支持WebGPU之前，关于浏览器的支持情况会经常变化，如果不能正确访问，建议多寻找一下当下的信息。
chrome最新版 113 已经正式支持 WebGPU 特性，可以直接使用了，终于可以告别混乱的史前时代了。Hello3D
参照官方文档，使用CDN直接引用Orullision引擎库是最简单的方式，为了做最简单的体验不引用任何第三方。创建一个html文件，使用任何一款支持资源加载的服务软件都可以直接运行。比如nginx、tomcat、live Server等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello Orillusion</title> <script src="https://cdn.orillusion.com/orillusion.umd.js"></script> </head> <body> <script type="importmap"> { "imports": { "@orillusion/core": "https://cdn.orillusion.com/orillusion.es.js" } } </script> <script type="module"> import { Engine3D, Camera3D, Object3D, Scene3D, HoverCameraController, MeshRenderer, BoxGeometry, LitMaterial, View3D } from "@orillusion/core" // 初始化引擎 await Engine3D.init(); // 创建场景对象 let scene = new Scene3D(); //创建相机对象 let cameraObj = 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); // 添加相机对象至场景 scene.addChild(cameraObj); // 创建一个实体对象 let boxObj = new Object3D(); // 创建渲染组件 let mr = boxObj.addComponent(MeshRenderer); // 创建几何体，并添加至网格 mr.geometry = new BoxGeometry(5, 5, 5); // 创建一个物理材质并添加至 mr.material = new LitMaterial(); // 将实体对象添加到场景 scene.addChild(boxObj); // 创建View3D对象 let view = new View3D(); // 指定渲染的场景 view.scene = scene; // 指定使用的相机 view.camera = camera; // 开始渲染 Engine3D.startRenderView(view); </script> </body> </html>运行后可以在浏览器直接查看效果，如果出现问题请查看控制台日志，比较容易出错的是WebGPU支持问题，请注意查看准备工作部分。
第一个demo力求简单化，所以显示效果会看起来比较单调，在一个白色的场景下一个黑色的立方体，用鼠标可以调整视角。在后续的示例中可以不断的完善丰富示例效果。创建项目
以一个用户数比较多的vue3作为示例(当然用react或完全不用框架完全可行)，使用从头开始搭建一个Orillusion项目。
这里我们先创建一个普通的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, LitMaterial, 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 LitMaterial(); // 添加到场景 scene3D.addChild(obj); let view = new View3D(); // 指定渲染的场景 view.scene = scene3D; // 指定使用的相机 view.camera = camera; // 开始渲染 Engine3D.startRenderView(view); } }- 修改App.vue文件
<template> </template> <script lang="ts" setup> import { onMounted } from 'vue'; import Hello from './demo/hello'; onMounted(()=>{ new Hello().run(); }) </script> <style scoped> </style>可以看到核心代码和cdn引入方式基本相同，这里请允许有一些冗余的存在，以便对与我一样的小白更友好一些。
完成项目
可以看到，创建完一个项目后，只添加了hello.ts文件和修改了App.vue。这样一个真正的3D项目开发完成了，再在浏览器里面看一下运行效果(不要忘记在chrome 113 以上版本)。
你得到了一个可以用鼠标操作的立方体，按住左键拖拽可以任意旋转，滑动滚动可以调整距离，按住右键拖拽可以快速调整立方体位置，可以多操作一下熟悉一下这种最常见的操作方式。
回忆我刚运行这一步时还是有点激动的，终于迈进了3D技术的大门，尽管是借用了引擎的助力，不过我们程序员就要擅长找到适合自己的工具。代码解析
作为3D小白，我的目标是始于orillusion但不会止于某一引擎，通过充分熟悉一个引擎的用法来积累3D知识。可以看到每一个类都对应着3D世界的基础概念，在这里做一个简单的对应，顺便看看一个3D世界由哪些部分组成的，当然这里只有一个基础印象即可，不必深究。
- 立方体：我们看到的立方体，是一个基础几何体，由类
BoxGeometry来创建，实例化这个类在构造函数中指定长 宽 高，引擎就会为我们绘制出一个立方体，就像我们看到的这样。 - 相机：相机是一个比较抽象但是在3D中无处不在，可以理解成我们的眼睛，我们是通过相机来观察3D内景物的，比如前面的立方体要在相机的可视范围内我们才能看到，在这里用组件
Camera3D来定义。 - 场景：是一个容器，前面的立方体、相机等等还有其它的对象、组件都是要添加到场景内才能被引擎组织和使用的，我们创建一个3D程序必须有一个场景，我们可以通过
Scene3D类创建场景
这里只介绍了三个最基础的组成部分，几何体、相机、场景，这三个部分在每一个3D程序中都是最基础的不可少的，以后我们会逐渐深入了解他们，也将会慢慢知道更多的工具。
小结
这篇文章是个开篇，快速上手了一个入门级别的3D示例，主要的作用并不是学习3D的基本技能，可以说更重要的是消除疑惑，最简单的上手3D项目。不得不说orillusion没有让我失望，以我目前这么简单的诉求也不会让我失望吧。
作为3D新手，后续会不断的记录学习过程，期待与你一起学习一起飞！
- 创建根目录
-
App.vue 内容如下：
<script setup lang="ts"> import hello from "./hello"; new hello().run() </script> -
