Global

Members

(constant) setFont3D

Source:

Methods

ambientLight(color, intensity)

Add an ambient light.
Parameters:
Name Type Default Description
color Color #ffffff Color of the light
intensity Number 1
Source:
Returns:
Newly created light object

anaglyph(enabled) → {boolean}

Enables or disables the anaglyph effect, which creates a 3D stereoscopic image from two 2D images. To enable this effect simply call anaglyph() function. anaglyph(false) will disable it.
Parameters:
Name Type Default Description
enabled boolean true A flag indicating whether the anaglyph effect should be enabled or disabled.
Source:
Returns:
Current status of the anaglyph effect.
Type
boolean

background3D(colorOrImage)

Set the background color or texture of your 3D scene
Parameters:
Name Type Description
colorOrImage Color | Image A color representation like 255, 0, 255 or "#ff00ff", or an Image object.
Source:

box(x, y, z, width, height, depth) → {Mesh3D}

Create a box object.
Parameters:
Name Type Default Description
x number 0
y number 0
z number 0
width number 1
height number 1
depth number 1
Source:
Returns:
newly created object
Type
Mesh3D

capsule(x, y, z, radius, length, capSubdivisions, radialSegments) → {Mesh3D}

Add a capsule to the scene.
Parameters:
Name Type Default Description
x number 0 X position
y number 0 Y position
z number 0 Z position
radius number 0.5 Optional radius of the capsule. Default 0.5
length number 1 Optional length of the capsule. Default 1
capSubdivisions number Optional number of cap subdivisions of the capsule. Default 32
radialSegments number Optional number of radial segments of the capsule. Default 12
Source:
Returns:
newly created cone object
Type
Mesh3D

clearFX()

Remove all special effects.
Source:

clone(object, x, y, z) → {Mesh3D|Group3D}

Add a clone of a Mesh3D or a Group to new position. Cloning a Mesh3D will take into account current material in use. For example fill("red") before cloning would change the color of the cloned Mesh3D. Group3D objects maintain their original material.
Parameters:
Name Type Default Description
object Mesh3D | Group3D Object or Group you want to clone
x number 0 Default 0.0
y number 0 Default 0.0
z number 0 Default 0.0
Source:
Returns:
cloned Object or Group depending on input
Type
Mesh3D | Group3D

cone(x, y, z, radius, height) → {Mesh3D}

Add a cone to the scene.
Parameters:
Name Type Default Description
x number 0 X position
y number 0 Y position
z number 0 Z position
radius number 0.5 Optional radius of the cone. Default 0.5
height number 1 Optional height of the cone. Default 1
Source:
Returns:
newly created cone object
Type
Mesh3D

createCanvas3D(width, height)

Create a 3D canvas containing your 3D scene
Parameters:
Name Type Description
width Integer How large
height Integer How tall
Source:

cube(x, y, z, side) → {Mesh3D}

Create a cube object.
Parameters:
Name Type Description
x number X position
y number Y position
z number Z position
side number Side length
Source:
Returns:
newly created object
Type
Mesh3D

cylinder(x, y, z, radiusTop, height, radialSegments, radiusBottom, heightSegments) → {Mesh3D}

Parameters:
Name Type Default Description
x number 0 X position
y number 0 Y position
z number 0 Z position
radiusTop number 0.5 Optional radius of the cylinder. Default 0.5
height number 1 Optional height of the cylinder. Default 1
radialSegments number Optional number of radial segments of the cylinder. Default 32
radiusBottom number Optional bottom radius of the cylinder. Default null (egual to radiusTop)
heightSegments number Optional number of height segments of the cylinder. Default 12
Source:
Returns:
newly created object
Type
Mesh3D

diffuse(color)

Set the color of your next 3D objects
Parameters:
Name Type Description
color Color A color rapresentation like 255, 0, 255 or "#ff00ff"
Source:

diffuseMap(img)

Use an image as texture for all following 3D objects. Use noDiffuseMap() to stop using a texture
Parameters:
Name Type Description
img p5.Image
Source:
Example
var img; // 🔍 You need a "global variable" when loading images

function preload() {
  // 🧱 always preload your textures
  img = loadImage("texture.png");
}

function setup() {
  createCanvas3D(600, 400);
  //Change background color of the scene
  background3D("#333333");
  
  
  //Use img as texture for following objects
  diffuse("white"); //Texture as it is needs white diffuse color
  diffuseMap(img);
  
  sphere(0, 0, 0, 1);
  
  noDiffuseMap();// Remove texture
  diffuse("#2196F3"); //Use a diffuse color as usual
  sphere(2.5, 0, 0, 1);
  
  diffuse("orange"); //Color your texture of orange
  diffuseMap(img);
  sphere(-2.5, 0, 0, 1);
}

