Back to Content

# Creating 3D geometry using JavaScript - Tutorial

You can generate new geometry from scratch in Coppercube, using scripting. This is possible not only in the editor, but also in the Windows .exe and Mac OS X .app target, during runtime, and can be very useful. It is actually very easy and this short tutorial shows how: The resulting generated geometry

It works like this: For every geometry in CopperCube you have two buffers: one which holds the vertices with position, color, etc. And another buffer which holds indices to those vertices. So if you have for example 4 vertices:
``` 0-----1
|     |
|     |
2-----3
```

Then for creating a rectangle, you would need to make two triangles out of this:

``` 0-----1
|   / |
| /   |
2-----3
```

So, in the index buffer, you will need to store the two triangles, 0-1-2 and 1-3-2. So the index buffer will look like this;:
(0,1,2,1,3,2)

For adding a vertex to the vertex buffer, there is the function ccbAddMeshBufferVertex() and for adding an index, use the function ccbAddMeshBufferIndex().

As example code, we let the user select a 3D object in the editor, and replace all of its geometry with a rectangle:

```// use the currently selected node in the editor

var meshnode = editorGetSelectedSceneNode();
var bufferCount = ccbGetSceneNodeMeshBufferCount(meshnode);

if (bufferCount == 0)
alert('The selected node has no 3D geometry.');
else
{
// get old texture of that node
var oldTexture = ccbGetSceneNodeMaterialProperty(meshnode, 0, "Texture1");

// remove all mesh buffers holding geometry, because we want to replace its geometry with a totally new one
for (var i=0; i<bufferCount; ++i)
ccbRemoveMeshBuffer(meshnode, 0);

// add new buffer

// disable dynamic lighting and set a texture
ccbSetSceneNodeMaterialProperty(meshnode, 0, 'Lighting', false);
ccbSetSceneNodeMaterialProperty(meshnode, 0, "Texture1", oldTexture);

// add 4 vertices
ccbAddMeshBufferVertex(meshnode, 0, new vector3d(0,10,0));
ccbAddMeshBufferVertex(meshnode, 0, new vector3d(10,10,0));
ccbAddMeshBufferVertex(meshnode, 0, new vector3d(0,0,0));
ccbAddMeshBufferVertex(meshnode, 0, new vector3d(10,0,0));

// set their colors
ccbSetMeshBufferVertexColor(meshnode, 0, 0, 0x77400000);
ccbSetMeshBufferVertexColor(meshnode, 0, 1, 0x77400000);
ccbSetMeshBufferVertexColor(meshnode, 0, 2, 0x77400000);
ccbSetMeshBufferVertexColor(meshnode, 0, 3, 0x77400000);

// set texture coordinate
ccbSetMeshBufferVertexTextureCoord(meshnode, 0, 0, new vector3d(0,1,0));
ccbSetMeshBufferVertexTextureCoord(meshnode, 0, 1, new vector3d(1,1,0));
ccbSetMeshBufferVertexTextureCoord(meshnode, 0, 2, new vector3d(0,0,0));
ccbSetMeshBufferVertexTextureCoord(meshnode, 0, 3, new vector3d(1,0,0));

// add 6 indices, to create 2 triangles from this.
// note that the order is important. If you are adding the indices
// 0,1,2, you create a triangle facing into forward direction,
// if you add it with 0,2,1, it will face into the opposite direction.