String3D: Forcing 3D to Obey CSS

[MyrinNew]

There is something oddly appealing about the idea of controlling a 3D world through plain CSS.


It’s like standing in the middle of a disassembled engine, covered in grease, catching yourself thinking:

What if, instead of a wrench, I just use… :hover?

Logic says this will end badly. The browser seems to agree.

But I got hooked.


I’m building String3D — a module for StringTune that allows you to:

• Drop 3D objects right into an HTML layout
• Bind them to DOM elements
• Control transformations via CSS custom properties

No mousemove orchestra, no “half-a-project” worth of glue code, no constant

“recalculate my position because the layout shifted again.”


Here is what it looks like in action:







What this is (and what it isn’t)

Let’s kill the magic expectations right now: String3D is not “CSS 3D”.


There are no tricks here where the browser suddenly learned to render meshes natively.

Under the hood, it’s a standard 3D renderer in a canvas living above the page.


The difference lies elsewhere.


String3D synchronizes 3D objects with DOM elements every frame, but it takes its behavioral instructions from CSS custom properties.


The DOM remains the DOM:

• hover works as usual
• layout lives its normal, slightly chaotic life

The 3D layer doesn’t control the page or try to replace it.

It just looks at the DOM and says:

“Show me where you are.

What size you are.

How you are rotating.

I will repeat it.”

The DOM is the source of truth.

The 3D is a shadow that obeys.



Quick Start

Installation




npm install string-tune string-tune-3d three





JavaScript Initialization




import StringTune from 'string-tune';
import { ThreeJSProvider, String3D } from 'string-tune-3d';
import * as THREE from 'three';

const stringTune = StringTune.getInstance();
String3D.setProvider(new ThreeJSProvider(THREE));
stringTune.use(String3D);
stringTune.start(60);





Basic HTML





class="shape"
string="3d"
string-3d="box"
string-3d-material="standard[#0000ff]"
>
BOX