Collaborative Three.JS

[Civ3ro]

Hello Three JS!
Trello

[Brackets-Coder]

I'm creating individual branches of the repo for each creator, which is where the majority of your work will happen. The master branch will likely combine all of them and eventually host the "main" extension (whether it is an existing extension, a combination, or something new)

[Brackets-Coder]

If you'd like to rest that's fine, I'll be up for a while

[Brackets-Coder]

I'd be happy to start from scratch if everyone else is comfortable with it.
I haven't gotten very far in the development of my own and starting from scratch would allow all of us to be familiar with the same codebase.
I know you've already made a whole extension so it would be quite a reset for you

[Brackets-Coder]

Of course, I haven't seen Drago's code yet so when that happens I'll be able to make a better decision about how to proceed.

[Civ3ro]

No problem, I started making the extension with 0% knowledge of JavaScript or Scratch internals. So it can be upgraded in many ways, surely.

[Brackets-Coder]

Knowing JS does help a lot 😅
I'm perfectly comfortable starting from scratch as well since I've hardly done anything

[Brackets-Coder]

I've also decided I'm going to change how the repository is organized, it should be very clear for you guys and all in the main branch

[Civ3ro]

Oh here's the zip @Brackets-Coder
Extra3D+Ammo.zip

[Brackets-Coder]

thanks so much

[Brackets-Coder]

That's funny, stepping the simulation makes the cube disappear but there seems to be no performance problems and there's no errors in the console. I'm also not getting the memory error you're getting, but I suppose that's because my machine has 36GB... Do you have any other ideas as to why this might be happening? I haven't taken a look at your transformation blocks yet...

Found the problem:
Returning the position makes it appear at [0,-1068474944, 0], which would explain why your cube is off-screen. It's likely your transformations are applying in the wrong space (e.g., screen versus world space) or they're multiplying the input by some amount as my extension uses meters for units and so does three.js, so unless there's an error somewhere they should work together perfectly

[Civ3ro]

No,
I have this line that does most:
object[args.PROPERTY].set(...values)
PROPERTY is "position","rotation" or "scale"
and values is a parsed array v3.
let values = JSON.parse(args.VALUE)

And the

is just return JSON.stringify([args.X, args.Y, args.Z])

[Brackets-Coder]

Okay, my physics extension body position is also returning really low, but it shouldn't be. The forever loop seems to be executing far more often than normal...

It seems you've discovered an issue that I haven't

[Brackets-Coder]

Under further investigation I've discovered the issue. It seems like the simulation step is tied to Scratch's frame loop system, so inserting any block that updates the stage in the forever loop (e.g, "move steps" or "pen down") fixes the issue entirely. I'm assuming it's not working for you since your extension uses a canvas overlay rather than drawing to the scratch stage so it doesn't trigger a frameloop update and makes Ammo think it has to go faster.

[Brackets-Coder]

Also, it might be wise if all participants clone this to their local machine for easier development, but I'm fine if you keep your current workflow and just paste new versions in here honestly

[Brackets-Coder]

are you https://scratch.mit.edu/users/Civero/

[Civ3ro]

Yeah

[Brackets-Coder]

I'm also working on several other projects (notably a MIDI visualizer and a path tracer) so I'd like to make it clear that I can't spend all of my development time working on this project. I also want to make it clear that I don't want to "carry" this group project or be it's "leader"; rather, I was thinking of everyone working together. So, if it seems as though I'm taking initiative, it's not because I want to assume authority, but rather because I want to encourage everyone into developing an awesome extension together. Hope you guys understand

[Brackets-Coder]

I've added a "scratch" folder which is the blank version that we will develop in should we choose to start a new extension. I've added a basic template of the class and loading THREE.js from JSDelivr but other than that it has no blocks and is very minimal:

// Name: ThreeJS
// ID: turboThree
// Description: Blocks for creating and manipulating 3D objects using the Three.js library. (insert better description here).
// By: -MasterMath- <https://scratch.mit.edu/users/-MasterMath-/>
// By: Civero <https://scratch.mit.edu/users/Civero/>
// By: Drago-Cuven <https://scratch.mit.edu/users/DragoCuven/>
// License: MPL-2.0 and MIT

// Started collaboratively December 2025

