<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Marwan W Elzeiny</title>
    <description>The latest articles on DEV Community by Marwan W Elzeiny (@marwanwelzeiny).</description>
    <link>https://dev.to/marwanwelzeiny</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4051800%2F0def7abb-a5ab-406f-a620-329d714b957f.png</url>
      <title>DEV Community: Marwan W Elzeiny</title>
      <link>https://dev.to/marwanwelzeiny</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/marwanwelzeiny"/>
    <language>en</language>
    <item>
      <title>Introducing Volare: A Buildless 3D Model Viewer for the Web</title>
      <dc:creator>Marwan W Elzeiny</dc:creator>
      <pubDate>Tue, 28 Jul 2026 16:56:08 +0000</pubDate>
      <link>https://dev.to/marwanwelzeiny/introducing-volare-a-buildless-3d-model-viewer-for-the-web-eb5</link>
      <guid>https://dev.to/marwanwelzeiny/introducing-volare-a-buildless-3d-model-viewer-for-the-web-eb5</guid>
      <description>&lt;p&gt;After months of development, I’m excited to introduce Volare — an open-source, buildless 3D model viewer library built for the web using JavaScript and Three.js.&lt;/p&gt;

&lt;p&gt;The goal behind Volare was simple: make displaying and interacting with 3D models on the web easier, without requiring a complicated setup, framework, or build pipeline.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffjyelq8qhoamzap7lqjt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffjyelq8qhoamzap7lqjt.png" alt=" " width="800" height="424"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Why Volare?&lt;/p&gt;

&lt;p&gt;Working with 3D content on the web can often involve a lot of setup. Developers may need to configure bundlers, manage rendering systems, handle asset loading, and build custom tools just to get a model displayed.&lt;/p&gt;

&lt;p&gt;I wanted to create a simpler approach:&lt;/p&gt;

&lt;p&gt;Import the library&lt;br&gt;
Load a model&lt;br&gt;
Customize the experience&lt;br&gt;
Deploy anywhere&lt;/p&gt;

&lt;p&gt;No complex infrastructure. Just a lightweight way to bring interactive 3D to the browser.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi3ssj6kexicj96b9w2f8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi3ssj6kexicj96b9w2f8.png" alt=" " width="800" height="425"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What is Volare?&lt;/p&gt;

&lt;p&gt;Volare is a JavaScript 3D viewer library powered by Three.js.&lt;/p&gt;

&lt;p&gt;It is designed for developers who want to integrate interactive 3D models into websites and applications while keeping the workflow simple and flexible.&lt;/p&gt;

&lt;p&gt;Some of the main features include:&lt;/p&gt;

&lt;p&gt;Interactive 3D model viewing&lt;br&gt;
HDRI environment lighting&lt;br&gt;
Camera controls&lt;br&gt;
Customizable themes and appearance&lt;br&gt;
Developer-friendly API&lt;br&gt;
Browser-based rendering&lt;br&gt;
Buildless usage options&lt;br&gt;
Built with Three.js&lt;/p&gt;

&lt;p&gt;Three.js provides a powerful foundation for creating 3D experiences on the web. Volare builds on top of that ecosystem while focusing on creating a cleaner, more accessible viewer experience.&lt;/p&gt;

&lt;p&gt;The goal is not to replace Three.js, but to make common viewer workflows easier.&lt;/p&gt;

&lt;p&gt;Example&lt;/p&gt;

&lt;p&gt;A simple Volare setup looks like this:&lt;/p&gt;

&lt;p&gt;import { createVolareViewer } from "volare";&lt;/p&gt;

&lt;p&gt;const viewer = createVolareViewer({&lt;br&gt;
  container: "#viewer"&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;From there, developers can customize the viewer, load models, and create their own 3D experiences.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Falg56s7mh2a3ztwg907t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Falg56s7mh2a3ztwg907t.png" alt=" " width="799" height="423"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What I Learned Building Volare&lt;/p&gt;

&lt;p&gt;Creating Volare was an opportunity to explore many areas of web graphics and software development:&lt;/p&gt;

&lt;p&gt;Real-time rendering&lt;br&gt;
3D asset pipelines&lt;br&gt;
JavaScript module design&lt;br&gt;
Performance optimization&lt;br&gt;
User experience for technical tools&lt;/p&gt;

&lt;p&gt;Building a reusable library is very different from building a single application. Every decision needs to consider flexibility, simplicity, and future users.&lt;/p&gt;

&lt;p&gt;Open Source&lt;/p&gt;

&lt;p&gt;Volare is now available as an open-source project.&lt;/p&gt;

&lt;p&gt;I’m sharing it publicly because I believe tools become better when developers can explore them, improve them, and build on top of them.&lt;/p&gt;

&lt;p&gt;GitHub:&lt;br&gt;
&lt;a href="https://github.com/MarwanWElzeiny/Volare" rel="noopener noreferrer"&gt;https://github.com/MarwanWElzeiny/Volare&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Demo:&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://marwanwelzeiny.github.io/Volare/DEMO/direct" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;marwanwelzeiny.github.io&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;Gallery Demo: &lt;a href="https://marwanwelzeiny.github.io/Volare/DEMO/" rel="noopener noreferrer"&gt;https://marwanwelzeiny.github.io/Volare/DEMO/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you try it, I’d love to hear your feedback, ideas, and suggestions for future improvements.&lt;/p&gt;

&lt;p&gt;Thanks for checking out Volare.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>opensource</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
