Saturday 29 April 2017

Summerized - No mouse control on three.js spline editor when combined with femgl in node.js

I have no mouse control on three.js spline editor when combined with femgl .

first phrase -my spline editor javascript version codes are these:

var THREE=require('../build/three.js')


        window.THREE = THREE;

         require('./js/controls/DragControls.js')
         require('./js/controls/OrbitControls.js')
         require('./js/controls/TransformControls.js')


        var Stats=require('./js/libs/stats.min.js');

        var dat=require('./js/libs/dat.gui.min.js')



            String.prototype.format = function () {

                var str = this;
                for ( var i = 0; i < arguments.length; i ++ ) {

                    str = str.replace( '{' + i + '}', arguments[ i ] );

                }
                return str;

            };

            var container, stats;
            var camera, scene, renderer;
            var splineHelperObjects = [], splineOutline;
            var splinePointsLength = 4;
            var positions = [];
            var options;
....
scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.set( 0, 250, 1000 );
                scene.add( camera );

                scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
...
document.body.appendChild(renderer.domElement );

....

the source is at :https://github.com/mrdoob/three.js/blob/dev/examples/webgl_geometry_spline_editor.html

and second phrase -my femgl javascript codes are these:

  const regl = require('regl')({
      extensions: 'OES_element_index_uint'
    })



const camerab = require('./camera')({regl})
const createMesh = require('./fem')({regl})

const state = {
  center: [0, 0, 0],
  eye: [0, 0, 0],
  up: [0, 1, 0],
  polar: [Math.PI / 4, Math.PI / 16, 0],
  dpolar: [0, 0, 0],
  displacement: 0,
  lineWidth: 1.25,
  mode: 'stress',
  elements: true,
  lines: true,
  ortho: true,
  subdivisions: 3,
  meshData: require('./mesh.json')
}

let mesh = null

function rebuildMesh () {
  mesh = createMesh(state.meshData, state.subdivisions)
  state.center = mesh.center.slice()
  state.polar[0] = Math.PI / 4
  state.polar[1] = Math.PI / 16
  state.polar[2] = Math.log(2 * mesh.radius)
}




 rebuildMesh() 
...
rebuildMesh() 
    animate();

the source is at : https://github.com/mikolalysenko/femgl/blob/master/index.js

so my problem is that each of code phrases are working separately correctly . and when combined them it means merge second phrase at the end of first phrase it works,but we have no controls as mouse events in the first pharse - spline editor -.

my gitshell command is :

browserify webgl_geometry_spline_editor_js_test_03.js | indexhtmlify > webgl_geometry_spline_editor_js_test_03.html

the browser shows below:

[![enter image description here][1]][1]

so what could I do to have mouse control on both spline editor and femgl ? Regards



via hasanbaghal

No comments:

Post a Comment