Threedsvg : The SVG to 3D Converter! Our converter effortlessly transforms flat SVG logos into dynamic 3D visuals, adding a whole new dimension to your branding projects. It's user-friendly, efficient, and designed to seamlessly integrate into your workflow.

Threedsvg

Upload your assets in a variety of formats, including&nbsp;GLTF, USD, FBX and VRM. We prepare them for various usecases using our state-of-the-art optimization pipeline.You can embed them in your website, share links with others, or download them for further use. The web is all about performance. Our pipeline automatically generates&nbsp;multiple levels of detail for meshes and textures, and loads them only when needed. This way, your users get the best experience, no matter the device.Our optimization presets allow you to choose what's right for your project: from&nbsp;hero assets&nbsp;for product showcases, to&nbsp;scene props&nbsp;that are part of a complex assembly.

Needle Cloud

Upload, share and optimize 3D files and host your spatial web apps.

hex-to-gsl

<a href="https://x3js.com/en" rel="noopener noreferrer" target="_blank">X3JS Three.js Game Engine</a> empowers developers to create high-quality and fast-working web games, whether they know how to code or not, and all without any costs. It removes the burden of managing hosting expenses for your game assets and files. By leveraging our platform, developers can directly publish their games in front of audience.

X3JS

We ❤️ Three.js and X3JS is a browser-based game engine built on Three.js

Procedurally generated low poly parametric modeling for Three.js. Example scenes:<ul><li><a href="https://jasonsturges.com/three-low-poly/scenes/library" rel="noopener noreferrer" target="_blank">Library</a>: Procedural modeling of 6,000 books, each with unique shape and color</li><li><a href="https://jasonsturges.com/three-low-poly/scenes/mad-science" rel="noopener noreferrer" target="_blank">Mad Science Laboratory</a>: Example scene using parametric models</li></ul> NPM Package install:npm i three-low-poly

Three Low Poly

Parametric low poly modeling for Three.js

Wiggle Tool for Three.js The Wiggle Tool is a handy utility for adding dynamic motion effects to objects in Three.js. It simplifies the process of creating smooth, natural-looking animations, such as shaking, oscillating, or bouncing movements, with minimal setup. <h3>Features:</h3><ul><li>User-friendly interface for configuring motion parameters.</li><li>Real-time previews to test and refine animations.</li><li>Easy integration into Three.js projects with generated code snippets.</li></ul>This tool is ideal for developers looking to enhance their 3D scenes with playful and interactive motion effects.

Wiggle

The Wiggle Tool is a handy utility for adding dynamic motion effects to objects in Three.js.

Unlike other tools that can distort meshes our advanced compression technology reduce file sizes by up to 90% without removing vital details from the mesh, ensuring your models stay perfectly intact.Whether you’re working with high-poly models or intricate designs, our technology speeds up loading times and saves up to 80% in bandwidth, making it easier to share complex geometries and textures.Perfect for designers and developers aiming for smooth workflows and flawless project performance! Boost your 3D projects with our powerful 3D converter!

Objectverse Converter

Optimise your 3D assets for Spatial Web, Gaming, AR/VR experiences

TinyGLB allows you to share and embed GLB models simply and quickly. Upload your 3D model and instantly get a custom web page to share or embed within a website.

TinyGLB

R3F Flow Field Particles Component

A particle system based on GPGPU, running with React Three Fiber

