Documentation

Here I'll explain how the blocks of my extension work in relation of the Three JS functions and methods! I would recommend taking a look at the Three JS documentation.

Guide

Scene
Camera
3D Objects

Materials
Geometries

Light
Utilities
Addons

GLB Importing
Orbit Control
Post Procesing

Physics

I'll be including tables with images of the blocks and some short descriptions.
Also tables, defining extra properties or the diferent types of concepts.

Scene

Block	Definition
`new Scene [scene]:: #4638c5`	Creates a new scene. Resets current scene. Block to start. `new THREE.Scene()`
`set Scene [Background v] to (new Color(#96f):: #3875c5):: #4638c5`	Sets a property of the scene to a value. They can be set to a number or an object (Texture, Color).
`(get Scene [Objects v]:: #4638c5)`	Returns a property of the scene. An array of names.

*scene can be seen as a group, the parent group where everything goes.

Camera

`add camera [Perspective v] [myCamera] to [scene]:: #38c59b`	Adds a camera to a group. At [0,0,3] in world space. By now, only Perspective Camera works. `new THREE.PerspectiveCamera()`
`set camera [Near v] of [myCamera] to (0.1):: #38c59b`	Sets a property of a camera to a value. Number.
`(get camera [Near v] of [myCamera]:: #38c59b)`	Returns a property of a camera. Number.
`set rendering camera to [myCamera]:: #38c59b`	Asign the camera that will be used to render the scene.

`set a RenderTarget: [myTarget] for camera [myCamera]:: #38c59b`	Create a RenderTarget with texture of the camera view.
`set RenderTarget [myTarget] size to [360] [360]:: #38c59b`	Adjust the RenderTarget size. It should be proportional to the object size (to avoid streching!).
`(get RenderTarget: [myTarget] texture:: #38c59b)`	Return the texture of the RenderTarget. It beaves as a live texture, no need to update every frame.
`remove RenderTarget: [myTarget]:: #38c59b`	Delete the RenderTarget properly.

3D Objects

Objects are not just 3D meshes, but these object types too. The camera, lights are objects too.

add object [myObject] [Mesh v] to [scene]:: #38c567

Adds an object of a specified type to a group.

 new THREE.Mesh()

Object Types:

Mesh: A renderable 3D object that combines geometry + material.

Sprite: A 2D element that always faces the camera.

Line: A sequence of connected vertices rendered as a continuous line.

Points: A point-cloud object where each vertex is rendered as a particle.

Group: A container for organizing multiple objects under one transform.

`clone object [myObject] as [myClone] & add to [scene]:: #38c567`	Adds a copy of an already existing object to a group. Same geometry, material and transforms.
`set [Geometry v] of object [myObject] to [myGeometry]:: #38c567`	Asign an existing geometry to the object. Crucial for rendering, to see something.
`(get [Geometry v] of object [myObject]:: #38c567)`	Return the contents of the selected property of the object. Stringified JSON.
`<is there an object [myObject]?:: #38c567>`	Check if the object (anytype) exists.
`remove object [myObject] from scene:: #38c567`	Deletes the object (anytype) from scene. Does not delete the geometry nor material.
`set transform [Position v] of [myObject] to [\[0,0,0\]]:: motion`	Changes a transform of the object to a vector3. Position, Rotation, Scale or Facing direction. Rotation is done in YXZ order.
`(get [Position v] of [myObject]:: motion)`	Returns a vector3 of a transform of the object.

Materials

new material [myMaterial] [Mesh Standard Material v]:: looks

Creates a material of a specified type.

new THREE.MeshStandardMaterial()

Material Types:

MeshBasicMaterial: Unlit. Ignores lights entirely. Use for UI meshes, skyboxes, constant-color objects, or when you want maximum performance.

MeshStandardMaterial: PBR with metalness/roughness workflow. Balanced quality/performance. Industry default for realistic surfaces.

