Question

I want to combine these two paragraphs attending to draw a mesh with draw a box together . I use node.

my two source codes are from these two links as below:

the first code is this as index.js in femgl:

const regl = require('regl')({
  extensions: 'OES_element_index_uint'
})
const camera = 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()

function handleFiles ([file]) {
  const reader = new window.FileReader()
  reader.onload = (data) => {
    try {
      const meshData = JSON.parse(data.target.result)
      mesh = createMesh(meshData, state.subdivisions)
      state.meshData = meshData
      rebuildMesh()
    } catch (e) {
      window.alert('invalid data file')
    }
  }
  reader.readAsText(file)
}

const uploadInput = document.createElement('input')
uploadInput.setAttribute('type', 'file')
uploadInput.addEventListener('change', () => {
  if (uploadInput.files && uploadInput.files.length > 0) {
    handleFiles(uploadInput.files)
  }
})

require('control-panel')([
  {
    type: 'range',
    label: 'displacement',
    min: 0,
    max: 255,
    initial: state.displacement
  },
  /*
  {
    type: 'range',
    label: 'lineWidth',
    min: 0,
    max: 10,
    initial: state.lineWidth
  },
  */
  {
    type: 'select',
    label: 'mode',
    options: [
      'stress',
      'x',
      'y',
      'z',
      'total'
    ],
    initial: state.mode
  },
  {
    type: 'checkbox',
    label: 'ortho',
    initial: state.ortho
  },
  {
    type: 'checkbox',
    label: 'elements',
    initial: state.elements
  },
  {
    type: 'checkbox',
    label: 'lines',
    initial: state.lines
  },
  {
    type: 'range',
    label: 'subdivisions',
    min: 1,
    max: 8,
    step: 1,
    initial: state.subdivisions
  },
  {
    type: 'button',
    label: 'open file',
    action: () => {
      uploadInput.click()
    }
  }
]).on('input', (data) => {
  const psubdiv = state.subdivisions
  Object.assign(state, data)
  if (psubdiv !== data.subdivisions) {
    rebuildMesh()
  }
})

require('./gesture')({
  canvas: regl._gl.canvas,

  onZoom (dz) {
    state.dpolar[2] += 0.25 * dz
  },

  onRotate (dx, dy) {
    state.dpolar[0] += dx
    state.dpolar[1] -= dy
  }
})

require('drag-and-drop-files')(regl._gl.canvas, handleFiles)

regl.frame(({tick}) => {
  camera.integrate(state)

  regl.clear({
    color: [0, 0, 0, 0],
    depth: 1
  })

  camera.setup(state, () => {
    mesh.draw(state)
  })
})

the second code is this as tempcubejava.js in three.js:

//------------------
//const tempthree = require('./three.js')({regl})
//require('./three.js')()
//require('THREE')
var THREE = require('./three');

//var Example = require( "./three" );
//var foo=new Example;
//------------------

//-----------------
var scene
var camera2
var renderer;
var geometry, material
var mesh2;

init();
//animate();

function init() {

    scene = new THREE.Scene();

    camera2 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera2.position.z = 1000;

    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh2 = new THREE.Mesh( geometry, material );
    scene.add( mesh2 );

    renderer = new THREE.WebGLRenderer();

renderer.autoClear = false;

    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

    renderer.render( scene, camera2 );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.05;
    mesh.rotation.y += 0.02;

  renderer.autoClear = false;
    renderer.render( scene, camera2 );

}

//-----------------

and at last the merged third index.js is this

const regl = require('regl')({
  extensions: 'OES_element_index_uint'
})
const camera = 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')
}

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

//-----------------
var scene
var camera2
var renderer;
var geometry, material
var mesh2;


init();    //***************
//animate();
rebuildMesh()    //***************


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)
}

function init() {

    scene = new THREE.Scene();

    camera2 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera2.position.z = 1000;

    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh2 = new THREE.Mesh( geometry, material );
    scene.add( mesh2 );

    renderer = new THREE.WebGLRenderer();

renderer.autoClear = false;

    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

    renderer.render( scene, camera );


//rebuildMesh()     //***************

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.05;
    mesh.rotation.y += 0.02;

  renderer.autoClear = false;
    renderer.render( scene, camera2 );

}

//-----------------
//======================================================


let mesh = null



//rebuildMesh()

function handleFiles ([file]) {
  const reader = new window.FileReader()
  reader.onload = (data) => {
    try {
      const meshData = JSON.parse(data.target.result)
      mesh = createMesh(meshData, state.subdivisions)
      state.meshData = meshData
      rebuildMesh()
    } catch (e) {
      window.alert('invalid data file')
    }
  }
  reader.readAsText(file)
}

const uploadInput = document.createElement('input')
uploadInput.setAttribute('type', 'file')
uploadInput.addEventListener('change', () => {
  if (uploadInput.files && uploadInput.files.length > 0) {
    handleFiles(uploadInput.files)
  }
})

