Solved: Mesh Editor - Edit Ribbon Vertices?

[GameMonetize]

it is babylonjs  and thank you for being part of our community

[JackFalcon]

-->out of likes<-- 

 "afalcon cannot have any more reactions today." 

...

: )

[JackFalcon]

Thanks @Deltakosh. Very happy remix3D is BABYLON!

A contribution for that space is 'cinematics': Animations configurable for remix3D through JSON.

Opens learning-path: learn JSON-Animation -> learn BABYLON...

Have a great day!

[JackFalcon]

I never posted the code...

Add i and k to key codes:

                    case 73: //i
                        keys.edit.inc = 1;
                        break;
                    case 75: //k
                        keys.edit.dec = 1;
                        break;

 These will be used to edit vertex positions.

 The EditMode Keys fit within a larger key object which contains all the animations:

        /*********************KEYS***********************/
        var keys={ 
            move:{fwd:0,lft:0,rgt:0,jmp:0}, 
            jump:{jumpMode:0, jumpIndex:0, preJumpMode:0, fallMode:0},/*jumpMax = 30,*/ 
            edit:{inc:0,dec:0,ext:0}//increment, decrement, extrude.
        };

And here is all the Mesh Editing, Click-RGB === XYZ Code, for your adjustment:

       /**********************************CREATE-EDITABLE-RIBBON*****************************/
            // var ribbon1;
            var meshEditor = {};
			var createRibbon1 = function (){


			      var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
			      pl.diffuse = new BABYLON.Color3(0.8, 0.5, 1);
			      pl.specular = new BABYLON.Color3(0, 0, 1);
			      pl.intensity = 0.8;

			      var mat = new BABYLON.StandardMaterial("mat1", scene);
			      mat.alpha = 1.0;
			      mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
			      mat.backFaceCulling = false;
			      // mat.wireframe = true;
			      var texture = new BABYLON.Texture("../../../3d/starbox5/starbox5_pz.jpg", scene);
			      texture.vScale = 1.0; //How many images span the surface.
			      texture.uScale = 30.0; //Lots of images squashed and stretched makes an interesting effect...
			      mat.diffuseTexture = texture;

			 }


            /**********************************CREATE-EDIT-NODES*****************************/
            // var selectedEditNodes = [];
    var editPoints = [];

    var track;
            var createEditPath1 = function (){

                    /*-----------------------Path------------------------------------------*/ 
                    
                    // Create array of points to describe the curve
                    var n = 450; // number of points
                    var r = 50; //radius
                    for (var i = 0; i < n + 1; i++) {
                        // points.push( new BABYLON.Vector3((r + (r/6)*Math.sin(9*i*Math.PI/n))* Math.sin(3*i*Math.PI/n), 0, (r + (r/11)*Math.sin(7*i*Math.PI/n)) * Math.cos(3*i*Math.PI/n)));
                        editPoints.push( new BABYLON.Vector3((r + (r/5)*Math.sin(8*i*Math.PI/n))* Math.sin(2*i*Math.PI/n), 0, (r + (r/10)*Math.sin(6*i*Math.PI/n)) * Math.cos(2*i*Math.PI/n)));
                   }   
                    


                    // //Draw the curve
                    track = BABYLON.MeshBuilder.CreateLines('track', {points: editPoints, updatable:true}, scene);
                    track.color = BABYLON.Color3.Blue();



            }


            /**********************************CREATE-EDIT-NODES*****************************/
            var selectedEditNodes = [];
            var createEditNodes1 = function (){
                // var numNodes = meshEditor.positions.length;
                var numNodes = editPoints.length;

                var greenMat = new BABYLON.StandardMaterial("green1", scene);
                greenMat.diffuseColor = new BABYLON.Color3(0, 1, 0);

                var redMat = new BABYLON.StandardMaterial("red1", scene);
                redMat.diffuseColor = new BABYLON.Color3(1, 0, 0);

                var blueMat = new BABYLON.StandardMaterial("blue1", scene);
                blueMat.diffuseColor = new BABYLON.Color3(0, 0, 1);

                // var editType="box";
                var editType="sphere";
                var editNode;

                // for (var i=0; i < numNodes; i+=3){
                for (var i=0; i < numNodes; i++){
                    if(editType==='box'){
                        editNode = BABYLON.Mesh.CreateBox("cube" + i, 0.25, scene);
                    }

                    if(editType==='sphere'){
                        // Parameters: name, subdivs, size, scene
                        editNode = BABYLON.Mesh.CreateSphere("editNode"+i, 1, 0.15, scene);
                    }
                    editNode.actionManager = new BABYLON.ActionManager(scene);
                    editNode.editMode = "none";
                    editNode.vectorIndex = i;
                    //place-editNodes-on-ribbon.
                    // editNode.position = new BABYLON.Vector3(meshEditor.positions[i],meshEditor.positions[i+1],meshEditor.positions[i+2])
                    editNode.position = editPoints[i];

                    editNode.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
                        var eNode = evt.meshUnderPointer;
                        if(eNode.editMode === 'none' ){
                            eNode.material = greenMat;
                            eNode.editMode='green'
                            selectedEditNodes.push(eNode);
                        }else if(eNode.editMode === 'green' ){
                            eNode.material = blueMat;
                            eNode.editMode='blue'
                        }else  if(eNode.editMode === 'blue' ){
                            eNode.material = redMat;
                            eNode.editMode='red'
                        }else  if(eNode.editMode === 'red' ){
                            eNode.material = null;
                            eNode.editMode='none'
                        }
                        if(eNode.editMode!="none"){
                            displayMeshAxis(eNode, false)
                        } else {
                            displayMeshAxis(eNode, true)
                            var remove = selectedEditNodes.indexOf(eNode)
                            selectedEditNodes.splice(remove,1)
                        }

                    }));

                }
            }

            /*********************************DISPLAY-MESH-AXIS******************************/

            var displayMeshAxis = function (mesh, dispose) {
                mesh.computeWorldMatrix();

                var matrix = mesh.getWorldMatrix();
                var origin = mesh.position;
                // find existing axis for this box and dispose
                var xAxis = scene.getMeshByName("xAxis"+mesh.name);
                var yAxis = scene.getMeshByName("yAxis"+mesh.name);
                var zAxis = scene.getMeshByName("zAxis"+mesh.name);
                if (xAxis!=null){ xAxis.dispose();}
                if (yAxis!=null){ yAxis.dispose();}
                if (zAxis!=null){ zAxis.dispose();}
                //dispose-only
                if(dispose){  return; }
                // calculate new normals for this mesh in world coordinate system
                var xNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(100,0,0),matrix);
                var yNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,100,0),matrix);
                var zNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,0,-100),matrix);
                // create axis lines
                xAxis = BABYLON.Mesh.CreateDashedLines("xAxis"+mesh.name, [origin, xNormal],3,10,200, scene, false);
                xAxis.color = BABYLON.Color3.Red();
                yAxis = BABYLON.Mesh.CreateDashedLines("yAxis"+mesh.name, [origin, yNormal],3,10,200, scene, false);
                yAxis.color = BABYLON.Color3.Green();
                zAxis = BABYLON.Mesh.CreateDashedLines("zAxis"+mesh.name, [origin, zNormal],3,10,200, scene, false);
                zAxis.color = BABYLON.Color3.Blue();
            }

            /*********************************RENDER-MESH-EDITS******************************/
            var renderMeshEdits = function(){
                scene.registerAfterRender(function() {
                    // var savemesh = meshEditor.positions;
                    if(selectedEditNodes.length){
                        if(meshEditKeys.inc || meshEditKeys.dec){
                            renderEdits();
                        }
                    }
                });

                var renderEdits = function(){
                    var aNode;
                    var direction = (meshEditKeys.inc) ? 1 : (meshEditKeys.dec) ? -1 : 0;
                    var moveAmount = 0.25 * direction;;
                    //move-each-selected-node-in-the-direction-of-its-state.
                    for(var i = 0; i< selectedEditNodes.length; i++){
                        aNode = selectedEditNodes[i];
                        if(aNode.editMode==="red"){
                            aNode.position.x += moveAmount;
                            // editPoints[aNode.vectorIndex] += moveAmount;
                            // meshEditor.positions[aNode.vectorIndex] += moveAmount;
                        } else if(aNode.editMode==="green"){
                            aNode.position.y += moveAmount;
                            // editPoints[aNode.vectorIndex] = aNode.position;
                            // meshEditor.positions[aNode.vectorIndex+1] += moveAmount;
                        } else if(aNode.editMode==="blue"){
                            aNode.position.z += moveAmount;
                            // editPoints[aNode.vectorIndex+2] += moveAmount;
                            // meshEditor.positions[aNode.vectorIndex+2] += moveAmount;
                        }
                    }

            var positions = [];
            editPoints.forEach(function (s) {
                positions.push(s.x, s.y, s.z);

            });


var indices = track.getIndices();
var normals = [];

                    track.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions, false, true);
                    // BABYLON.VertexData.ComputeNormals(positions, indices, normals);
                    // track.updateVerticesData(BABYLON.VertexBuffer.NormalKind, normals, false, false);
                    // track.updateVerticesData(BABYLON.VertexBuffer.PositionKind, editPoints, false, true);
                    // updateMeshEdits(meshEditor.ribbon1, meshEditor.positions, meshEditor.normals, meshEditor.indices)
                }

                var updatePathEdits = function(path, positions, normals, indices) {
                    ribbon.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions, false, true);
                    BABYLON.VertexData.ComputeNormals(positions, indices, normals);
                    ribbon.updateVerticesData(BABYLON.VertexBuffer.NormalKind, normals, false, false);
                };

                var updateMeshEdits = function(ribbon, positions, normals, indices) {
                    ribbon.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions, false, true);
                    BABYLON.VertexData.ComputeNormals(positions, indices, normals);
                    ribbon.updateVerticesData(BABYLON.VertexBuffer.NormalKind, normals, false, false);
                };
            }

add createEditNodes1 and createEditPath1 to your createScene to edit mesh in BABYLON.