MeshPhysicalMaterial: Extended PBR. Adds clearcoat, sheen, transmission, thickness, iridescence, advanced specular. Use for glass, car paint, fabrics, high-end realism.

MeshLambertMaterial: Old diffuse lighting using per-vertex Lambert shading. Cheap, soft lighting. Not physically accurate. Use only when you need fast lighting on low-poly meshes.

MeshPhongMaterial: Old specular + shininess model with per-pixel lighting. Glossier than Lambert but still outdated. Useful only for legacy workflows or if you want classic “Phong” plastic shine.

MeshDepthMaterial: Renders depth from the camera. Used internally for shadow maps or custom depth effects.

MeshNormalMaterial: Renders surface normals as RGB. Good for debugging geometry, checking UV seams, or generating stylized looks.

MeshMatcapMaterial: Uses matcap texture to fake lighting with no actual lights. Super cheap and great for stylized renders, sculpting previews, toon models.

MeshToonMaterial: Cel-shaded lighting with hard steps. Use for cartoon styles, anime shading, or simplified lighting.

LineBasicMaterial: Simple unlit lines. Ideal for wireframes, helpers, debugging overlays, and vector drawings.

LineDashedMaterial: Same as LineBasic but supports dashed patterns. Used for guidelines or technical drawings.

PointsMaterial: Material for particle systems. Controls point size, color, and texture. Use for sparks, snow, dust, starfields, etc.

SpriteMaterial: Billboarded 2D planes that always face the camera. Use for icons, markers, UI, particles needing screen alignment.

ShadowMaterial: Special grayscale transparent material that only shows shadows. Use for “shadow catcher” floors in AR/realistic compositing.

Check the Materials Table to know what materials enable certain properties

`<is there a material [myMaterial]:: looks>`	Checks if the material exists.
`remove material [myMaterial]:: looks`	Removes the material properly. `material.dispose()`
`set material [Color v] of [myMaterial] to (new Texture((costume1 v)::looks):: #3875c5):: looks`	Sets a property of the material to a value. (Number, Color, Texture, Vector2)

Material Properties:

General:

Color: Base color before lighting calculations.
Map: Diffuse/base texture applied to the surface.
Opacity: Transparency amount, from fully opaque to invisible.
Transparent: Enables rendering with transparency. Required when opacity < 1.
Alpha Map: Grayscale texture controlling per-pixel transparency.
Alpha Test: Discard pixels below a transparency threshold.
Depth Test: Enables depth buffer comparisons.
Depth Write: Writes material depth to the depth buffer.
Color Write: Enables writing color to the frame buffer.
Side: Determines which faces render (front, back, double).
Visible: Controls whether the material renders at all.
Blend Alpha: Alpha blending factor. Fix your typo in the value when using it.
Blend Color: Blend constant color used in custom blend modes.
Alpha Hash: Dithered transparency for temporal anti-aliasing.
Premultiplied Alpha: Changes how colors are blended with alpha.
Tone Mapped: Includes material in tone mapping passes.
Fog: Material reacts to fog if enabled.
Flat Shading: Forces flat shading instead of smooth interpolation.

Standard / Physical:

