https://producthunt.programnotes.cn/en/tags/git-clone/ Recent content in Git Clone on Producthunt daily Hugo -- gohugo.io en Thu, 26 Jun 2025 15:31:08 +0800 https://producthunt.programnotes.cn/en/p/multiplewindow3dscene/ Thu, 26 Jun 2025 15:31:08 +0800 https://producthunt.programnotes.cn/en/p/multiplewindow3dscene/ <img src="https://images.unsplash.com/photo-1555077445-0c0f29d9302c?ixid=M3w0NjAwMjJ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTA5MjI5NzV8&ixlib=rb-4.1.0" alt="Featured image of post multipleWindow3dScene" /><h1 id="bgstaalmultiplewindow3dscene"><a class="link" href="https://github.com/bgstaal/multipleWindow3dScene" target="_blank" rel="noopener" >bgstaal/multipleWindow3dScene</a> </h1><h1 id="multiple-window-3d-scene-using-threejs">Multiple Window 3D Scene using Three.js </h1><h2 id="introduction">Introduction </h2><p>This project demonstrates a unique approach to creating and managing a 3D scene across multiple browser windows using Three.js and localStorage. It&rsquo;s designed for developers interested in advanced web graphics and window management techniques.</p> <h2 id="features">Features </h2><ul> <li>3D scene creation and rendering with Three.js.</li> <li>Synchronization of 3D scenes across multiple browser windows.</li> <li>Dynamic window management and state synchronization using localStorage.</li> </ul> <h2 id="installation">Installation </h2><p>Clone the repository and open <code>index.html</code> in your browser to start exploring the 3D scene.</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">git clone https://github.com/bgstaal/multipleWindow3dScene </span></span></code></pre></td></tr></table> </div> </div><h2 id="usage">Usage </h2><p>The main application logic is contained within <code>main.js</code> and <code>WindowManager.js</code>. The 3D scene is rendered in <code>index.html</code>, which serves as the entry point of the application.</p> <h2 id="structure-and-components">Structure and Components </h2><ul> <li><code>index.html</code>: Entry point that sets up the HTML structure and includes the Three.js library and the main script.</li> <li><code>WindowManager.js</code>: Core class managing window creation, synchronization, and state management across multiple windows.</li> <li><code>main.js</code>: Contains the logic for initializing the 3D scene, handling window events, and rendering the scene.</li> <li><code>three.r124.min.js</code>: Minified version of the Three.js library used for 3D graphics rendering.</li> </ul> <h2 id="detailed-functionality">Detailed Functionality </h2><ul> <li><code>WindowManager.js</code> handles the lifecycle of multiple browser windows, including creation, synchronization, and removal. It uses localStorage to maintain state across windows.</li> <li><code>main.js</code> initializes the 3D scene using Three.js, manages the window&rsquo;s resize events, and updates the scene based on window interactions.</li> </ul> <h2 id="contributing">Contributing </h2><p>Contributions to enhance or expand the project are welcome. Feel free to fork the repository, make changes, and submit pull requests.</p> <h2 id="license">License </h2><p>This project is open-sourced under the MIT License.</p> <h2 id="acknowledgments">Acknowledgments </h2><ul> <li>The Three.js team for their comprehensive 3D library.</li> <li>x.com/didntdrinkwater for this readme.</li> </ul> <h2 id="contact">Contact </h2><p>For more information and updates, follow <a class="link" href="https://twitter.com/_nonfigurativ_" target="_blank" rel="noopener" >@<em>nonfigurativ</em></a> on Twitter.</p>