我们推荐使用前端构建工具来开发 Web3D 应用程序，例如 Vite或Webpack。

• 安装依赖项：

npm install @orillusion/core --save

• 按需导入：

import { Engine3D, Camera3D } from '@orillusion/core'

• 全局导入：

import * as Orillusion from '@orillusion/core'

内容分发网络

为了更方便的使用引擎，我们支持使用原生<script>标签导入Orillusion. 使用官方链接导入的三种不同方式CDN：

• 全局构建：Orillusion您可以通过脚本标签直接从 CDN使用：

<script src="https://unpkg.com/@orillusion/core/dist/orillusion.umd.js"></script>
<script>  
    const { Engine3D, Camera3D } = Orillusion  
</script>

上面的链接加载了 的全局构建Orillusion，其中所有顶级 API 都作为全局Orillusion对象的属性公开。

• ESModule Build：我们推荐使用ESModule方式进行开发。由于大多数浏览器都支持ES模块，我们只需要导入ES构建版本orillusion.es.js

<script type="module">  
    import { Engine3D, Camera3D } from "https://unpkg.com/@orillusion/core/dist/orillusion.es.js" 
</script>

• Import Maps：为了管理依赖名称，我们推荐使用Import Maps

<!-- Define the name or address of ES Module -->  
<script  type="importmap">  
{  
    "imports": { "@orillusion/core": "https://unpkg.com/@orillusion/core/dist/orillusion.es.js" }  
}  
</script>  
<!-- Customerized names could be imported -->  
<script  type="module">  
    import { Engine3D, Camera3D } from "@orillusion/core"
</script>

用法

创建 Engine3D 实例

一开始，我们需要使用，然后创建Engine3D.init()实例以供进一步使用Engine3D

import { Engine3D } from '@orillusion/core' 
Engine3D.init().then(()=>{  
    // Next
})

由于Engine3D.init()是异步的，建议async/await在代码中使用

import { Engine3D } from '@orillusion/core'  
async function demo(){  
    await Engine3D.init();  
    // Next 
}  
demo()

创建画布

默认情况下，Engine3D.init()会创建一个canvas与窗口大小相同的窗口。此外，我们可以手动创建一个使用canvas标签<canvas>id

<canvas id="canvas" width="800" height="500" />

接下来，我们需要<canvas>通过传递给获取via id，然后初始化<canvas>引擎canvasConfig

import { Engine3D } from '@orillusion/core';  
let canvas = document.getElementById('canvas')  

await Engine3D.init({  
    canvasConfig: { canvas }  
})

请阅读文档以了解更多信息。

平台

窗户/苹果电脑/Linux：

• 铬 113+
• 边缘：113+

Android（在enable-unsafe-webgpu旗帜后面）：

• Chrome 金丝雀 113+
• 边缘金丝雀 113+

有用的链接

• 官方网站
• 文档
• 论坛