(async function(Scratch) {
  'use strict';

  if (!Scratch.extensions.unsandboxed) {
    throw new Error('This three.js extension must run unsandboxed');
  }

  const vm = Scratch.vm;

  const THREE = await Scratch.external.importModule('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.min.js');

  console.log(THREE);

  class ThreeJS {
    getInfo() {
      return {
        id: 'turboThree',
        name: Scratch.translate('ThreeJS'),
        blocks: [

        ]
      };
    }
  }

  Scratch.extensions.register(new ThreeJS());
})(Scratch);

[Civ3ro]

I see you used JSDelivr to load the module. In my extension I used esh.sh. Here's a table made by gemini with pros/cont

Feature	JSDelivr	esm.sh
URL Length	Long/Specific	Short/Clean
Handling of imports	Raw (does not change code)	Smart (optimizes imports)
Module Support	Requires full file path	Automatic
Global Availability	Extremely High	High

And, using a fixed version of Three might save us if they mess up. I would choose esm.sh.
const THREE = await Scratch.external.importModule("https://esm.sh/three@0.180.0")

I already cloned this repo, and have it on vs.

[Brackets-Coder]

ChatGPT summary:
"If you want it to just work in the browser with import, use esm.sh.
If you want maximum reliability and speed for known-good builds, use jsDelivr.
If you want exact npm contents with no surprises, use unpkg."

I think for now I'll stick with JSDelivr if that's fine with you. Really in the long run the CDN we choose doesn't matter as long as it gets the job done

[Brackets-Coder]

Thanks for suggesting though

[Brackets-Coder]

It's definitely worth looking into as Drago also is using esm.sh but I'll have to check it out later

[Brackets-Coder]

In observance of Christmas I will be entirely inactive tomorrow.

[Brackets-Coder]

@Drago-Cuven I can see that your extension also uses a drawable skin/stage layer for three.js rendering, as does mine and Vadik1's Simple3D. While this certainly is a better renderer in the long run, it does raise problems with things like OrbitControls that require interaction with the three.js canvas. Also, the attempt I made for the stage layer was quite unoptimized and fluctuated wildly in framerate

I still haven't tested both of your extensions fully so when I do things will become much clearer as to a path forward, but just a thought, we could replace Civero's renderer with Drago's, use Drago's extension and leave it there, or use Drago's renderer in a brand-new from-scratch extension...

[Civ3ro]

As you can tell from my ext, I intend to make my 3d ext look very close to vanilla.

I'm just checking it out. First impression, yeah it does look really vanilla.
It reminds me a lot of cst's 3d.

I don't know if using scratch's sprites as objects fits the extension...

And having multiple categories inside one file generates flood after saving:

[Civ3ro]

Tho, your code for adding a rendering layer is really useful

I managed to add it to our test.

Is it from the cst extension? Do we need to give credit to cst?

[Civ3ro]

I managed to add it to our test.

Not quite actually, yesterday I was testing some ways, and it just updated when I used threeSkin.setContent(dom)

I'm sure that's not the correct way.

Also I was seeing how the video sensing extension worked, how does it place and update the printed images? Ummm I might be searching nothing

[Drago-Cuven]

Tho, your code for adding a rendering layer is really useful

I managed to add it to our test.

Is it from the cst extension? Do we need to give credit to cst?

i already stated it is not.

[Civ3ro]

i already stated it is not.

what? this comments are from last week

[Brackets-Coder]

In observance of Christmas I will be entirely inactive tomorrow.

On second thought, I will also be entirely inactive today and the 26th

[Civ3ro]

Me too,
I'll be on now and this afternoon. (16:24 rn) So maybe 1-3 more hours

[Drago-Cuven]

It's not, but cst's extension is my insp for doing sprite modes. I didn't use his code cus I made this as a sort of test of what I can do after learning more js from miyo

…

On Wed, Dec 24, 2025, 9:08 AM Civero ***@***.***> wrote: Tho, your code for adding a rendering layer is really useful I managed to add it to our test. image.png (view on web) <https://github.com/user-attachments/assets/645571a3-e4aa-40ac-9d08-aed7c3a51bfb> Is it from the cst extension? Do we need to give credit to cst? — Reply to this email directly, view it on GitHub <#1 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANYWUKL2QLRXTH7IPF6UOJD4DKT7NAVCNFSM6AAAAACP4OFHQSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMZTGYYDIMQ> . You are receiving this because you were mentioned.Message ID: <Brackets-Coder/ThreeJS-Extension/repo-discussions/1/comments/15336042@ github.com>