function draw() {
  // 🔍 Never create objects here, but don't forget to have it in your code:
  // leave empty for the moment
}

ellipsoid(x, y, z, width, height, depth) → {Mesh3D}

Create an ellipsoid object. It's like a box buf spherical ;-)
Parameters:
Name Type Default Description
x number 0
y number 0
z number 0
width number 1
height number 1
depth number 1
Source:
Returns:
newly created object
Type
Mesh3D

emissive(color)

Set the emissive color of your next 3D objects
Parameters:
Name Type Description
color Color A color rapresentation like 255, 0, 255 or "#ff00ff"
Source:

emissiveIntensity(intensity)

Set the emissive intesity of your next 3D object
Parameters:
Name Type Default Description
intensity number 1 A value between 0.0 and 1.0
Source:

getDiffuse() → {Color}

Get currently used diffuse color
Source:
Returns:
current diffuse color
Type
Color

getEmissive() → {Color}

Get active emissive color
Source:
Returns:
- Current material emissive color
Type
Color

getEmissiveIntensity() → {number}

Get active emissiveIntensity value
Source:
Returns:
Current material emissiveIntensity value between 0.0 and 1.0
Type
number

getMaterial() → {Material}

Get a copy of active material
Source:
Returns:
A copy of current material
Type
Material

getMetalness() → {number}

Get active metalness value
Source:
Returns:
Current material metalness value between 0.0 and 1.0
Type
number

getOpacity() → {number}

Get active opacity value
Source:
Returns:
Current material opacity value between 0.0 and 1.0
Type
number

getOrbit()

Use getOrbit().disable() to block the camera view. getOrbit().enable() get back mouse controlled view.
Source:
Returns:
Camera orbit controls

getRoughness() → {number}

Get active roughness value
Source:
Returns:
Current material roughness value between 0.0 and 1.0
Type
number

hideGrid()

Hide the reference floor grid in your scene. Use showGrid() to enable it again.
Source:

icosahedron(x, y, z, radius, detail) → {Mesh3D}

Create an icosahedron. Can be used to create spheres with more regular topology than the sphere()
Parameters:
Name Type Default Description
x number 0
y number 0
z number 0
radius number 0.5
detail number 0 Default is 0. More then 1 it's a sphere
Source:
Returns:
newly created object
Type
Mesh3D

image3D(img, x, y, z, width, height) → {Mesh3D}

Create a plane with an image as texture
Parameters:
Name Type Description
img * Texture image (Remember to load your images inside preload())
x * Position x
y * Position y
z * Position z
width * Width of the plane. You may want to use a multiple of img.width to avoid stretching. Default 1.0
height * Height of the plane. You may want to use a multiple of img.height to avoid stretching. Default 1.0
Source:
Returns:
3D plane with the image as texture
Type
Mesh3D

intersect(a, b, removeOriginals) → {Mesh3D}

Create a new object from the intersection between a and b.
Parameters:
Name Type Description
a Mesh3D Source object
b Mesh3D Object you want to intersect with source
removeOriginals boolean Use false if you want to mantain original object in the scene. Default true
Source:
Returns:
newly created object
Type
Mesh3D

isImage(img) → {boolean}

Checks if a parameter is a p5.Image object
Parameters:
Name Type Description
img * The object to check
Source:
Returns:
- true if the object is a p5.Image, otherwise false
Type
boolean

loadFont3D(url, callback) → {Font}

Load a font in typeface.js format. You can convert a font file to JSON using https://gero3.github.io/facetype.js/ You can also use constants like 
UBUNTU
Parameters:
Name Type Description
url String typeface.js json file
callback function Optional function called when file is loaded
Source:
Returns:
loaded font
Type
Font

material(material, roughness, opacity, metalness, emissive, emissiveIntensity) → {Material}

Quickest way of setting a material.
Parameters:
Name Type Description
material Color | Material This can be a color or another material
roughness number Optional roughness. Default 1.0
opacity number Optional opacity. Default 1.0
metalness number Optional metalness. Default 0.0
emissive Color Optional emissive color. Default is black (no emissive color)
emissiveIntensity number Optional emissiveIntensity. Default 1.0
Source:
Returns:
newly created material
Type
Material

metalness(metalness)

