Library that adds CAD like tools for easier THREE.js projects building

Resources
1

Hi folks,

I’ve made an addons for three.js that gives tools to move, scale, rotate, change lights intensity, color, decay, angle, …

It only needs three lines of code to add an object and make adjustments to it.

I made it to help me position objects visually instead of changing coordinates and reloading the page a million times.

Screenshot 2025-09-29 105708
Screenshot 2025-09-29 1057081413×721 37.5 KB

It’s also capable of using three.js TransformControls, making curves, animating objects along paths.

As for now it supports AmbientLight, DirectionalLight, Fog, FgExp2, Group, HemisphereLight, Mesh, MeshPhongMaterial, MeshPhysicalMaterial, OrbitControls, PointerLockControls, PointLight, RectLightArea, SpotLight, UnrealBloomPass

Once your project is done, you can remove this library from your code

Feel free to request other objects and adjustable things.

There is an Animation tab that you can use to create basic curves, curves to animate objects around and a type of curve to animate the camera and its heading.

There are still bugs you can point out to me and beta functionalities like the export function and the camera travelling path that are not fully working yet.

I’d be happy to help you if you need to use this addon.

7 Likes
4

This is cool.

How are edits persisted? By that I mean, if I edit an object how do I get it into my game. Does it save the produced code?

5

No, you would have to write down the new adjustments of your object in your code, it is possible to save/export adjustments to a js object and I’m working on an export function where it would write the code for you in console log only requiring to copy paste. (the save/export to code function is available for meshes.

The aim is to make it easy to clean up the library from your code once your project is done.

But I mean new ideas are also welcome

1 Like
6

that would work for me :slight_smile:

maybe writing to the object file that is then hot-reloaded would be the ultimate goal?

1 Like
7

It would probably be a later functionality.

I’m considering whether or not to add a functionality to add new basic meshes (boxes, spheres, planes,…) and lights. So hot-reloaded saves would probably come with it.

1 Like
8

btw, just in case you haven’t checked it out yet:

2 Likes
9

Thank you, that’s really nice, a bit like blender in three.js :grin:

What I’m trying to do with my library is to add those tools to your existing three.js project with a couple of lines of code.

This way every time you add a light, for example, no need to re-write the whole lil-gui with all the properties, only one line, and there you go.

And once your project is done, the couple of lines of code can be removed, and there are no traces of it left.

I’m trying not to use any dependencies, so only three.js and lil-gui which is already in three.js.

Coming up, a new feature will allow to add a custom gui made by the user for shader uniforms for example.

1 Like
10

Rad! Yeah I like where you’re going w it.. like an advanced scene inspector/tweaker. Just thought you might be able to mine the threejs editor for ideas. Cool stuff!

1 Like
11

Thank you, it’s great inspiration, the design of it is really good !

12

It be useful to generate a flow map. Some platformers have mind-bending puzzles.

~ Por “jiggled” 2501

1 Like
13

Thank you ! I’ll look in too it. Maybe add a way to dynamically create those type of maps

1 Like
14

@kpachinger
@ThFrAng

I wrote this primitive flowmap painter a while ago.. maybe y’all find it useful:

(apologies if off topic)

2 Likes
15

TLDR; brew some coffee & hijack OP’s thread

@manthrax Yes that, I was thinking could be tedious in a workflow. I was watching Ruffy and the Riverside, which has multi-dimensional gameplay elements (like Paper Mario). Also comparing usages of a target which generates any of the maps: normal, parallax depth, or Data3dTexture.

1 Like
16

Wow that’s so nice. Very useful ! Thank you

1 Like