Code editing

Once the plugin has been created, it needs editing. Read more about it and also about the principles of working with the code in the article below.
How to edit plugin
To edit the plugin, click on the Edit button in the Plugins window.
You can also click on the gear button next to the plugin you want to edit
The built-in code editor will open with the structure already prepared. This is the MyWebAR API structure.
Code structure
As you can see, three parts of API structure can be singled out:
1.Description (declaration) of variables
2.Polygon mesh description of created object.
3.API basic function.
1
// Describe variables here
2
​
3
// Describe mesh here
4
const make_mesh = () => {
5
};
6
​
7
// Main function. Not remove
8
const make_object = () => {
9
	const mesh = make_mesh();
10
	return {
11
		get name() {
12
		},
13
		mesh,
14
		animate(delta) {
15
		},
16
		destroy() {
17
		},
18
	};
19
};
20
​
21
resolve(make_object());
Copied!
To make it clear how it all works, I show an example of a ready-made plugin code below:
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!
This plugin creates a sphere. A parameter that the user enters in this case is the number of sphere segments in width.
A new variable widthSegments is created in the first part.
1
// Describe variables here
2
const widthSegments = page_object_params.vars.Width_Segments ?? 10;
Copied!
Then in the second part, a mesh for a sphere is created.
1
// Describe mesh here
2
const make_mesh = () => {
3
    	const o = new THREE.Object3D();
4
    	const geometry = new THREE.SphereGeometry( 1, widthSegments, 10);
5
    	const material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
6
    	const sphere = new THREE.Mesh( geometry, material );
7
    	o.add(sphere);
8
	return o;
9
};
Copied!
When creating a mesh, Object.3D must always be returned.
Therefore, the code starts by creating an object: : const o = new THREE.Object3D();. And it ends by adding a mash to this object and its returning: o.add(sphere); return o;.
The third part is the most important for creating a plugin. Its structure must stay undamaged; otherwise, it will be impossible to create the plugin.
1
// Main function. Not remove
2
const make_object = () => {
3
	const mesh = make_mesh();
4
	return {
5
		get name() {
6
			return __("Sphere");
7
		},
8
		mesh,
9
		animate(delta) {
10
		    //
11
		},
12
		destroy() {
13
		    //
14
		},
15
	};
16
};
Copied!
Now let’s speak about existing method functions:
get name() {
    return text;
}
Getter for the name of the object in the editor. This function returns the name of the created object by using the primitive.
CODE EXAMPLE: 
get name() {
    return “New Object”
}
Each new object will be named New Object.
​
​
mesh
Mesh of 3D object. This variable contains THREE.JS scene code, which is created in the second part of the structure.
CODE EXAMPLE: 
const make_mesh = () => {
    const o = new THREE.Object3D();
    const geometry = new THREE.SphereGeometry( 5, 32, 32 );
    const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
    const sphere = new THREE.Mesh( geometry, material );
    o.add(sphere);
    return o;
};
animate(delta) { // }
The animate() function is performed each frame (in Unity, there is a similar function called update()). The delta:Float parameter is responsible for the time between the two frames, current and past.
CODE EXAMPLE: 
animate(delta) {
    time += clock.getDelta();
     // animation updates here
    dispatch( events.update, { time: time, delta: delta } );
},
destroy() { }
The object destructor. It is required to delete an object.
CODE EXAMPLE: 
if(is_viewer){ 
    controller.RemoveEvent('user_click', onclick); 
}
 
Checking plugin’s work
This is what the plugin looks like on the editor screen:
You may notice that the Width_Segments property has been added to the left side. What are the properties and how to work with them is written in the article How to work with variables and properties.
Click on the Save button to save the plugin. You also need to click on the Debug button for debugging. More about it in the article Code Debugging.
Since the plugin is saved, you can close the editing window by clicking on the cross in the top right corner.
To add an object to the scene, click ”+“.
Adding Normal Object window opens.
Now, when you add a plugin, you can set any parameters. To add an object to the scene, click the Save button
The new object was added as well as its name Sphere, as it was written in the code.

Plugin Editor - Previous

Creating a plugin

Next - Plugin Editor

How to work with variables and properties

Last modified 7mo ago

Copy link

Contents

How to edit plugin

Code structure

Checking plugin’s work