Set the metalness of your next 3D object
Parameters:
Name Type Default Description
metalness number 0 A value between 0.0 and 1.0
Source:

noDiffuseMap()

Stop using a diffuse map when creating objects.
Source:

octahedron(x, y, z, radius, detail) → {Mesh3D}

Create an octahedron.
Parameters:
Name Type Default Description
x number 0
y number 0
z number 0
radius number 0.5
detail number 0
Source:
Returns:
newly created object
Type
Mesh3D

onScreen(…args) → {THREE.Vector3|null}

Transforms a 3D position into a 2D position on the screen.
Parameters:
Name Type Attributes Description
args number | THREE.Vector3 <repeatable>
 If one argument is provided, it should be a Vector3 representing the position in 3D space. If three arguments are provided, they should be x, y, and z coordinates in 3D space.
Source:
Returns:
- Returns a Vector3 with x and y coordinates representing the position on the screen, or null if the input arguments are not valid.
Type
THREE.Vector3 | null

opacity(opacity)

Set the opacity of your next 3D object
Parameters:
Name Type Default Description
opacity number 1 A value between 0.0 and 1.0
Source:

pickObject(x, y)

Use pickObject(x,y) to know which object is under x,y coords (pixel) of the view. You can use mouseX, mouseY to evaluate the object under mouse cursor.
Parameters:
Name Type Description
x Integer
y Integer
Source:
Returns:
Object is under x,y coords (pixel) of the view. null if there is no object rendered at those coords
Example
// Change the color of an object when clicked
function mousePressed() {
     var clickedObject = pickObject(mouseX, mouseY);
     
     if (clickedObject) {
      //implement what happen if you clicked on something
      clickedObject.setColor("red")
     } else {
      //no object under the mouse
     }
}

pointLight(coloropt, xopt, yopt, zopt, intensityopt, distanceopt, decayopt) → {PointLight}

Creates a new point light with the specified color, position, and other parameters, and adds it to the current scene.
Parameters:
Name Type Attributes Default Description
color Color <optional>
 "#ffffff" The color of the light, in hexadecimal format.
x number <optional>
 0 The X coordinate of the light's position.
y number <optional>
 0 The Y coordinate of the light's position.
z number <optional>
 0 The Z coordinate of the light's position.
intensity number <optional>
 1.0 The intensity of the light.
distance number <optional>
 0 The maximum distance from the light at which objects should still be illuminated.
decay number <optional>
 2 The rate at which the light's intensity decays over distance.
Source:
Returns:
The newly created point light.
Type
PointLight
Example
// Add a light to a scene with or without environment

function setup() {
  createCanvas3D(600, 400);
  background3D("#333333");
  //If you want only your lights you must use 
  //noEnvironment()
  environment(STARS)
  var lightX = 4;
  var lightY = 2;
  var lightZ = 2;
  var lightIntensity = 0.5; //don't exagerate💡
  
  pointLight("#9C27B0", lightX, lightY, lightZ, 0.5);

  diffuse("white");
  sphere(0, 0, 0, 1);
}

function draw() {}

pushFX(effect, …params) → {any}

Adds an effect to the composer for post-processing visual effects.
Parameters:
Name Type Attributes Description
effect FX Effect type: BLOOM, LUMINOSITY, GLITCH, SOBEL, HALFTONE.
params any <repeatable>
 Additional parameters for the effect, if required.
Source:
Returns:
The effect pass that was added to the composer.
Type
any
Examples
// add a luminosity effect
pushFX(LUMINOSITY):
// add a default bloom effect
pushFX(BLOOM);
// add a custom bloom effect with threshold = 1.0, strength = 1.0, and radius = 0.5
pushFX(BLOOM, 1.0, 1.0, 0.5);
// add a pixel effect with pixelSize = 10
pushFX(PIXEL, 10);
// add a halftone effect with radius = 9.5, shape = HALFTONE_SQUARE, scattered = 0, grayscale = true
pushFX(HALFTONE, 9.5, HALFTONE_SQUARE, 0, true);
// add a halftone effect with other available shapes like HALFTONE_DOT, HALFTONE_ELLIPSE and HALFTONE_LINE
pushFX(HALFTONE, 12, HALFTONE_LINE);

randomColor(minHue, maxHue, minSaturation, maxSaturation, minLightness, maxLightness) → {Color}