[Drago-Cuven]

alright, heavy suggestion, we need to make our own layer for the 3d canvas and it NEEDS to be at the bottom so its below the sprites AND pen. Assuming we go by my method and start off with a "vanilla-like" 3d extension, we add a 3d pen and include a stamp 3d canvas and a 3d canvas dataurl reporter, so that at any point a person can draw it instead if they so please.

[Brackets-Coder]

I don't know about the "stamp"
Of course it would be a layer below the pen layer, just like Simple3D, but Simple3D doesn't have stamp and it works fine. The layer is updated every frame and the users just tell the renderer what to draw, where and when

[Civ3ro]

... when

Are we thinking of a "render scene" block? Or have an internal loop script that renders and more?

[Drago-Cuven]

internal loop that renders. also, the ability to hide the canvas so that it still runs despite not showing on screen. if you look at my ext you can see the options for that

…

On Thu, Dec 25, 2025 at 4:28 AM Civero ***@***.***> wrote: ... when Are we thinking of a "render scene" block? Or have an internal loop script that renders and more? — Reply to this email directly, view it on GitHub <#1 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANYWUKMVIMEEXKXKGDW74V34DO33JAVCNFSM6AAAAACP4OFHQSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMZUGAZDSMI> . You are receiving this because you were mentioned.Message ID: <Brackets-Coder/ThreeJS-Extension/repo-discussions/1/comments/15340291@ github.com>

[Civ3ro]

What do you think of my ThreeSkin class?

[Brackets-Coder]

I don't know about texSubImage2D because I'm not very familiar with low-level graphics APIs (I'm trying to get into Swift and Metal but I'm very familiar with Three.js and use it a lot). I'll have to look at the organization wrapper later when I look at the class as a whole

[Civ3ro]

It's not from threejs. Its from webgl.
here's gemnini opinion:

Feature	gl.texImage2D	gl.texSubImage2D
Primary Role	Initialization. Defines the "shape" and size of the texture.	Update. Replaces pixels in an existing texture.
GPU Behavior	Deletes old memory and allocates a new buffer.	Reuses the existing buffer.
Speed	Slow. Allocation is a "heavy" operation for the driver.	Fast. It is a direct memory copy (DMA).
Flexibility	Can change the width, height, and format.	Cannot change size; must match the original dimensions.
Garbage	Can cause "stutters" due to frequent memory re-allocation.	Smooth performance; no memory churn.
Best Use Case	Setup (Constructor) or Window Resizing.	Animation frames (The Render Loop).

[Brackets-Coder]

It's not from threejs. Its from webgl.

I know

here's gemnini opinion:

Okay, for display updates use texSubImage2D but any time the resolution changes create a new one with texImage2D and leave the updater to do the rest

[Civ3ro]

True, that's what I just added

  function resize() {
    width = runtime.stageWidth, height = runtime.stageHeight;
    console.log(width, height)

    //recreate buffers, "texture" dimensions
    buffers.rawBuffer = new ArrayBuffer(width*pixelScale * height*pixelScale * 4);
    buffers.gpuView = new Uint8Array(buffers.rawBuffer);
    buffers.renderData = new ImageData(new Uint8ClampedArray(buffers.rawBuffer), width*pixelScale, height*pixelScale);

    three.renderer.setSize( width, height)
    three.skin.updateSize(width, height, pixelScale) //this method uses texImage2D

    //would update camera aspect too! (future)
  }

What's next? Scene? Renderer configurations?

[Brackets-Coder]

Let me take a look later and then we'll see where to go

[Brackets-Coder]

Also, is @Civ3ro pronounced siv-er-oh?

[Civ3ro]

Also, is @Civ3ro pronounced siv-er-oh?

Haha
However you want
As a Spanish speaker, I pronounce it like si-ve-ro

[Brackets-Coder]

Ah I see, thanks so much

[Brackets-Coder]

Once we have enough framework to work with for the objects, I'd like to start the development of the scene editor website if ya'll don't mind.

[Civ3ro]

Can I publish my version of the extension?
I would move it to a public repo. (or publish this one??)

I tought to ask permission since everyone has contributed.

[Brackets-Coder]

@Drago-Cuven @astruegenius if you don't mind I can make this repo public.

