How to work with variables and properties
The most important thing about creating a plugin is dealing with variables and properties. These allow the user to control the object.

About variables in the editor

Let’s have a look at the examples of variables:
  • Colour selection when adding a light source:
  • Setting text parameters for the object if you add text:
  • Downloading any file via a link, with the external server function enabled.
  • Etc.

Creating variables in your plugin

How to add a variable in the code

To declare a variable, go to Code editing.
Then, describe the variable at the top part of the code as it is written in the article Code Structure.
The description of the variables must be before the declaration of the make_mesh function.
1
// Describe variables here
2
3
4
// Describe mesh here
5
const make_mesh = () => {
6
const o = new THREE.Object3D();
7
const geometry = new THREE.SphereGeometry( 1, 10, 10);
8
const material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
9
const sphere = new THREE.Mesh( geometry, material );
10
o.add(sphere);
11
return o;
12
};
13
14
// Main function. Not remove
15
const make_object = () => {
16
const mesh = make_mesh();
17
return {
18
get name() {
19
return __("Sphere");
20
},
21
mesh,
22
animate(delta) {
23
//
24
},
25
destroy() {
26
//
27
},
28
};
29
};
30
31
resolve(make_object());
Copied!
Let’s take the example of a variable called WidthSegments. It specifies the number of sphere segments.
First thing you need to do is to add a variable to the code.
The structure of the variable is as follows (the numbers were added to describe the structure; they are not part of the code): const widthSegments (1) = page_object_params.vars(2).Width_Segments(3) ?? 10(4);
  1. 1.
    The name of the variable. It’s important to give the name to the variable because it is used in the code.
  2. 2.
    The correct "path" to the variable. The path is always the same for any variable.
  3. 3.
    The name of the variable for the property block. This name will be written in the property block in the right part of the window. Find out more about it below.
  4. 4.
    Default property value. This is the default value when adding an object.
The code with the added variable:
1
// Describe variables here
2
const widthSegments = page_object_params.vars.Width_Segments ?? 10;
3
4
// Describe mesh here
5
const make_mesh = () => {
6
const o = new THREE.Object3D();
7
const geometry = new THREE.SphereGeometry( 1, 10, 10);
8
const material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
9
const sphere = new THREE.Mesh( geometry, material );
10
o.add(sphere);
11
return o;
12
};
13
14
// Main function. Not remove
15
const make_object = () => {
16
const mesh = make_mesh();
17
return {
18
get name() {
19
return __("Sphere");
20
},
21
mesh,
22
animate(delta) {
23
//
24
},
25
destroy() {
26
//
27
},
28
};
29
};
30
31
resolve(make_object());
Copied!
Now you need to use this variable in line 7, the 2nd parameter in THREE.SphereGeometry is the same WidthSegments, so the code will change from: const geometry = new THREE.SphereGeometry( 1, 10, 10); to const geometry = new THREE.SphereGeometry( 1, widthSegments, 10);
1
// Describe variables here
2
const widthSegments = page_object_params.vars.Width_Segments ?? 10;
3
4
// Describe mesh here
5
const make_mesh = () => {
6
const o = new THREE.Object3D();
7
const geometry = new THREE.SphereGeometry( 1, widthSegments, 10);
8
const material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
9
const sphere = new THREE.Mesh( geometry, material );
10
o.add(sphere);
11
return o;
12
};
13
14
// Main function. Not remove
15
const make_object = () => {
16
const mesh = make_mesh();
17
return {
18
get name() {
19
return __("Sphere");
20
},
21
mesh,
22
animate(delta) {
23
//
24
},
25
destroy() {
26
//
27
},
28
};
29
};
30
31
resolve(make_object());
Copied!

Adding a variable to the UI

Adding a variable only to the code is not enough, you need to define it in the editor as well.
You need to use The Properties box for this. It is on the right side of the window.
To add a variable, click on the drop-down list and select the type you need. For WidthSegments, it is Integer.
Each property and parameter in THREE.js objects has its own specified type. You can find the correct type in THREE.js library. For a sphere, the parameter WidthSegments can be found in the constructor via link https://threejs.org/docs/?q=geome#api/en/geometries/SphereGeometry
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
Then, click on the Add button and the property will appear in the list.
In the Name field, type in the name of the variable specified in the vars parameter. It is Width_Segments
In the Value field, type in the value that was added after the merge operator with null (??). It is number 10.
The Range parameter is responsible for the allowed range of values. This parameter is turned off by default.
Thus, the plugin with the variable looks like this:
Window for adding an object and the created parameter:
Last modified 1mo ago