0
中結合Three.js和femgl（WebGL有限元素查看器）我想結合這兩款參加繪圖的網格和一起畫框。我使用節點。一起畫一個網格畫一個盒子，在節點
我的兩個源代碼是來自如下這兩個環節：
https://github.com/mikolalysenko/femgl
https://github.com/mrdoob/three.js
所述第一代碼是這樣如在femgl index.js：
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)
})
})
的第二個代碼是three.js中的tempcubejava.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);
}
//-----------------
，最後合併的第三index.js是這個
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)
})
})
所以，當我使用
browserify index.js | indexhtmlify > indexcube.html
我看到一個黑色的空白頁，所以我的問題是，我該怎麼辦將第一段的圖形和第二段的圖形一起看。
問候