[Brackets-Coder]

@Civ3ro I haven't looked through or tried all of your version of the extension yet, but as of right now it looks promising with minor revisions.

As for physics and VR, such features are different enough to warrant separate extensions. I've been slacking in getting my VR extension finished, and it's very unpolished right now. But I think having an API or framework to integrate them together would be beneficial. It runs on A-frame (which uses Three.js) so I could add some kind of detection logic to make the renderer directly hook into the Three.js extension if present instead of having a sketchy texture-mirroring setup.

As of right now the feature list looks complete enough to begin the development of a scene creation software. The question is whether we should integrate it directly into the extension (such as seen in the shader editor in Pen+ V7), directly into the NitroBolt editor (via the creation of a "Scene" tab when the extension loads), or on a separate GitHub pages site—the latter I think being the most viable and flexible option.

When I get your opinion on where it should be developed I suppose I'll start working on the frameworks to make it possible. Again, sorry I've been too busy to make working on this extension with you guys a priority, I'd like to get back into it more as my schedule allows

[Civ3ro]

That sounds perfect! Need help, a second hand with the vr extension?

The pen+ pop is linked to a github page iirc, start from github and then link it (optional right?)

[Brackets-Coder]

Okay. I'll start working on the scene editor in docs/ on this repo. (That way it goes through GitHub Pages). Then I suppose we can integrate it into the extension later if it pleases us. The VR extension is mostly finished, I've just got to clean up a bug and some two-year-old code that needs refactoring...

[Civ3ro]

Ok!

[Drago-Cuven]

Go for it

…

On Thu, Mar 5, 2026, 10:17 AM Brackets-Coder ***@***.***> wrote: @Drago-Cuven <https://github.com/Drago-Cuven> @astruegenius <https://github.com/astruegenius> if you don't mind I can make this repo public. — Reply to this email directly, view it on GitHub <#1 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANYWUKPPKFEZ5AGV7PTUG6D4PGSBTAVCNFSM6AAAAACP4OFHQSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMBRGI3TKMY> . You are receiving this because you were mentioned.Message ID: <Brackets-Coder/ThreeJS-Extension/repo-discussions/1/comments/16012753@ github.com>

[Brackets-Coder]

Heads up everyone, I just created a branch protection ruleset. This hopefully won't hinder progress but may require you to have a pull request to change anything. I haven't restricted the creation of new branches and only required PRs for the default branch. Just trying to keep everything a bit more organized. I also made it so that 2 reviews are required before merging. Again, hopefully this does not hinder progress—the intent is to provide constructive criticism to make code better and provide alternative opinions! Let me know if you don't like this. I haven't added any contributing guidelines or requirements other than reviews so hopefully it shouldn't intrude too much

[Brackets-Coder]

If you'd like to create more modifications you can create a new branch and do so there. If you'd like to modify the main branch please make a new branch and create a pull request.

[Civ3ro]

Ok!

[Brackets-Coder]

Also, you should see a new PR and branch for the scene editor. This is WIP as of now and only has orbit controls and a grid. Hopefully this helps you guys out a bit more!

[Civ3ro]

I have added obj support!

[Brackets-Coder]

Fantastic!

[Brackets-Coder]

I really am not working on this as much as I'd like...

[Civ3ro]

FBX support too!

Some materials/textures are unsupported, though...

users might need to create them themselves

[Civ3ro]

Added blending!

[Civ3ro]

Postprocessing!

[Brackets-Coder]

Wow, @Civ3ro you've been locking in the coding zone and grinding out stuff

[Civ3ro]

Hey, how's it going?

I have been adding more addon extensions... Helpers, postprocessing, experimental features...

Is it possible that you give me, like, a higher rank of permissions for this repo? I want to try to make a page for documentation and also change, if possible, the cover of the repo.

Thanks!

[Brackets-Coder]

I'll see what I can do to change the branch protection rules. I'd still like pull requests simply for organization but may move reviews to just requiring one. It'd be nice if we could have multiple opinions though

[astruegenius]

Hopefully I can start working on this again later today. Somebody remind me please in like 7 hours.

[Brackets-Coder]

Yeah I've been a little slow as well but this week I'm not at home so I've been a bit inactive everywhere.

Hopefully starting next week (Sunday) I'll be able to make some more time

[Civ3ro]

Hopefully I can start working on this again later today. Somebody remind me please in like 7 hours.

