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

texture replace

Browse Source
master
tonkia 6 years ago
parent 10681ab4a0
commit 9e540efe77
2 changed files with 158 additions and 99 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. 231
      static/js/createScheme.js
  2. 24
      views/createScheme.html

231
static/js/createScheme.js
Unescape View File

@ -1,6 +1,6 @@
//全局变量 //全局变量
var renderer, scene, camera; var renderer, scene, camera;
var totalFinish = 0;
//整个页面维护的数据 //整个页面维护的数据
//var data = { name: '默认方案', components: [] }; //var data = { name: '默认方案', components: [] };
//TODO 相机参数 //TODO 相机参数
@ -16,6 +16,7 @@ $().ready(function () {
initEvent(); initEvent();
}); });
//---------------------------------------------------------------------------------------------------------------------
//获取数据 初始化data //获取数据 初始化data
function initData() { function initData() {
//ajax请求数据 //ajax请求数据
@ -32,6 +33,8 @@ function initData() {
} }
}); });
} }
//---------------------------------------------------------------------------------------------------------------------
//获取全局data后 //获取全局data后
//刷新主Ui，方案名，部件列表 //刷新主Ui，方案名，部件列表
function initUi() { function initUi() {
@ -41,16 +44,7 @@ function initUi() {
freshComponentItem(); freshComponentItem();
} }
//ui初始化结束后 //刷新组件列表
//初始化Threejs
//主要是场景、相机、渲染器
function initThree() {
initScene();
initCamera();
initRenderer();
render();
}
function freshComponentItem() { function freshComponentItem() {
//清空原有列表 //清空原有列表
$('.componentItem').remove(); $('.componentItem').remove();
@ -60,7 +54,7 @@ function freshComponentItem() {
} }
} }
//选择部件 //点击事件：选择部件
function selectComponent(index) { function selectComponent(index) {
componentIndex = index; componentIndex = index;
$('#componentTitle').text(data.components[componentIndex].name); $('#componentTitle').text(data.components[componentIndex].name);
@ -71,21 +65,22 @@ function selectComponent(index) {
freshModelList(); freshModelList();
//刷新贴图列表 //刷新贴图列表
freshTextureList(); freshTextureList();
//刷新贴图选择列表
freshTextureField();
} }
//刷新模型的选择列表 //刷新模型的选择列表
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) {
data.components[componentIndex].modelIndex == -1;
$('#modelList').append('<a class="list-group-item">暂无模型</a>') $('#modelList').append('<a class="list-group-item">暂无模型</a>')
} else { } else {
// if (data.components[componentIndex].modelIndex == -1) var textureIndex = data.components[componentIndex].textureIndex;
// data.components[componentIndex].modelIndex = 0; changeTexture(textureIndex);
for (var index in data.components[componentIndex].models) { for (var index in data.components[componentIndex].models) {
if (index == data.components[componentIndex].modelIndex) { if (index == data.components[componentIndex].modelIndex) {
data.components[componentIndex].models[index].modelObj.visible = true; 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>"); $('#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 { } else {
data.components[componentIndex].models[index].modelObj.visible = false; data.components[componentIndex].models[index].modelObj.visible = false;
@ -95,16 +90,20 @@ function freshModelList() {
} }
} }
//选择模型 //点击事件：选择模型
function selectModel(index) { function selectModel(index) {
data.components[componentIndex].modelIndex = index; data.components[componentIndex].modelIndex = index;
freshmodelList(); //将当期贴图赋予给模型
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);
//阻止事件冒泡
event.stopPropagation();
} }
//刷新贴图列表 //刷新贴图列表
@ -113,82 +112,54 @@ function freshTextureList() {
for (var index in data.components[componentIndex].textures) { for (var index in data.components[componentIndex].textures) {
var fileName = data.components[componentIndex].textures[index].name; var fileName = data.components[componentIndex].textures[index].name;
var fileId = data.components[componentIndex].textures[index].fileId; var fileId = data.components[componentIndex].textures[index].fileId;
$('#textureList').append("<img src='/files/thumbnail/" + fileId + "' width='40px' height='40px' class='img-thumbnail' alt = '" + fileName + "' onclick='changeTexture(" + index + ")'> "); $('#textureList').append("<img src='/files/thumbnail/" + fileId + "' width='40px' height='40px' class='img-thumbnail' alt = '" + fileName + "' onclick='delTexture(" + index + ")'> ");
}
}
//刷新贴图选择的列表
function freshTextureField() {
$('#textureField').empty();
for (var index in data.components[componentIndex].textures) {
var fileName = data.components[componentIndex].textures[index].name;
var fileId = data.components[componentIndex].textures[index].fileId;
$('#textureField').append("<img src='/files/thumbnail/" + fileId + "' width='40px' height='40px' class='img-thumbnail' alt = '" + fileName + "' onclick='changeTexture(" + index + ")'> ");
} }
} }
function delTexture(index) {
data.components[componentIndex].textures.splice(index, 1);
if (data.components[componentIndex].textures.length > 0) {
data.components[componentIndex].textureIndex = 0;
} else {
data.components[componentIndex].textureIndex = -1;
}
var textureIndex = data.components[componentIndex].textureIndex;
changeTexture(textureIndex);
freshTextureList();
freshTextureField();
}
//点击事件：切换贴图
function changeTexture(index) { function changeTexture(index) {
if (index < 0) if (index < 0)
return; return;
var modelIndex = data.components[componentIndex].modelIndex; var modelIndex = data.components[componentIndex].modelIndex;
if (modelIndex < 0)
return;
data.components[componentIndex].textureIndex = index; data.components[componentIndex].textureIndex = index;
replaceTexture(data.components[componentIndex].models[modelIndex].modelObj, data.components[componentIndex].textures[index].textureObj); replaceTexture(data.components[componentIndex].models[modelIndex].modelObj, data.components[componentIndex].textures[index].textureObj);
} }
//初始化模型 //---------------------------------------------------------------------------------------------------------------------
function loadModel() { //ui初始化结束后
var manager = new THREE.LoadingManager(); //初始化Threejs
manager.onStart = function (url, itemsLoaded, itemsTotal) { //主要是场景、相机、渲染器
console.log('Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'); function initThree() {
}; initScene();
manager.onLoad = function () { initCamera();
initUi(); initRenderer();
console.log('Loading complete!'); render();
};
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);
}
}
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() { function initScene() {
@ -248,6 +219,82 @@ function render() {
renderer.render(scene, camera); renderer.render(scene, camera);
} }
//---------------------------------------------------------------------------------------------------------------------
//初始化模型
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 () {
// };
// 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) {
var comLast = (comIndex == data.components.length - 1);
for (var molIndex in data.components[comIndex].models) {
var molLast = (molIndex == data.components[comIndex].models.length - 1);
res = comLast && molLast;
//异步加载问题
(function (comIndex, molIndex, res) {
var url = '/files/' + data.components[comIndex].models[molIndex].fileId;
loader.load(url, function (object) {
object.visible = (data.components[comIndex].modelIndex == molIndex);
data.components[comIndex].models[molIndex].modelObj = object;
scene.add(object);
//如果模型全部加载完成
if (res)
initTexture();
}
);
})(comIndex, molIndex, res);
}
}
//贴图加载
var loader = new THREE.TextureLoader(manager);
for (var comIndex in data.components) {
var comLast = (comIndex == data.components.length - 1);
for (var textureIndex in data.components[comIndex].textures) {
var textureLast = (textureIndex == (data.components[comIndex].textures.length - 1));
var res = comLast && textureLast;
//异步加载问题
(function (comIndex, textureIndex, res) {
var url = '/files/' + data.components[comIndex].textures[textureIndex].fileId;
loader.load(url, function (object) {
data.components[comIndex].textures[textureIndex].textureObj = object;
if (res)
initTexture();
}
);
})(comIndex, textureIndex, res);
}
}
}
function initTexture() {
totalFinish++;
if (totalFinish == 2) {
for (var comIndex in data.components) {
var modelIndex = data.components[comIndex].modelIndex;
var textureIndex = data.components[comIndex].textureIndex;
//赋贴图
if (modelIndex >= 0 && textureIndex >= 0)
replaceTexture(data.components[comIndex].models[modelIndex].modelObj, data.components[comIndex].textures[textureIndex].textureObj);
}
}
}
//---------------------------------------------------------------------------------------------------------------------
//初始化所有事件 //初始化所有事件
function initEvent() { function initEvent() {
$('#saveScheme').click(function () { $('#saveScheme').click(function () {
@ -327,6 +374,7 @@ function initEvent() {
}); });
//selectModel(data.components[componentIndex].models.length - 1); //selectModel(data.components[componentIndex].models.length - 1);
freshTextureList(); freshTextureList();
freshTextureField();
} }
addTexture('/files/' + fileData.filename, addTextureItem); addTexture('/files/' + fileData.filename, addTextureItem);
}, },
@ -368,7 +416,7 @@ function initEvent() {
//删除部件 //删除部件
$('#delComponent').click(function () { $('#delComponent').click(function () {
new $.zui.Messager('你确定要删除该部件吗，该部件的所有模型将会被清空！', { new $.zui.Messager('你确定要删除该部件吗，该部件的所有模型和贴图将会被清空！', {
type: 'danger', type: 'danger',
close: false, close: false,
actions: [{ actions: [{
@ -386,7 +434,8 @@ function initEvent() {
$('#delComponent').hide(); $('#delComponent').hide();
$('#upload').addClass("disabled"); $('#upload').addClass("disabled");
$('.list-group-item').remove(); $('.list-group-item').remove();
//todo 还需要发送ajax清空模型文件 $('#textureField').empty();
//TODO 还需要发送ajax清空模型文件
} }
} }
}, { }, {
@ -396,6 +445,7 @@ function initEvent() {
}).show(); }).show();
}); });
//贴图模态框弹出
$('#textureManagerment').click(function () { $('#textureManagerment').click(function () {
$('#textureManagermentModal').modal('show'); $('#textureManagermentModal').modal('show');
}); });
@ -403,18 +453,9 @@ function initEvent() {
// 选择上传完成后加载模型 // 选择上传完成后加载模型
function addModel(url, callBack) { function addModel(url, callBack) {
//加载fbx模型 //加载fbx模型
var loader = new THREE.FBXLoader(); var loader = new THREE.FBXLoader();
loader.load(url, function (object) { loader.load(url, function (object) {
object.traverse(function (child) {
// if (child instanceof THREE.Mesh) {
// child.material.map = map;
// child.material.castShadow = true;
// child.material.receiveShadow = true;
// child.material.needsUpdate = true;
// }
});
scene.add(object); scene.add(object);
callBack(object); callBack(object);
}, function (xhr) { }, function (xhr) {

24
views/createScheme.html
Unescape View File

@ -44,12 +44,30 @@
top: 0px; top: 0px;
left: 0px; left: 0px;
} }
#textureField{
width:40px;
position: absolute;
top:10px;
right: 10px;
}
#textureField>img{
margin-top:5px;
}
</style> </style>
</head> </head>
<body> <body>
<!-- threejs容器 --> <!-- threejs容器 -->
<div id="viewField"></div> <div id="viewField">
</div>
<!-- 材质选择 -->
<div id="textureField">
</div>
<!-- 编辑栏 --> <!-- 编辑栏 -->
<div id="editField"> <div id="editField">
<div class="panel"> <div class="panel">
@ -66,9 +84,9 @@
<li><a data-toggle="modal" data-target="#addComponentModal"><i class="icon icon-plus"></i>添加新组件</a></li> <li><a data-toggle="modal" data-target="#addComponentModal"><i class="icon icon-plus"></i>添加新组件</a></li>
</ul> </ul>
</div> </div>
<div style="margin-top:20px"> <div>
<div class="page-header"> <div class="page-header">
<h3 id="componentTitle">请先选择部件</h3> <h4 id="componentTitle">请先选择部件</h3>
</div> </div>
<div class="list-group" id="modelList"> <div class="list-group" id="modelList">
</div> </div>

Write Preview
Loading…
Cancel
Save