diff --git a/app.js b/app.js
index c3bb70e..d4b3bbd 100644
--- a/app.js
+++ b/app.js
@@ -4,8 +4,6 @@ var upload = multer({ dest: 'uploads/' });
var bodyParser = require('body-parser');
var fs = require('fs');
var gm = require('gm');
-
-
var app = express();
app.use(bodyParser.json({ limit: '50mb' }));
@@ -35,23 +33,25 @@ app.get('/files/:filename', function (req, res) {
//返回缩略图
app.get('/files/thumbnail/:filename', function (req, res) {
var filename = req.params['filename'];
- fs.exists(__dirname + "/uploads/thumbnail/" + filename, function (exist) {
-
- if (exist) {
- res.sendFile(__dirname + "/uploads/thumbnail/" + filename);
- } else {
- gm('./uploads/' + filename).resize(40, 40).write("./uploads/thumbnail/" + filename, function (err) {
- if (!err)
- console.info(err);
- res.sendFile(__dirname + "/uploads/thumbnail/" + filename);
- })
- }
- });
+ // fs.exists(__dirname + "/uploads/thumbnail/" + filename, function (exist) {
+
+ // if (exist) {
+ // res.sendFile(__dirname + "/uploads/thumbnail/" + filename);
+ // } else {
+ // gm('./uploads/' + filename).resize(40, 40).write("./uploads/thumbnail/" + filename, function (err) {
+ // if (!err)
+ // console.info(err);
+ // res.sendFile(__dirname + "/uploads/thumbnail/" + filename);
+ // })
+ // }
+ // });
+ res.sendFile(__dirname + "/uploads/" + filename);
});
//保存方案
app.post('/saveScheme', function (req, res) {
data = req.body;
+ //console.info(data);
});
//获取方案
diff --git a/static/js/createScheme.js b/static/js/createScheme.js
index 938d3fa..e3e868e 100644
--- a/static/js/createScheme.js
+++ b/static/js/createScheme.js
@@ -1,10 +1,10 @@
+//全局变量
var renderer, scene, camera;
//整个页面维护的数据
//var data = { name: '默认方案', components: [] };
//TODO 相机参数
var data;
-
//当前选择的部件
var componentIndex = -1;
@@ -12,18 +12,10 @@ $().ready(function () {
initData();
initUi();
initThree();
- loadmodel();
+ loadModel();
initEvent();
});
-//初始化Threejs
-function initThree() {
- initScene();
- initCamera();
- initRenderer();
- render();
-}
-
//获取数据 初始化data
function initData() {
//ajax请求数据
@@ -32,6 +24,7 @@ function initData() {
url: "/getScheme",
async: false, //同步请求,不然data会出问题
success: function (remotaData) {
+ //给全局data赋值
data = remotaData;
},
error: function () {
@@ -39,15 +32,25 @@ function initData() {
}
});
}
-
+//获取全局data后
//刷新主Ui,方案名,部件列表
function initUi() {
- //方案名
+ //刷新方案名
$('#schemeName').val(data.name);
- //组件列表
+ //刷新组件列表
freshComponentItem();
}
+//ui初始化结束后
+//初始化Threejs
+//主要是场景、相机、渲染器
+function initThree() {
+ initScene();
+ initCamera();
+ initRenderer();
+ render();
+}
+
function freshComponentItem() {
//清空原有列表
$('.componentItem').remove();
@@ -65,11 +68,13 @@ function selectComponent(index) {
$('#textureManagerment').show();
$('#upload').removeClass("disabled");
//加载模型列表
- freshmodelList();
+ freshModelList();
+ //刷新贴图列表
+ freshTextureList();
}
//刷新模型的选择列表
-function freshmodelList() {
+function freshModelList() {
$('.list-group-item').remove();
if (data.components[componentIndex].models.length == 0) {
$('#modelList').append('暂无模型')
@@ -79,6 +84,8 @@ function freshmodelList() {
for (var index in data.components[componentIndex].models) {
if (index == data.components[componentIndex].modelIndex) {
data.components[componentIndex].models[index].modelObj.visible = true;
+ var textureIndex = data.components[componentIndex].textureIndex;
+ changeTexture(textureIndex);
$('#modelList').append("" + data.components[componentIndex].models[index].name + "");
} else {
data.components[componentIndex].models[index].modelObj.visible = false;
@@ -106,13 +113,20 @@ function freshTextureList() {
for (var index in data.components[componentIndex].textures) {
var fileName = data.components[componentIndex].textures[index].name;
var fileId = data.components[componentIndex].textures[index].fileId;
-
- $('#textureList').append(" ");
+ $('#textureList').append(" ");
}
}
+function changeTexture(index) {
+ if (index < 0)
+ return;
+ var modelIndex = data.components[componentIndex].modelIndex;
+ data.components[componentIndex].textureIndex = index;
+ replaceTexture(data.components[componentIndex].models[modelIndex].modelObj, data.components[componentIndex].textures[index].textureObj);
+}
+
//初始化模型
-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.');
@@ -149,6 +163,32 @@ function loadmodel() {
})(comIndex, molIndex);
}
}
+
+ var loader = new THREE.TextureLoader(manager);
+ for (var comIndex in data.components) {
+ for (var textureIndex in data.components[comIndex].textures) {
+
+ //异步加载问题
+ (function (comIndex, textureIndex) {
+ var url = '/files/' + data.components[comIndex].textures[textureIndex].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;
+ // }
+ // });
+ data.components[comIndex].textures[molIndex].textureObj = object;
+
+ }
+ );
+ })(comIndex, textureIndex);
+ }
+ var modelIndex = data.components[comIndex].modelIndex;
+ var textureIndex = data.components[comIndex].textureIndex;
+ replaceTexture(data.components[componentIndex].models[modelIndex].modelObj, data.components[componentIndex].textures[textureIndex].textureObj);
+ }
}
function initScene() {
@@ -363,14 +403,7 @@ function initEvent() {
// 选择上传完成后加载模型
function addModel(url, callBack) {
- //var map = new THREE.TextureLoader().load('/img/texture/001.jpg');
- //加载obj模型
- // loader = new THREE.OBJLoader();
- // loader.load(url, function (object) {
- // object.position.set(0, -1, 0);
- // object.scale.set(0.01, 0.01, 0.01);
- // scene.add(object);
- // });
+
//加载fbx模型
var loader = new THREE.FBXLoader();
loader.load(url, function (object) {
@@ -391,10 +424,21 @@ function addModel(url, callBack) {
}
);
}
-
+//加载贴图
function addTexture(url, callBack) {
var textureLoader = new THREE.TextureLoader();
textureLoader.load(url, function (object) {
callBack(object);
});
+}
+
+function replaceTexture(modelObj, textureObj) {
+ modelObj.traverse(function (child) {
+ if (child instanceof THREE.Mesh) {
+ child.material.map = textureObj;
+ child.material.castShadow = true;
+ child.material.receiveShadow = true;
+ child.material.needsUpdate = true;
+ }
+ });
}
\ No newline at end of file