Build Interactive 3D CAD&nbsp;Applications We’re thrilled to announce the release of a new open-source NPM package for one of the most popular game engines on the web - ThreeJS. This package helps in creating 3D CAD applications by using our core technology stack. Access advanced geometry kernels and share your designs with the world. With this package, you’ll gain access to the code powering <a href="https://bitbybit.dev/" rel="noopener noreferrer" target="_blank">https://bitbybit.dev</a> platform. Live Demo:<a href="https://app-store.bitbybit.dev/patterns/" rel="noopener noreferrer" target="_blank">https://app-store.bitbybit.dev/patterns/</a>NPM Package:<a href="https://www.npmjs.com/package/@bitbybit-dev/threejs" rel="noopener noreferrer" target="_blank">https://www.npmjs.com/package/@bitbybit-dev/threejs</a>Demo Source Code:<a href="https://github.com/bitbybit-dev/app-examples/blob/main/webpack/threejs/src/code/patterns.ts" rel="noopener noreferrer" target="_blank">https://github.com/bitbybit-dev/app-examples/blob/main/webpack/threejs/src/code/patterns.ts</a> We’ve included helper functions to seamlessly convert shapes from OpenCascade and JSCAD geometry kernels into ThreeJS meshes. This makes it simple to build complex designs for 3D printing, automotive, AEC, and many other industries. Additionally, you can enable users to download STEP files, an industry-standard format that can be further edited in software like FreeCAD. Read more on our blog post:<a href="https://bitbybit.dev/blog/threejs-support" rel="noopener noreferrer" target="_blank">https://bitbybit.dev/blog/threejs-support</a>

CAD npm package for threejs by bitbybit.dev

3D CAD algorithms of bitbybit.dev for ThreeJS developers. Powerful geometry kernels for your apps.

<h2>What is Mattercraft?</h2> Mattercraft is a visual 3D content development platform designed to bridge the worlds of web, AR, VR, WebXR, 3D and game development. Perfect for web developers familiar with Three.js who are looking for a visual editor or game developers venturing into building web-based experiences. Mattercraft offers an intuitive, powerful development environment for building rich interactive content. Built with Three.js at the core, Mattercraft makes it easy to design, preview and publish dynamic 3D experiences without complex hand-coding. Its user-friendly interface lets you visually construct scenes, animations, physics, particles and interactions, while leveraging the best features on the web. <h2>Features</h2> <h3>Visual animation system</h3>Mattercraft features a rich and innovative animation system that includes layers, timelines and states. Unlock your creativity with keyframe support, custom curves, seamless interpolation transitions and 3D model animations. Craft unique animations effortlessly, redefining the way you bring your 3D web content to life. <h3>Realtime&nbsp;physics</h3>Experience cutting edge realism using the web optimised Havok physics engine, all managed via the interface for a simple and easy to use development process. <h3>Particle&nbsp;effects</h3>Take your experiences to the next level with particle effects. Choose from one of 6 pre-built effects or create your own. <h3>Augmented Reality</h3>Seamlessly develop immersive world, face, and image tracked augmented reality content. <h3>Visual Positioning System</h3>Mattercraft’s integration with Immersal empowers you to create immersive indoor and outdoor 3D environments with zero code, using the world’s most versatile and accurate Visual Positioning System (VPS). <h3>Headset&nbsp;support</h3>Effortlessly create Mixed and Virtual reality content (WebXR) for leading headsets such as Apple Vision Pro, Meta Quests, Magic Leap, and Zapbox. <h3>Seamless Scripting</h3>Mattercraft leverages Monaco, the excellent text editor from Visual Studio Code, to provide a delightful and responsive coding experience with a TypeScript compiler. <h3>Responsive UI with HTML</h3>Easy to build 2D screen UI. Making use of web standards (HTML and CSS). <h3>NPM</h3>Mattercraft lets you leverage your existing expertise and tooling, including full integration with the NPM repository of JavaScript libraries. <h3>Instant&nbsp;live preview</h3>Review your experiences with a single click and see real-time updates or make use of the built-in simulator to preview your content on different device sizes and network connections. <h3>One click publishing</h3>When hosting with Zapworks, you can instantly publish as many times as you need. Get your content into the hands of your users as soon as possible with no review times. <h3>Multi-user collaboration</h3>Develop collaboratively with multiple team members, Google docs style. <h3> </h3>

Mattercraft

Mattercraft is a visual editor perfected for building interactive 3D, AR, VR and WebXR experiences. 

WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser.It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app.

webglstudio

