vtj-component-model

Structure 3D components using a class-based singleton pattern linked to the Experience instance. This enforces standardized lifecycle methods including init, update, resize, and destroy to ensure safe resource disposal and proper cleanup.

Manage shared resources across Three.js components by accessing them via a central Experience singleton. This singleton integration provides a clear, reusable pattern that reduces boilerplate while maintaining consistent lifecycle management across components.

Create a Three.js component by extending the provided base pattern in your src/js/ directory. Import Experience, set up dependencies with this.experience = new Experience(), and implement lifecycle methods to register and update per frame.

Yes, this singleton pattern works specifically with Vue 3 and Three.js projects. It applies to creating new components, managers, or utilities that interact with the Three.js scene, ensuring consistent lifecycle and cleanup within that environment.

Use a singleton pattern for Three.js scene management to reduce boilerplate scaffolding and enforce standardized lifecycle methods. It ensures proper resource cleanup by providing a clear, reusable structure tied to a central Experience manager.

Implement the destroy method in a Three.js component whenever you need to clean up resources. It ensures safe disposal of geometry and materials, preventing memory leaks when the component is removed from the scene.