Hey! Reminder...

[Brackets-Coder]

@astruegenius @Civ3ro @CubesterYT @Drago-Cuven

I'm charging the Oculus...

I'll see what I can do to fix the bug, and maybe I'll start working on the three.js integration shortly after the rendering glitch is fixed

Basically I was upset because there were one of two options:

1. The display starts black, but the controllers connect immediately
2. The display starts correctly, but the controllers are not connected

You couldn't start with both the display appeared and the controllers connected. To connect the controllers or make the display appear you had to press the oculus button and then press it again to go back into the experience.

Unfortunately I think I'm going to have to resort to option number two because it's currently a known browser limitation that controllers sometimes don't connect immediately. Many WebXR experiences already have this issue, so I'm probably just going to go back to that version of the extension and do a quick refactor to get it merged.

Since the extension runs on A-frame adding three.js support likely not be difficult at all, the hardest part will probably be managing the two different three.js instances

[Civ3ro]

Perfect!

[Drago-Cuven]

I have since switched to Linux and use WiVRn. Any tips on how I should make it work with that?

…

On Sat, Apr 4, 2026, 2:49 PM Brackets-Coder ***@***.***> wrote: @astruegenius <https://github.com/astruegenius> @Civ3ro <https://github.com/Civ3ro> @CubesterYT <https://github.com/CubesterYT> @Drago-Cuven <https://github.com/Drago-Cuven> I'm charging the Oculus... I'll see what I can do to fix the bug, and maybe I'll start working on the three.js integration shortly after the rendering glitch is fixed Basically I was upset because there were one of two options: 1. The display starts black, but the controllers connect immediately 2. The display starts correctly, but the controllers are not connected You couldn't start with both the display appeared and the controllers connected. To connect the controllers or make the display appear you had to press the oculus button and then press it again to go back into the experience. Unfortunately I think I'm going to have to resort to option number two because it's currently a known browser limitation that controllers sometimes don't connect immediately. Many WebXR experiences already have this issue. — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANYWUKP4O44J6Q7R3WBV77D4UFRMHAVCNFSM6AAAAACP4OFHQSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNBUHE4DMOI> . You are receiving this because you were mentioned.Message ID: <Brackets-Coder/ThreeJS-Extension/repo-discussions/1/comments/16449869@ github.com>

[Brackets-Coder]

Happy Easter! No idea, I've only tested on standalone Quest 2. If I had to guess it's not much different than any other PCVR setup but I'm not familiar at all with that area

[Civ3ro]

Added Animation Support!

[Brackets-Coder]

Hello everyone!

Sorry I haven't been as active around here lately. The past few weeks have been really busy but I'm mostly out of the busy schedule. However, I'm starting some new commitments/projects (as usual) so I don't think I'll do much writing code here. I don't want to be that guy that commits to a group project and slacks while letting everyone else carry. I'd be happy to help with optimization and give reviews. If you guys need anything, just @mention me. I'll probably be writing a few things here and there but from what I've seen in the block list recently we have most of the features completed that I would want in a three.js extension.
To be honest, I'd be fine if we assimilate everything & polish/optimize, then open a PR on Turbowarp for merging. I'd like to address the performance concerns with HQPen and fullscreen before that happens though. Feature-wise, I think we're almost there!

[Brackets-Coder]

@astruegenius @Civ3ro @Drago-Cuven
Hello everyone, if you would like we can open a draft PR on the TurboWarp repo. That way we can get started polishing this extension and SharkPool and I can begin the review process

[Brackets-Coder]

Crazy

[astruegenius]

Of course. I'm so out of the loop, can someone tell me what needs to be done? I have so much inspiration right now.

[Brackets-Coder]

We'd need to get with @Civ3ro

Someone could fork the repo, make a branch, add the extension, and open a draft pull request. SharkPool and I can help more from there, get it reviewed, and hopefully merged to the gallery.

Whichever version of the extension is the most polished and complete, most user friendly, is the one that should be opened in a PR. If you guys could commit the latest versions of your extensions to your folders in this repository I could take a look at them and help better determine how to proceed. Thanks!

[Civ3ro]

Hello!

I haven't worked on my version since may... but I do have an unreleased update in my pc. I'll commit that when I have time.

[astruegenius]

I'll try making something of my own with WebGL.... Wish me luck