<h3>Company Overview</h3>Peach Worlds is the first no-code builder for 3D websites, empowering designers to effortlessly create immersive, interactive experiences in a fraction of the time. By combining familiar 3D, Motion, and UI tools into one powerful toolset, Peach Worlds acts as a website within a drag-and-drop 3D canvas. We are the future of 3D web design and we are setting a new standard for online presence,<h3> </h3><h3>Technological Overview</h3>Peach Worlds combines cutting-edge 3D technology with an intuitive, no-code website builder, allowing designers to seamlessly integrate 3D elements, motion graphics, and UI components into fully immersive websites. Here’s how Peach Worlds makes it happen: Drag-and-Drop 3D Canvas:<ul><li>A visual workspace where designers can import and manipulate 3D models, set lighting, adjust environments, and apply post-processing effects—no coding required.</li></ul>Keyframe Animation Tools:<ul><li>Easily animate elements and trigger interactions with keyframe-based animations to enhance storytelling and engage users.</li></ul>Integrated UI Editor:<ul><li>Create responsive, visually appealing layouts by blending traditional 2D web design with 3D elements, ensuring seamless scrolling and smooth transitions.</li></ul>Optimized Performance Engine:<ul><li>Peach Worlds uses a custom-built engine and compression tools to optimize 3D models and graphics, ensuring fast load times and smooth performance across devices.</li></ul>Global Hosting with AWS &amp; CDN:<ul><li>Hosted on AWS infrastructure with CloudFront CDN, ensuring low-latency experiences and fast delivery anywhere in the world.</li></ul>With Peach Worlds, designers can focus on their creativity while the platform takes care of the technical complexities—allowing them to build next-level 3D web experiences that perform beautifully.

Peach Worlds

<h4>Facetype.js – 3D Text Geometry Rendering for Three.js Resources</h4>What is Facetype.js?Facetype.js is a lightweight JavaScript library designed to render 3D text geometry directly in web applications. Specifically optimized for use with three.js, it allows developers to create and manipulate 3D text with ease, making it an excellent resource for building interactive web experiences, games, and visualizations that require dynamic text elements in 3D space. Key Features:<ul><li>3D Text Rendering: Facetype.js allows you to easily generate 3D text geometry, making it possible to display interactive and customizable text in your three.js scenes.</li><li>Font Support: The library supports a variety of font types, giving you flexibility in creating stylized and high-quality 3D text for your projects.</li><li>Customizable Appearance: Modify the properties of the 3D text, including font size, depth, material, and position, ensuring that the text fits seamlessly into your three.js environments.</li><li>Lightweight and Fast: Facetype.js is designed to be lightweight, ensuring it doesn’t impact the performance of your three.js applications, making it suitable for real-time rendering projects.</li><li>Easy Integration: Built with three.js in mind, Facetype.js is easy to implement, allowing you to quickly integrate 3D text into your existing projects without complicated setup.</li></ul> Why Use Facetype.js?Facetype.js is an ideal resource for developers working with three.js who need to render dynamic 3D text in their applications. Whether you’re adding text to a game, an interactive web page, or a 3D visualization, Facetype.js simplifies the process of creating and customizing 3D text, allowing you to focus on other aspects of your project while ensuring high-quality output.

Facetype

Facetype.js is a JavaScript library that renders 3D text geometry, ideal for three.js resources.

uil.js is a lightweight ui for javascript with a complete 3d display support.totally customizable, only 6 events, auto resize

uil.js is a lightweight ui for javascript with a complete 3d display support. totally customizable, 

Makes a floating panel for controllers on the web. Works as a drop-in replacement for dat.gui in most projects. See&nbsp;<a href="https://lil-gui.georgealways.com/#Migrating" rel="noopener noreferrer" target="_blank">Migrating</a>&nbsp;for a list of breaking changes.

lil-gui

Makes a floating panel for controllers on the web. Works as a drop-in replacement for dat.gui.

Guify is a runtime JS library that gives you a simple way to build a GUI for your JS projects. It pairs very well with&nbsp;<a href="https://threejs.org/" rel="noopener noreferrer" target="_blank">three.js</a>&nbsp;and&nbsp;<a href="https://p5js.org/" rel="noopener noreferrer" target="_blank">p5.js</a>. Consider it an opinionated take on&nbsp;<a href="https://github.com/dataarts/dat.gui" rel="noopener noreferrer" target="_blank">dat.GUI</a>.

Guify

