巴比伦JS 查看器

巴比伦取景器旨在简化一个具体而常见的取景器. js使用例:加载,取景,并和3D模型交互.

• API 密码
• 文档
• 特性请求
• 支助

使用一个 Bundler

使用 npm 安装软件包 :

npm install @babylonjs/viewer

用来使用 HTML3DElement 您可以导入 @babylonjs/viewer 模块,然后引用 <babylon-viewer> 在您的 HTML 中像这样自定义元素 :

<html lang="en">
    <body>
        <!-- Note: If @babylonjs/viewer is already being imported somewhere in your JavaScript, you don't need this script import. -->
        <script type="module">
            import "@babylonjs/viewer";
        </script>
        <babylon-viewer source="https://playground.babylonjs.com/scenes/BoomBox.glb"></babylon-viewer>
    </body>
</html>

使用 Lite 查看器

通过切换您的导入路径, 可以获得一个重量更轻, WebGPU- first 变体 @babylonjs/viewer 改为 @babylonjs/viewer/lite数字 :

import "@babylonjs/viewer/lite";

这个 <babylon-viewer> 元素的工作原理相同。 这个变体建立在 @babylonjs/lite (安装在观众旁边),这是一个更小的引擎,但是是 尚未完成特性,因此可能不具备一些取景器能力.

在浏览器中直接使用

如果您想要在浏览器中直接使用浏览器, 而没有任何构建工具, 您可以通过 CDN 等程序使用自定义的ESM 捆绑( 包括所有依赖性 ) 日记, (中文(简体) ), 联科办,或者你自己的CDN像这样:

<html lang="en">
    <body>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@babylonjs/viewer/dist/babylon-viewer.esm.min.js"></script>
        <babylon-viewer source="https://playground.babylonjs.com/scenes/BoomBox.glb"></babylon-viewer>
    </body>
</html>

见 代码: 例如,现场演示.