声明:该插件基于 ISC 协议,您在使用或商用前请了解该协议具体内容。
该工具简化了创建和呈现 3D 场景的过程。您可以根据自己的需求自定义参数,创建场景并添加灯光效果。同时,它还提供了方便的接口来优雅地销毁不再需要的场景。该工具支持响应式的画布缩放,会根据窗口大小的变化自动调整渲染器和相机的设置。此外,它还提供了低帧率渲染的选项,以优化性能,尤其适用于性能有限或需要低能耗模式的设备。
- 使用一个简单的配置文件或选项来初始化场景:提供一个易于使用的配置文件或选项,让新手可以仅通过简单的配置就能完成场景的初始化。这包括设置场景尺寸、相机设置、灯光等基本属性。通过简化的配置方式,降低了新手的学习曲线。
- 内置资源管理器:实现一个内置的资源管理器,可以方便地加载、使用和销毁模型、纹理等资源。资源管理器可以追踪和管理场景中的资源,确保在销毁场景时没有产生非必要的内存泄漏。这简化了管理和清理资源的过程,同时提高了场景的性能和可靠性。
- 提供开放式属性和 API:确保框架与原生 Three.js 的使用方式高度统一,使开发者可以方便地使用 Three.js 的 API 接口进行操作。这使得新手可以更容易理解和使用框架,并且可以利用 Three.js 强大的功能和特性。
- 初始化和运行时函数注入:通过提供初始化和运行时函数注入的方式,允许开发者在适当的时机插入自定义的逻辑。例如,在初始化场景之前或每帧渲染之前插入自定义函数。这为开发者提供了更高的扩展性,可以根据需求灵活地添加自定义功能和行为。这样,新手可以轻松地扩展框架的功能,以满足其特定的需求。
npm i scene3d
pnpm i scene3d
yarn add scene3d
-
初始化
<div id="demo"></div> <script type="module"> import { scene3D } from '../dist/scene3d.mjs' let webcompoent = new scene3D('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>
-
加载模型
let models = webcompoent.getModel("./Horse.glb"); models.then((model) => { webcompoent.addMesh(webcompoent.scene, model.children[0]); });
- html
- vite+vue
- 使用疑问+ 2632622425@qq.com