Guify is a runtime JS library that gives you a simple way to build a GUI for your JS projects. 

Tweakpane is a pane-based control panel library designed for adjusting parameters in real time within web applications. It’s an ideal resource for developers working with three.js who need a simple, intuitive interface for modifying variables such as object properties, lighting, and camera positions. Tweakpane offers a flexible, modular approach to control panels, making it easy to integrate into 3D projects and fine-tune settings without writing excessive code.Key Features:<ul><li>Real-Time Parameter Control: Tweakpane allows developers to adjust parameters and see immediate visual feedback in their three.js projects, making it perfect for fine-tuning object properties and effects.</li><li>Customizable UI: Build clean, customizable user interfaces with sliders, color pickers, dropdowns, and more to control variables within your 3D scenes.</li><li>Plugin Support: Extend Tweakpane’s functionality with plugins that add new controls or integrate more complex UI components, giving you more control over your three.js projects.</li><li>Nested Folders: Organize controls into nested folders, helping you manage complex 3D scenes and their settings more efficiently.</li><li>Low Overhead: Tweakpane is designed to be lightweight, ensuring it doesn’t slow down your application, even in real-time environments where performance is critical.</li></ul>Why Use Tweakpane?Tweakpane is an excellent resource for developers working with three.js who need real-time control over scene parameters. Whether you are adjusting object properties, refining lighting effects, or experimenting with camera angles, Tweakpane provides an intuitive and highly customizable UI that simplifies the development process. Its lightweight design ensures smooth integration into your three.js projects without compromising performance.

Tweakpane

Tweakpane is a pane-based control library for real-time parameter adjustments in three.js resources.

Built to allow you to convert .obj, .fbx, .gltf and .glb files to a .glb file, this also supports adding .fbx file animations from places such as <a href="https://www.mixamo.com" rel="noopener noreferrer" target="_blank">Mixamo</a> to the models.Can add more animations to a model which has existing ones or you can add new ones. You can also add hundreds of animations to hundreds of models all at once and export the new versions as .glb files.To achieve the ability to export, all of the models must be showing as Material OK, this can be achieved by either uploading the texture (or you can bulk upload to many models at once by selecting that option and clicking the checkboxes where you wish it to happen) or by clicking the add standard material button. The standard material button will colour your object a purple/pink colour.The export will happen when you click the Export All Files button and this will generate and save a zip file via your browser full of all of your .glb versions of the models.This Site does not use any form of back-end and the items used in it are only ever processed in your own browser.

Meshamorphosis

Allows batch convert of fbx/obj/gltf to glb, can also batch add animation fbx files from Mixamo

EZ-Tree is a procedural tree generator with dozens of tunable parameters. The standalone tree generation code is published as a library and can be imported into your own application for dynamically generating trees on demand. Additionally, there is a standalone web app which allows you to create trees within the browser and export as .PNG or .GLB files. <h3>Features </h3><ul><li>50+ tunable parameters </li><li>15 built-in presets </li><li>Create your own presets </li><li>Export to GLB/PNG </li><li>NPM package</li></ul>

EZ-Tree

A free, open-source, procedural tree generation tool and library.

Elements Hive&nbsp;is a Breakdance Add-on that adds advanced Elements and Extensions, allowing you to build interactive website experiences you never thought were possible with a WordPress page builder.

Elements Hive

A collection of WebGL Elements and Extensions for creating Web Experiences in WordPress

Hey there! I’m excited to introduce OptimizeGLB, a tool designed to compress and optimize .GLB and .GLTF 3D models. It’s built to shrink file sizes by up to 90%, making them perfect for faster load times in AR, VR, gaming, and web applications. You get 5 free compressions, and after that, it's $10 for 100 conversions. For businesses, we offer an API to integrate our compression tool seamlessly into your workflow. We’re especially excited to see the three.js community using OptimizeGLB! We’d love to hear your feedback as we continue to improve.

OptimizeGLB

Online tool to compress and optimize .GLB and .GLTF 3D models for faster load times