Metalness: Metal-like reflectivity.
Metalness Map: Per-pixel metalness.
Roughness: Micro-surface roughness.
Roughness Map: Roughness texture.
Reflectivity: Legacy param controlling reflection amount.
Emissive: Glow color independent of lighting.
Emissive Intensity: Glow strength.
Emissive Map: Per-pixel emission.
Env Map: Reflection and lighting from environment.
Env Map Intensity: Environment contribution strength.
Env Map Rotation: Rotation of environment map.
Ior: Index of refraction.
Refraction Ratio: Controls transmitted light bending.
Clearcoat: Top reflective layer amount.
Clearcoat Map: Per-pixel clearcoat intensity.
Clearcoat Roughness: Surface roughness of clearcoat.
Clearcoat Roughness Map: Texture controlling clearcoat roughness.
Dispersion: Spectral dispersion (rainbow refraction).
Sheen: Fabric-like soft reflection layer.
Sheen Color: Color of the sheen layer.
Sheen Color Map: Per-pixel sheen color.
Sheen Roughness: Roughness of sheen.
Sheen Roughness Map: Texture controlling sheen roughness.
Specular Color: Color of specular reflection.
Specular Color Map: Per-pixel specular tint.
Specular Intensity: Strength of specular highlights.
Specular Intensity Map: Specular strength texture.
Transmission: Physically-based transparency/light passing.
Transmission Map: Per-pixel transmission.
Thickness: Used for subsurface/transmission depth.
Thickness Map: Per-pixel thickness.
Anisotropy: Elongated highlight direction.
Anisotropy Map: Texture controlling anisotropy.
Anisotropy Rotation: Orientation of anisotropic reflection.
Attenuation Distance: How quickly transmitted light fades.
Attenuation Color: Color tint of transmission attenuation.
Iridescence: Angle-dependent color shifting.
Iridescence IOR: Refraction index for iridescence.
Iridescence Map: Texture controlling iridescence.
Iridescence Thickness Range: Thin-film thickness bounds.

Displacement / Normal / Bump:

Displacement Map: Alters geometry vertices.
Displacement Scale: Strength of displacement.
Displacement Bias: Offset added to displacement.
Bump Map: Pseudo-normal perturbation.
Bump Scale: Bump strength.
Normal Map Type: Defines tangent-space or object-space normals.

Matcap / Toon / Phong / Lambert / Basic:

Shininess: Specular highlight sharpness.
Wireframe: Render only mesh edges.
Wireframe Linewidth: Thickness of wireframe lines.
Wireframe Linecap: Shape for line ends.
Wireframe Linejoin: Shape for line joins.

Points:

Size: Point scale in world units.
Size Attenuation: Points shrink with distance.

Lines:

Scale: Scaling for dashed textures.
Dash Size: Length of dashes.
Gap Size: Distance between dashes.

Sprites:

Rotation: 2D rotation of sprite billboard.

set material [myMaterial] blending to [No Blending v]:: looks Sets the blending mode of the material to a specified type.

Blending Modes:

No Blending: No blending at all. Source fully replaces destination where drawn.

Normal Blending: Standard alpha blending. Source pixels overlay destination based on their alpha.

Additive Blending: Light-adding blend. Colors accumulate on top of each other, brightening the result.

Subtractive Blending: Removes color from the destination, producing darker results. Good for shadow-like effects.

Multiply Blending: Multiplies source and destination colors. Always darkens. Useful for decals, shading overlays.

Custom Blending: Enables manual control using blendSrc, blendDst, and blendEquation. No such properties implemented enabled yet.

set material [myMaterial] depth to [Never Depth v]:: looks Sets the depth mode of the material to a specified type.

Depth Modes:

Never Depth: The fragment never passes the depth test. Nothing is ever drawn.

Always Depth: The fragment always passes the depth test. Draws on top of everything.

Less Depth: Passes only if the fragment’s depth is closer than what’s already in the depth buffer. (Standard behavior.)

Less Equal Depth: Passes if the fragment’s depth is closer or equal. Helps avoid z-fighting edges.

Equal Depth: Passes only if fragment depth exactly equals the existing depth. Used for special rendering passes.

Greater Depth: Passes if fragment depth is farther than what’s in the buffer.

Greater Equal Depth: Passes if fragment depth is farther or equal. Rarely needed.

Not Equal Depth: Passes when depths don’t match. Useful for highlighting edges or special effects.

Geometries

new geometry [myGeometry] [Box Geometry v]:: list

Creates a new geometry of a specified type.

new THREE.BoxGeometry()

