Ensure your title and description is adequate, and then press the `Generate Share Link` button to create a unique URL pointing to a snapshot of your edited code, as it appears right now in the editor.

Title


Description

Generate Share Link

Editor & Preview
  Copy

Preview Only
  Copy

Thumbnail
  Copy

• The generated link will be a unique URL pointing to a snapshot of the code as it was when you pressed the button.
• There is a 3mb limit on how big the script can be. Prefer to use CDN links for assets rather than embedding them as base64.
• If other people edit your code, they should generate a new `share link` if they want to share those edits. Otherwise, only they can see it.
• The code referenced by a `share link` cannot be modified later. If you need to make changes, edit the code and generate a new `share link`.
• There are no guarantees or warranties that this website, or any shared links will work, or continue to work as expected. Do not rely on it for critical services.

	Boilerplate A Basic Threejs scene with a rotating wireframe box and Orbit controls			Threejs Ocean Shader A verbatim copy/paste of the classic Threejs Ocean Shader example source code from GitHub.
	Annotations (CDN Version) An example where all the libraries and assets (Threejs, Addons, Draco, glB Model and images) are retrieved via CDN links.			Animation Controller A React Three Fiber example demonstrating smooth transitions between different animation actions based on key presses. The React, ReactDom, @react-three/fiber and @react-three/drei libraries are downloaded via CDN.
	Land on a Square A mini game made with Threejs, Gerstner Water, and Cannon-es. The Dat.GUI and Cannon-ES libraries are downloaded via CDN.			React Three Fiber useCannon This example demonstrates the useCannon hooks of usePlane, useBox, useSphere, useCylinder, useConvexPolyhedron, useTrimesh and the Cannon Debug renderer.
	R3F Starter A minimal React Three Fiber example with OrbitControls and Dat.GUI.			Hello World A minimal HTML and CSS example.
	Fizzy Text Based on the Fizzy Text example from earlier versions of the Dat.GUI GitHub repository.			Text/TypeScript A small example of transipiling TypeScript in the browser
	Python Brython Starter An example of using Brython to interpret Python in the browser.			React Starter An example of using React JSX in HTML and compiling with @babel/standalone.

• Keyboard shortcuts?

  Ctrl S : Update preview
  Alt L-Shift F : Format Code

• Can I split my program into separate files and upload images and other assets?

  No. All of your CSS, JavaScript, Importmaps and HTML should be contained in the one editable file as shown in the supplied starter templates. You can import libraries and assets from CDNs, or link the assets already hosted in this website. Example links below.

• What assets and libraries are hosted by this website so that I can avoid using a CDN?

  The Threejs repository examples fonts, jsm, models, sounds and textures folders. These folders are re-synced with the Three.js repository as required.

  Some example resource urls that you can use,

  • /build/three.module.js
  • /textures/waternormals.jpg
  • /jsm/controls/OrbitControls.js
  • /models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf
  • /textures/equirectangular/venice_sunset_1k.hdr

  There are many, many assets and libs from the Threejs repository available to use here using the same folder structure as shown in GitHub. For an idea, see the official Threejs repository examples folder on GitHub. I have also added some other assets, see the glTF assets linked in the animation controller example.

• Understanding which assets are hosted on this server is too complicated, can I use CDN links.

  Of course you can, here are some examples of loading some models and images using the JSDelivr CDN.

  • https://cdn.jsdelivr.net/gh/Sean-Bradley/React-Three-Fiber-Boilerplate@useGLTF/public/models/hammer.glb
  • https://cdn.jsdelivr.net/gh/Sean-Bradley/React-Three-Fiber-Boilerplate@followCam/public/img/grid.png
  • https://cdn.jsdelivr.net/gh/Sean-Bradley/React-Three-Fiber-Boilerplate@cannon/src/models/monkey.glb
  • https://cdn.jsdelivr.net/gh/mrdoob/three.js@master/examples/models/gltf/Xbot.glb
  • https://cdn.jsdelivr.net/gh/mrdoob/three.js@master/examples/textures/minecraft/grass_dirt.png

  And here are some examples of referencing popular libraries and there versions using the esm.sh CDN,

  • https://esm.sh/three@0.159.0
  • https://esm.sh/react@18.2.0
  • https://esm.sh/@react-three/fiber@8.15.12
  • https://esm.sh/dat.gui@0.7.9
  • https://esm.sh/cannon-es@0.20.0

• Some libraries that I import don't work?

  Yes that is true. Check all my examples, and maybe I have already solved importing the library you need. You can edit and share that example.

• Is this tool only for building Threejs and React Three Fiber examples?

  No. You can build anything in HTML, CSS and JavaScript as long as it's kept simple and can run self-contained in the browser. Open the `Starters` tab for some ideas.

editor.sbcode.net, a.k.a., the SBCODE Editor, is a small light weight editor for creating demos and sharing.

It is supplemental to my online courses, but can be used to write and share your own JavaScript examples using whatever libraries you like.

To continue to support my free tools and free content dotted around the internet, then consider purchasing one of my courses on Udemy, YouTube, or books on Amazon

Online Threejs Courses

	Three.js and TypeScript Learn Three.js while using TypeScript to create interactive 3D content on the web.
	React Three Fiber Learn about Threejs and React using React Three Fiber and Drei.
	Socket.IO in TypeScript Create multiplayer real-time interactive content that runs in the browser and on the web.
	Design Patterns In Python A Design Pattern is a description or template that can be repeatedly applied to a commonly recurring problem in software design.
	Design Patterns In TypeScript A Design Pattern is a description or template that can be repeatedly applied to a commonly recurring problem in software design.

     

Thanks,
Sean