k
/
V3D-nodejs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

texture

Browse Source
master
tonkia 6 years ago
parent 0f8fbcdec2
commit 10681ab4a0
2 changed files with 85 additions and 41 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 28
      app.js
  2. 98
      static/js/createScheme.js

28
app.js
Unescape View File

@ -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);
});
//获取方案

98
static/js/createScheme.js
Unescape View File

@ -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('<a class="list-group-item">暂无模型</a>')
@ -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("<a class='list-group-item active' onclick='selectModel(" + index + ")'><span>" + data.components[componentIndex].models[index].name + "</span><button type='button' class='close' onclick='delModelItem(" + index + ")'><span aria-hidden='true'>×</span><span class='sr-only'>Close</span></button></a>");
} 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("<img src='/files/thumbnail/" + fileId + "' width='40px' height='40px' class='img-thumbnail' alt = '" + fileName + "' > ");
$('#textureList').append("<img src='/files/thumbnail/" + fileId + "' width='40px' height='40px' class='img-thumbnail' alt = '" + fileName + "' onclick='changeTexture(" + index + ")'> ");
}
}
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;
}
});
}
Write Preview
Loading…
Cancel
Save