<h1>Ditch the boring traditional content and embrace digital experiences.</h1> Cyango Cloud Studio is the easiest tool to create XR experiences. It's like adding a new XR department to your business. You can create:<ul><li>Virtual Tours</li><li>3D E-commerce viewers</li><li>3D websites</li><li>Maps in immersive mode (2D/3D)</li><li>UI themes</li><li>Interactive presentations</li><li>Augmented Reality</li><li>Android/iOS Apps and PWA</li><li>...and what your imagination allows!</li></ul>All WebXR compatible.

Cyango

All-in-one Experiences Builder. From 2D to 3D, you can build and export full mobile and web apps.

Create 3D games and experiences for web, mobile, and VR using Hology Engine web technologies. Suitable for designers, web developers, artists, creators, educators, and game developers who wish to use front-end web technologies such as React and TypeScript, and no-code solutions for features such as VFX. Use case: Building web, mobile, PC games/applications, 3D/VR websites, personal portfolios online, and more. Efficiency: Hot reloading, fast asset import, automatic collision shapes, plus easy mobile and web distribution. Minimalistic: Our minimalistic UI is inspired to help designers, artists, and developers to a fast prototyping experience. Available to use on Windows, Linux, macOS, and we will build a version for iPads in the future.

Hology Engine

Create 3D games and experiences for web, mobile and VR by using web technologies with Hology Engine.

Leva – Intuitive GUI Library for Three.js Resources What is Leva?Leva is a powerful and flexible GUI library that allows developers to create intuitive, real-time controls for adjusting variables in web applications. Built with modern web development in mind, Leva is often used in three.js projects to provide an interactive way to manipulate scene parameters, making it an ideal resource for developers working with 3D graphics and interactive web content. Key Features:<ul><li>React Integration: Leva works seamlessly with React, offering a component-based approach to integrating GUI controls into your project.</li><li>Easy Configuration: Create controls for various types of input, such as numbers, booleans, vectors, and colors, with minimal setup.</li><li>Live Updates: Provides real-time updates to parameters, making it a great tool for fine-tuning visuals and testing different configurations.</li><li>Customizable Appearance: Leva allows for the customization of its appearance, enabling developers to style the control panel according to their application's design.</li><li>Lightweight and Fast: Designed to have a minimal footprint, Leva ensures your application's performance remains unaffected.</li></ul> Why Use Leva?Leva is an ideal tool for developers who work with three.js resources and need a way to control parameters interactively. Its real-time capabilities allow for quick adjustments, which can be especially useful for testing different configurations in 3D environments. Whether you’re fine-tuning camera settings, adjusting material properties, or exploring animation parameters, Leva provides a user-friendly interface for managing complex scenes.

Leva

Leva is a GUI library for creating intuitive controls in three.js resources and web projects.

<h4>dat.GUI – Real-Time Controller Library for Three.js Resources</h4> What is dat.GUI? dat.GUI is a lightweight and easy-to-use JavaScript library for creating graphical user interfaces that allow for real-time manipulation of variables in web applications. Often used with three.js, dat.GUI serves as a valuable resource for developers who want to add interactive controls to their 3D scenes, making it easy to tweak parameters such as colors, sizes, and positions on the fly. Key Features:<ul><li>Easy Integration with Three.js: dat.GUI seamlessly integrates with three.js projects, allowing you to adjust scene variables like lighting, camera position, and object properties in real time.</li><li>Intuitive Interface: Offers a simple slider, color picker, and dropdown controls that make it easy to manipulate values.</li><li>Live Updates: Changes are applied instantly, making it ideal for fine-tuning effects and debugging.</li><li>Customizable: Supports custom controllers and styles, giving developers the flexibility to extend its functionality.</li><li>Lightweight: Minimalistic design ensures it doesn’t add unnecessary overhead to your project.</li></ul> Why Use dat.GUI?dat.GUI is a powerful resource for developers working with three.js, providing a simple way to fine-tune 3D scenes. Whether you're adjusting camera settings, testing material properties, or optimizing visual effects, dat.GUI enables real-time updates that help you achieve the desired outcome quickly and efficiently.

Dat.gui

dat.GUI is a lightweight controller library for real-time adjustments in three.js resources.

Three js tools & extensions