方案保存

master
tonkia 6 years ago
parent 4a75cb262a
commit c538299186
  1. 20
      app.js
  2. 100
      static/js/createScheme.js

@ -1,10 +1,16 @@
var express = require('express'); var express = require('express');
var multer = require('multer'); var multer = require('multer');
var upload = multer({ dest: 'uploads/' }); var upload = multer({ dest: 'uploads/' });
var bodyParser = require('body-parser');
var app = express(); var app = express();
app.use(bodyParser.json({ limit: '50mb' }));
app.use(express.static('static')); app.use(express.static('static'));
//临时存储数据
var data = { name: '默认方案', components: [] };
//主页加载 //主页加载
app.get('/', function (req, res) { app.get('/', function (req, res) {
res.sendFile(__dirname + "/views/createScheme.html"); res.sendFile(__dirname + "/views/createScheme.html");
@ -16,9 +22,21 @@ app.post('/upload', upload.single('file'), function (req, res) {
res.send(req.file); res.send(req.file);
}); });
//返回文件
app.get('/files/:filename', function (req, res) { app.get('/files/:filename', function (req, res) {
//TODO 根据session判断是否有权限获取文件
var filename = req.params['filename']; var filename = req.params['filename'];
res.sendFile(__dirname + "/uploads/" + filename); res.sendFile(__dirname + "/uploads/" + filename);
}) });
//保存方案
app.post('/saveScheme', function (req, res) {
data = req.body;
});
//获取方案
app.post('/getScheme', function (req, res) {
res.send(data);
});
app.listen(80); app.listen(80);

@ -1,7 +1,9 @@
var renderer, scene, camera; var renderer, scene, camera;
//整个页面维护的数据 //整个页面维护的数据
var data = { name: '默认方案', components: [] }; //var data = { name: '默认方案', components: [] };
//TODO 相机参数
var data;
//当前选择的部件 //当前选择的部件
var componentIndex = -1; var componentIndex = -1;
@ -13,6 +15,7 @@ $().ready(function () {
loadmodel(); loadmodel();
initEvent(); initEvent();
}); });
//初始化Threejs //初始化Threejs
function initThree() { function initThree() {
initScene(); initScene();
@ -20,11 +23,24 @@ function initThree() {
initRenderer(); initRenderer();
render(); render();
} }
//获取数据
//获取数据 初始化data
function initData() { function initData() {
//todo ajax请求数据 //ajax请求数据
$.ajax({
type: "POST",
url: "/getScheme",
async: false, //同步请求,不然data会出问题
success: function (remotaData) {
data = remotaData;
},
error: function () {
//TODO 初始化数据异常
} }
//刷新主Ui });
}
//刷新主Ui,方案名,部件列表
function initUi() { function initUi() {
//方案名 //方案名
$('#schemeName').val(data.name); $('#schemeName').val(data.name);
@ -52,7 +68,7 @@ function selectComponent(index) {
freshmodelList(); freshmodelList();
} }
//选择模型列表 //刷新模型的选择列表
function freshmodelList() { function freshmodelList() {
$('.list-group-item').remove(); $('.list-group-item').remove();
if (data.components[componentIndex].models.length == 0) { if (data.components[componentIndex].models.length == 0) {
@ -71,21 +87,57 @@ function freshmodelList() {
} }
} }
} }
//选择模型
function selectModel(index) {
data.components[componentIndex].modelIndex = index;
freshmodelList();
}
//删除模型 //删除模型
function delModelItem(index) { function delModelItem(index) {
scene.remove(data.components[componentIndex].models[index].modelObj); scene.remove(data.components[componentIndex].models[index].modelObj);
data.components[componentIndex].models.splice(index, 1); data.components[componentIndex].models.splice(index, 1);
selectModel(0); selectModel(0);
} }
//选择模型
function selectModel(index) {
data.components[componentIndex].modelIndex = index;
freshmodelList();
}
//初始化模型 //初始化模型
function loadmodel() { function loadmodel() {
var manager = new THREE.LoadingManager();
manager.onStart = function (url, itemsLoaded, itemsTotal) {
console.log('Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
};
manager.onLoad = function () {
initUi();
console.log('Loading complete!');
};
manager.onProgress = function (url, itemsLoaded, itemsTotal) {
console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
};
manager.onError = function (url) {
console.log('There was an error loading ' + url);
};
var loader = new THREE.FBXLoader(manager);
for (var comIndex in data.components) {
for (var molIndex in data.components[comIndex].models) {
//异步加载问题
(function (comIndex, molIndex) {
var url = '/files/' + data.components[comIndex].models[molIndex].fileId;
loader.load(url, function (object) {
// object.traverse(function (child) {
// if (child instanceof THREE.Mesh) {
// child.material.castShadow = true;
// child.material.receiveShadow = true;
// child.material.needsUpdate = true;
// }
// });
object.visible = (data.components[comIndex].modelIndex == molIndex);
data.components[comIndex].models[molIndex].modelObj = object;
scene.add(object);
}
);
})(comIndex, molIndex);
}
}
} }
function initScene() { function initScene() {
@ -127,7 +179,6 @@ function initCamera() {
controls = new THREE.OrbitControls(camera, $('#viewField')[0]); controls = new THREE.OrbitControls(camera, $('#viewField')[0]);
controls.target.set(0, 0, 0); controls.target.set(0, 0, 0);
controls.update(); controls.update();
} }
function initRenderer() { function initRenderer() {
@ -148,6 +199,16 @@ function render() {
//初始化所有事件 //初始化所有事件
function initEvent() { function initEvent() {
$('#saveScheme').click(function () {
console.info(data);
$.ajax({
type: "POST",
url: "/saveScheme",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data)
});
});
//方案名变动监听 //方案名变动监听
$('#schemeName').change(function () { $('#schemeName').change(function () {
data.name = $('#schemeName').val(); data.name = $('#schemeName').val();
@ -253,8 +314,9 @@ function initEvent() {
}); });
} }
// 选择上传完成后加载模型
function addModel(url, callBack) { function addModel(url, callBack) {
var map = new THREE.TextureLoader().load('/img/texture/001.jpg'); //var map = new THREE.TextureLoader().load('/img/texture/001.jpg');
//加载obj模型 //加载obj模型
// loader = new THREE.OBJLoader(); // loader = new THREE.OBJLoader();
// loader.load(url, function (object) { // loader.load(url, function (object) {
@ -266,12 +328,12 @@ function addModel(url, callBack) {
var loader = new THREE.FBXLoader(); var loader = new THREE.FBXLoader();
loader.load(url, function (object) { loader.load(url, function (object) {
object.traverse(function (child) { object.traverse(function (child) {
if (child instanceof THREE.Mesh) { // if (child instanceof THREE.Mesh) {
child.material.map = map; // child.material.map = map;
child.material.castShadow = true; // child.material.castShadow = true;
child.material.receiveShadow = true; // child.material.receiveShadow = true;
child.material.needsUpdate = true; // child.material.needsUpdate = true;
} // }
}); });
scene.add(object); scene.add(object);
callBack(object); callBack(object);

Loading…
Cancel
Save