Generate a fully saturated random color or a random color with min/max bounds. For example you may want a random color per object so you can call 
fill(randomColor())
Parameters:
Name Type Default Description
minHue number 0 Default 0
maxHue number 360 Default 360
minSaturation number 100 Default 100
maxSaturation number 100 Default 100
minLightness number 50 Default 50
maxLightness number 50 Default 50
Source:
Returns:
- Random fully saturated color or as specificed by parameters
Type
Color

removeObjects(…objects3D)

Remove one or more Mesh3D or Group3D.
Parameters:
Name Type Attributes Description
objects3D Mesh3D | Group3D <repeatable>
 meshes or groups you want to remove
Source:

roughness(roughness)

Set the roughness of your next 3D object
Parameters:
Name Type Default Description
roughness number 1 A value between 0.0 and 1.0
Source:

shape(shape, x, y, z, depthopt, bevelEnabledopt, bevelThicknessopt, bevelSizeopt, bevelOffsetopt, bevelSegmentsopt) → {Mesh3D}

Creates a 3D mesh based on a shape, with options for depth and beveling.
Parameters:
Name Type Attributes Default Description
shape Shape The shape to use for creating the mesh.
x number The x position of the mesh.
y number The y position of the mesh.
z number The z position of the mesh.
depth number <optional>
 0 The depth of the mesh. If not specified, a 2D shape will be used.
bevelEnabled boolean <optional>
 false Specifies whether the mesh should have a bevel.
bevelThickness number <optional>
 The thickness of the bevel. If not specified, it is calculated based on the depth.
bevelSize number <optional>
 The size of the bevel. If not specified, it uses the same value as `bevelThickness`.
bevelOffset number <optional>
 0 The offset of the bevel from the surface of the mesh.
bevelSegments number <optional>
 6 The number of segments used to create the bevel.
Source:
Returns:
The mesh created from the specified shape.
Type
Mesh3D

showGrid(withGrid)

Use showGrid() to have the reference floor grid shown in your 3D scene. Use hideGrid() to hide it.
Parameters:
Name Type Default Description
withGrid Boolean true If specified it will show the grid with true and hide the grid with false. Default true
Source:

skybox(equirectangularImage) → {Image}

Sets the skybox background of the 3D scene using an equirectangular image. If no equirectangularImage is provided, checks if a skybox background is already set.
Parameters:
Name Type Description
equirectangularImage Image An equirectangular image used to create the skybox background.
Source:
Returns:
- The skybox background texture.
Type
Image

sphere(x, y, z, radius, phiStart, phiLength, thetaStart, thetaLength) → {Mesh3D}

Add a sphere to the scene.
Parameters:
Name Type Default Description
x number 0 X position
y number 0 Y position
z number 0 Z position
radius number 0.5 Optional radius of the sphere. Default 0.5
phiStart number 0
phiLength number
thetaStart number 0
thetaLength number
Source:
Returns:
newly created sphere object
Type
Mesh3D

subtract(a, b, removeOriginals) → {Mesh3D}

Create a new object subtracting a from b.
Parameters:
Name Type Description
a Mesh3D Source object
b Mesh3D Object you want to subtract from source
removeOriginals boolean Use false if you want to mantain original object in the scene. Default true
Source:
Returns:
newly created object
Type
Mesh3D

tetrahedron(x, y, z, radius, detail) → {Mesh3D}

Create an tetrahedron.
Parameters:
Name Type Default Description
x number 0
y number 0
z number 0
radius number 0.5
detail number 0
Source:
Returns:
newly created object
Type
Mesh3D

text3D(x, y, z, text)

Add a 3D text to your scene. Remember to loadFont3D
Parameters:
Name Type Default Description
x Number 0
y Number 0
z Number 0
text String ?!?
Source:
Returns:
Text in 3D

torus(xopt, yopt, zopt, radiusopt, tubeRadiusopt) → {Mesh3D}

Create a torus (like a donut)
Parameters:
Name Type Attributes Default Description
x number <optional>
 0 The x coordinate of the torus center.
y number <optional>
 0 The y coordinate of the torus center.
z number <optional>
 0 The z coordinate of the torus center.
radius number <optional>
 0.5 The radius of the torus.
tubeRadius number <optional>
 0.2 The radius of the tube of the torus.
Source:
Returns:
The newly created torus mesh object.
Type
Mesh3D

union(a, b, removeOriginals) → {Mesh3D}

Create a new object merging a and b togheter.
Parameters:
Name Type Description
a Mesh3D Source object
b Mesh3D Object you want to merge to source
removeOriginals boolean Use false if you want to mantain original object in the scene. Default true
Source:
Returns:
newly created object
Type
Mesh3D