🚀 babylon-vue-utils

A utility library for BabylonJS in Vue applications, providing simplified APIs for common 3D operations.

🎯 Features

• Scene Management: Easy scene setup and management
• Model Loading: Simplified APIs for loading models in various formats
• Lighting Utilities: Pre-configured lighting setups
• Camera Controls: Enhanced camera controls and interactions
• Material Helpers: Quick creation and management of materials
• Performance Optimizations: Best practices built-in
• Vue Integration: Seamless integration with Vue components

📦 Installation

npm install babylon-vue-utils

📚 Quick Start

import { createApp } from 'vue';
import App from './App.vue';
import { SceneManager } from 'babylon-vue-utils';

// Create and mount Vue app
createApp(App).mount('#app');

<template>
  <div>
    <canvas id="renderCanvas"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount } from 'vue';
import { SceneManager, ModelLoader, LightManager } from 'babylon-vue-utils';
import { Color4, Vector3 } from 'babylonjs';

export default defineComponent({
  name: 'BabylonScene',
  setup() {
    let sceneManager: SceneManager;

    onMounted(() => {
      // Initialize scene
      sceneManager = new SceneManager({
        canvasId: 'renderCanvas',
        clearColor: new Color4(0.2, 0.2, 0.3, 1),
        antialiasing: true
      });

      // Setup lighting
      const lightManager = new LightManager(sceneManager.scene);
      const lights = lightManager.createDefaultLighting(new Vector3(1, -1, 1));

      // Load a model
      const modelLoader = new ModelLoader(sceneManager.scene);
      modelLoader.loadGLTF('https://models.babylonjs.com/CornellBox/cornellBox.glb', {
        scaling: { x: 1, y: 1, z: 1 },
        position: { x: 0, y: 0, z: 0 },
        receiveShadows: true
      });

      // Start rendering
      sceneManager.run();
    });

    onBeforeUnmount(() => {
      // Clean up resources
      if (sceneManager) {
        sceneManager.dispose();
      }
    });

    return {};
  }
});
</script>

<style scoped>
canvas {
  width: 100%;
  height: 100vh;
  outline: none;
  touch-action: none;
}
</style>

📕 API Documentation

For complete API documentation, please visit:

Full API Documentation

🔍 Examples

Check out the examples directory for more usage examples:

• Basic Scene Setup
• Model Loading and Manipulation
• Advanced Lighting Techniques
• Camera Controls
• Material and Texture Usage
• Physics Integration
• Performance Optimization

📝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• BabylonJS
• Vue.js
• TypeScript