`<is there a geometry [myGeometry]:: list`	Checks if the geometry exists.
`remove geometry [myGeometry]:: list`	Removes the geometry properly. `geometry.dispose()`
`create spline [mySpline] from (generate cruve [CatmullRomCurve3] from points [\[0,3,0\] \[2.5,-1.5,0\] \[-2.5,-1.5,0\]]:: list), closed: [true]:: list`	Creates a spline geometry of a unique type (for now, CatmullRomCurve3). Use curve.
`create text geometry [myText] with text [Hello World!] in font [import v] size (1) depth (0.1) curvedSegments (6):: list`	Creates a text geometry that displays the given text in a imported font.

To import fonts, use the next buttons:

"Convert font..." will redirect you to facetype.js. This website transforms fonts files (.ttf usually) to json so three can interpret them to generate a geometry.

"Load font..." will open your file explorer, just select the transformed font file (.json) and load it!
Then should appear in font dropdown.

Light

add light [myLight] type [Ambient Light v] to [scene]:: #c7a22a Adds a light of a specified type to the group.

Light types:

Ambient: Illuminates all objects in the scene equally. It cannot be used to cast shadows as it does not have a direction.

Directional: A light that gets emitted in a specific direction. Used to simulate the sun. Can cast shadows.
Change the direction of the light by changing its position. "...direction is calculated as pointing from the light's Object3D#position to the DirectionalLight#target position (0,0,0)"

Point: A light that gets emitted from a single point in all directions. As a Lightbulb. Can cast shadows.

set light [myLight] [Intensity v] to [1]:: #c7a22a Sets the light property to a value. Color or Intensity.

Utilities

Here are some utility blocks to use the extension faster and better.

`(New Vector [0] [0]:: #3875c5)`	Returns a Vector2 as an Array. Can be used to set properties of some materials. [0,0]
`(New Vector [0] [0] [0]:: #3875c5)`	Returns a Vector3 as an Array. Usually to set transforms [0,0,0]
`(move [1] steps in vector [\[0,0,0\]] in direction [\[1,0,0\]]:: #3875c5)`	Like the `move (10) steps` block. Needs to be fed a Vector3 direction. Returns a new Vector3.
`(direction from [\[0,0,3\]] to [\[0,0,0\]]:: #3875c5)`	Returns the Vector3 of the direction.
`(New Color (#96f):: #3875c5)`	Returns an [object Object]. Don't mind it. Used to set colors of materials or the scene background.
`(New Fog (#96f) (0) (10):: #3875c5)`	Specify the color, near and far of the fog. Returns an [object Object]. Don't mind it. Used to set the scene fog.
`(New Texture ((costume1 v)::#96f) [Pixelate v] [Repeat v] repeat (1) (1):: #3875c5)`	Creates a texture from a costume. Returns an [object Object]. Don't mind it. Used to set the scene background, all material maps and more...
`(New Cube Texture X+((costume1 v)::#96f) X-((costume1 v)::#96f) Y+((costume2 v)::#96f) Y-((costume2 v)::#96f) Z+((costume1 v)::#96f) Z-((costume1 v)::#96f) [Pixelate v] [Repeat v] repeat (1) (1):: #3875c5)`	Creates a Cube Texture from a costume, to give each face of a 3D cube a specific texture. Same applications as Texture.
`(New Equirectangular Texture ((costume1 v)::#96f) [Pixelate v]:: #3875c5)`	Creates a texture from a 360 costume, like this. Same applications as Texture.
`(generate cruve [CatmullRomCurve3] from points [\[0,3,0\] \[2.5,-1.5,0\] \[-2.5,-1.5,0\]]:: list)`	Used to generate a curve that can be used to create the spline curve geometry.
`<mouse [left v] [Down v]?:: sensing`	Overlaying Three JD on top of scratch disables the `mouse down` block. I made this block to replace it.
`(get item (1) of [\["myObject", "myLight"\]]:: list)`	Helper block. Returns the item in the Array position (starting on 1). To get an axis from a vector or objects from a raycast.
`Raycast from [\[0,0,3\]] in direction [\[0,0,1\]]:: #3875c5`	Sends a ray coming from [0,0,3] in direction [0,0,1], every object that the ray goes thru will be stored. For sensing things, grabbing objects?, collisions?...
`(get raycast [Intersected Object Names v]:: #3875c5)`	Get the above raycast results. You can read the number of objects, their names and their distances. (always ordered from closer-further)