require('control-panel')([
  {
    type: 'range',
    label: 'displacement',
    min: 0,
    max: 255,
    initial: state.displacement
  },
  /*
  {
    type: 'range',
    label: 'lineWidth',
    min: 0,
    max: 10,
    initial: state.lineWidth
  },
  */


  {
    type: 'select',
    label: 'mode',
    options: [
      'stress',
      'x',
      'y',
      'z',
      'total'
    ],
    initial: state.mode
  },
  {
    type: 'checkbox',
    label: 'ortho',
    initial: state.ortho
  },
  {
    type: 'checkbox',
    label: 'elements',
    initial: state.elements
  },
  {
    type: 'checkbox',
    label: 'lines',
    initial: state.lines
  },
  {
    type: 'range',
    label: 'subdivisions',
    min: 1,
    max: 8,
    step: 1,
    initial: state.subdivisions
  },
  {
    type: 'button',
    label: 'open file',
    action: () => {
      uploadInput.click()
    }
  }
]).on('input', (data) => {
  const psubdiv = state.subdivisions
  Object.assign(state, data)
  if (psubdiv !== data.subdivisions) {
    rebuildMesh()
  }
})

require('./gesture')({
  canvas: regl._gl.canvas,

  onZoom (dz) {
    state.dpolar[2] += 0.25 * dz
  },

  onRotate (dx, dy) {
    state.dpolar[0] += dx
    state.dpolar[1] -= dy
  }
})

require('drag-and-drop-files')(regl._gl.canvas, handleFiles)

regl.frame(({tick}) => {
  camera.integrate(state)

  regl.clear({
    color: [0, 0, 0, 0],
    depth: 1
  })

  camera.setup(state, () => {
    mesh.draw(state)
  })
})

so when I use

browserify index.js | indexhtmlify > indexcube.html

I see a black blank page,so my question is that what should I do to see graphic from first paragraph and graphic from second paragraph together.

Best Regards

Answer 1

我的问题解决了我修改合并文件

index.js

var scene
var camera2
var renderer;
var geometry, material
var mesh2;

const regl = require('regl')({
  extensions: 'OES_element_index_uint'
})
const camera = 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')
}

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

//-----------------






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)
}

function init() {

    scene = new THREE.Scene();

    camera2 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera2.position.z = 1000;

    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh2 = new THREE.Mesh( geometry, material );
    scene.add( mesh2 );

    renderer = new THREE.WebGLRenderer();

renderer.autoClear = false;

    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

    renderer.render( scene, camera2 );


//rebuildMesh()     //***************

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.05;
    mesh.rotation.y += 0.02;

  renderer.autoClear = false;
    renderer.render( scene, camera2 );

}

//-----------------
//======================================================






//rebuildMesh()

function handleFiles ([file]) {
  const reader = new window.FileReader()
  reader.onload = (data) => {
    try {
      const meshData = JSON.parse(data.target.result)
      mesh = createMesh(meshData, state.subdivisions)
      state.meshData = meshData
      rebuildMesh()
    } catch (e) {
      window.alert('invalid data file')
    }
  }
  reader.readAsText(file)
}

const uploadInput = document.createElement('input')
uploadInput.setAttribute('type', 'file')
uploadInput.addEventListener('change', () => {
  if (uploadInput.files && uploadInput.files.length > 0) {
    handleFiles(uploadInput.files)
  }
})

require('control-panel')([
  {
    type: 'range',
    label: 'displacement',
    min: 0,
    max: 255,
    initial: state.displacement
  },
  /*
  {
    type: 'range',
    label: 'lineWidth',
    min: 0,
    max: 10,
    initial: state.lineWidth
  },
  */


  {
    type: 'select',
    label: 'mode',
    options: [
      'stress',
      'x',
      'y',
      'z',
      'total'
    ],
    initial: state.mode
  },
  {
    type: 'checkbox',
    label: 'ortho',
    initial: state.ortho
  },
  {
    type: 'checkbox',
    label: 'elements',
    initial: state.elements
  },
  {
    type: 'checkbox',
    label: 'lines',
    initial: state.lines
  },
  {
    type: 'range',
    label: 'subdivisions',
    min: 1,
    max: 8,
    step: 1,
    initial: state.subdivisions
  },
  {
    type: 'button',
    label: 'open file',
    action: () => {
      uploadInput.click()
    }
  }
]).on('input', (data) => {
  const psubdiv = state.subdivisions
  Object.assign(state, data)
  if (psubdiv !== data.subdivisions) {
    rebuildMesh()
  }
})

require('./gesture')({
  canvas: regl._gl.canvas,

  onZoom (dz) {
    state.dpolar[2] += 0.25 * dz
  },

  onRotate (dx, dy) {
    state.dpolar[0] += dx
    state.dpolar[1] -= dy
  }
})

require('drag-and-drop-files')(regl._gl.canvas, handleFiles)

regl.frame(({tick}) => {
  camera.integrate(state)

  regl.clear({
    color: [0, 0, 0, 0],
    depth: 1
  })

  camera.setup(state, () => {
    mesh.draw(state)
  })
})

rebuildMesh()    //***************
init();    //***************
//animate();

所以我在浏览器中看到了这个： femgl and three.js cube example combined

谢谢大家。

draw a mesh with draw a box together ,combine Three.js and femgl (WebGL finite element viewer) in node

1 个答案: