vi3d

声明：该插件基于 ISC 协议,您在使用或商用前请了解该协议具体内容。

介绍

该工具简化了创建和呈现 3D 场景的过程。您可以根据自己的需求自定义参数，创建场景并添加灯光效果。同时，它还提供了方便的接口来优雅地销毁不再需要的场景。该工具支持响应式的画布缩放，会根据窗口大小的变化自动调整渲染器和相机的设置。此外，它还提供了低帧率渲染的选项，以优化性能，尤其适用于性能有限或需要低能耗模式的设备。

优势

1. 使用一个简单的配置文件或选项来初始化场景：提供一个易于使用的配置文件或选项，让新手可以仅通过简单的配置就能完成场景的初始化。这包括设置场景尺寸、相机设置、灯光等基本属性。通过简化的配置方式，降低了新手的学习曲线。
2. 内置资源管理器：实现一个内置的资源管理器，可以方便地加载、使用和销毁模型、纹理等资源。资源管理器可以追踪和管理场景中的资源，确保在销毁场景时没有产生非必要的内存泄漏。这简化了管理和清理资源的过程，同时提高了场景的性能和可靠性。
3. 提供开放式属性和 API：确保框架与原生 Three.js 的使用方式高度统一，使开发者可以方便地使用 Three.js 的 API 接口进行操作。这使得新手可以更容易理解和使用框架，并且可以利用 Three.js 强大的功能和特性。
4. 初始化和运行时函数注入：通过提供初始化和运行时函数注入的方式，允许开发者在适当的时机插入自定义的逻辑。例如，在初始化场景之前或每帧渲染之前插入自定义函数。这为开发者提供了更高的扩展性，可以根据需求灵活地添加自定义功能和行为。这样，新手可以轻松地扩展框架的功能，以满足其特定的需求。

安装教程

1. npm i vi3d
2. pnpm i vi3d
3. yarn add vi3d

使用示例

1. 初始化

   <div id="demo"></div>
   <script type="module">
       import { vi3d } from '../dist/vi3d.mjs'
       let webcompoent = new vi3d('demo', {
           sceneOption: {
               background: 'rgb(0,14,31)'
           },
           startFun: [
           ],
           cameraOption: {
               position: {
                   x: 0,
                   y: 100,
                   z: 100,
               },
               rotation: { x: 0, y: 0, z: 0 },
               lookAt: { x: 0, y: 0, z: 0 },
           },
           controls: {
               target: { x: 0, y: 0, z: 0 },
               maxPolarAngle: Math.PI / 2,
               maxDistance: 100,
               minDistance: 0.1,
           }
       })
   
   </script>

2. 加载模型

   let models = webcompoent.getModel("./Horse.glb");
   models.then((model) => {
     webcompoent.addMesh(webcompoent.scene, model.children[0]);
   });

框架集成示例

1. html

   

2. vite+vue

   

其他

1. 使用疑问+ [e-mail]