Addons

Some extra utilities that deserve their own categories

GLB Importing

Use this button to load and save your .glb model files into the project.

It opens the file explorer and saves the model data as a sound in the backdrop.

To dispose a model, delete the sound with the same name.

`add [model v] as [myModel] to [scene]::#c53838`	Adds the selected preloaded model to the group. It will be added as a group, so when transforming [myModel] all of the children (whole model) gets it.
`(get object [Animations v] of [myModel]::#c53838)`	Some models can come with an animation, get the names of these with this reporter.
`play animation [walk] of [myModel], (0) times::#c53838`	If the model has animations, place the name here and make it play a certain number of times. 0 times = forever.
`set (Pause v) animation [walk] of [myModel]::#c53838`	If the model is running an animation, pause it or unpause it.
`stop animation [walk] of [myModel]::#c53838`	If the model is running an animation, stop it.

Orbit Control

This addon is really useful. It enables a quick way of visualizating the scene with just a toggle.
Left drag to rotate, right to pan and middle to zoom.

set addon Orbit Control (enabled v)::#c538a2

Post Procesing

It modifies the render before its made. Can add cool unique effects. Deeper explanation here.

`reset composer::#c538a2`	Cleans/Resets added passes. Passes are the effects. Passes are added to the composer.
`add bloom intensity:[1] smoothing:[0.5] threshold:[0.5] \| blend: [SCREEN] opacity:[1]::#c538a2`	Bloom. Take a look at these examples.
`add god rays object:[myObject] density:[1] decay:[0.95] weight:[0.4] exposition:[0.1] \| resolution:[1] samples:[64] \| blend: [SCREEN] opacity:[1]::#c538a2`	God rays. Take a look at these examples.
`add dots scale:[1] angle:[0] \| blend: [SCREEN] opacity:[1]::#c538a2`	Comic-Dotted overlay. Take a look at these examples.
`add depth of field focusDistance:[3] focalLength:[0.001] bokehScale:[4] \| height:[240] \| blend: [NORMAL] opacity:[1]::#c538a2`	Enables adding a focus point, blurs everything out of the focus range. Take a look at these examples.
`add custom shader [myShader] with GLSL fragm [] vert [] \| blend: [NORMAL v] opacity:[1]::#c538a2`	For advanced composer passes- A bit limited. The next uniforms are avialbe: Resolution and Time. More info here.

Physics

A really complete-easy to understand physics engine. It uses RAPIER physics and Three JS is just the renderer and manager of objects.

`create world \| gravity [\[0,-9,81,0\]]::#444`	Starter block. Set the gravity and start/restart the physics scene.
`(get world [Gravity v]::#444)`	Helper.
`enable physics for object [myObject] [on v] \| rigidBody [Dynamic v] \| collider [Box, Rectangle, cuboid v] density [1] friction [0.5] sensor [false v]::#444`	Turns on/off the physics for the object. Take a look at the next definitions:

Physics properties:

RigidBody types:
- Dynamic: Indicates that the body is affected by external forces and contacts.
- Fixed: Indicates the body cannot move. It acts as if it has an infinite mass and will not be affected by any force. It will continue to collide with dynamic bodies but not with fixed nor with kinematic bodies. Ground.
- Kinematic: Indicates that the body position must not be altered by the physics engine. The user is free to set its next position. Platforms, elevators, etc

