<h2>What</h2>
<p>This is an in-house Web3D editor project inspired by José Ferrão's <a href="https://github.com/tentone/nunuStudio">nunuStudio</a>. It modernized and improved on many aspects of the original design, while borrowing ideas from other web-based WebGL frameworks/editors such A-Frame and PlayCanvas. Here are some of the highlights:</p>
<ul>
<li><strong>Code editor</strong>: integrated with Monaco editor for JavaScript and GLSL shader editing, with syntax highlight and auto-completion support for Three.js. </li>
<li><strong>Scene editor</strong>: implemented realtime editing and inspection of Three.js scene objects, with full parameters support. </li>
<li><strong>Material editor</strong>: improved support for inspecting and previewing materials and textures. </li>
<li><strong>Editor framework</strong>: implemented serialization and caching using IndexDB. Implement save, import and export features.</li>
</ul>
<h2>Scene editing</h2>
<p><img src="/assets/blog/web3d-editor/scene-editing.png" alt="Editor Screenshot"></p>
<h2>Post-processing</h2>
<p><img src="/assets/blog/web3d-editor/post-processing.png" alt="Editor Screenshot"></p>
<h2>Standalone deployment</h2>
<p><img src="/assets/blog/web3d-editor/standalone-deploy.png" alt="Editor Screenshot"></p>


ZE.

Mirage Web3D editor

What

Scene editing

Post-processing

Standalone deployment

Feedbacks