Collider types:
- Solid: Can have contact points with other colliders to generate contact forces to prevent objects from penetrating-each-others.
- Sensor: They only generate intersection events when one sensor collider and another collider start/stop touching. Sensor colliders are generally used to detect when something enters an area.
- Cuboid: Box, Cubes...
- Ball: Perfect shperes
- Convex hull: Everything else,
- Density
- Friction
- More properies in the next blocks...

RigidBody blocks. RigidBodies are used to simulate the dynamics of non-deformable solids as well as to integrate the trajectory of solids which velocities are controlled by the user.

`set rigidbody [Gravity Scale v] of [myObject] to [1]::#444`	Changes a property of the rigidbody.
`(get rigidbody [Type v] of [myObject]::#444)`	Return the current value of the property.

RigidBody properties:

Type: 0=Dynamic, 1=Fixed, 2=Kinematic
Linear Velocity: The current "position" (linear) velocity of the xyz.
Angular Velocity: The current "rotation" (angular) velocity of the xyz
Translation: Current position of the object in the world. Same as Three-scene's position.
Quaternion: Current rotation (in quaternions) of the object in the world. Same as Three-scene's rotation.
Mass: The ammount of matter. Affects the weight and can have gravitational effects.
Linear & Angular Damping: Damping lets you slow down a rigid-body automatically. This can be used to achieve a wide variety of effects like fake air friction.
is Sleeping?: When a dynamic rigid-body doesn't move (or moves very slowly) during a few seconds, it will be marked as sleeping.
Gravity Scale: The magnitude of the gravity applied to this body will be multiplied by this scaling factor. Therefore, a gravity scale set to 0.0 will disable gravity for the rigid-body whereas a gravity scale set to 2.0 will make it twice as strong.
is Fixed? / is Dynamic? / is Kinematic?: Checks.

`lock rigidbody [myObject] [Translation v] on x:(on v) y:(on v) z:(on v)::#444`	To prevent a rigid-body from rotating or translating on said axis.
`set [Force v] of [myObject] to [\[0,10,0\]] in [World v] space::#444`	Forces affect linear velocity. Torques Angular. Impulses both. Check more here.
`reset [Forces v] of [myObject]::#444`	Cleans any Forces or Torques the object had.
`enable Continuous Collision Detection for [myObject] [on v]::#444`	Extra precision. More here.

Joints can be used to restric the movement of an object in relation to another.

`create FIXED joint between [myObject] & [myObject2] \| anchor A: [\[0,0,0\]] [\[0,0,0\]] B: [\[0,1,0\]] [\[0,0,0\]]::#444`	Fixed Joint.
`create SPHERICAL joint between [myObject] & [myObject2] \| anchor A: [\[0,0,0\]] B: [\[0,1,0\]]::#444`	Spherical Joint.
`create REVOLUTE joint between [myObject] & [myObject2] \| anchor A: [\[0,0,0\]] B: [\[1,0,0\]] \| axis: [\[0,1,0\]]::#444`	Revolute Joint.

*I recommend setting the transform of the objects to the one you place here, else it will go crazy.
The first value for each A/B is for position, if there's a second its for rotation.

Collider blocks.
Colliders represent the geometric shapes that generate contacts and collision events when they touch.
Attaching one or multiple colliders to a rigid body allow the rigid-body to be affected by contact forces.

`set collider [Friction v] of [myObject] to [1]::#444`	Changes a property of the collider.
`(get collider [is Sensor? v] of [myObject]::#444)`	Returns property values.

Collider properties:

Friction: Friction is a force that opposes the relative tangential motion between two rigid-bodies with colliders in contact.
Restitution: Restitution controls how elastic (aka. bouncy) a contact is.
Density & Mass: The mass-properties of a collider can only be set when the collider is created. Density is one of them. So it can only be changed with the turn physics on block.

`<is sensor [mySensor] touching [myObject]?::#444`	Checks if a solid object is intersecting with a sensor object.
`(objects touching sensor [mySensor]::#444)`	Returns the names of all objects intersecting with a sensor.