You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
V3D-nodejs/static/js/createScheme.js

512 lines
19 KiB

//全局变量
var renderer, scene, camera, controls;
var totalFinish = 0;
//整个页面维护的数据
//var data = { name: '默认方案', components: [] };
//TODO 相机参数
var data;
//当前选择的部件
var componentIndex = -1;
$().ready(function () {
initData();
initUi();
initThree();
loadModel();
initEvent();
});
//---------------------------------------------------------------------------------------------------------------------
//获取数据 初始化data
function initData() {
var url = document.location.toString();
var arrUrl = url.split("create");
var id = arrUrl[arrUrl.length - 1];
//ajax请求数据
$.ajax({
type: "POST",
url: "/getScheme" + id,
async: false, //同步请求,不然data会出问题
success: function (remotaData) {
//给全局data赋值
data = remotaData;
},
error: function () {
//TODO 初始化数据异常
}
});
}
//---------------------------------------------------------------------------------------------------------------------
//获取全局data后
//刷新主Ui,方案名,部件列表
function initUi() {
//刷新方案名
$('#schemeName').val(data.name);
//刷新组件列表
freshComponentItem();
}
//刷新组件列表
function freshComponentItem() {
//清空原有列表
$('.componentItem').remove();
for (var index in data.components) {
//添加一个item并注册了click监听
$('#componentList').prepend("<li class='componentItem' onclick='selectComponent(" + index + ")'><a>" + data.components[index].name + "</a></li>");
}
}
//点击事件:选择部件
function selectComponent(index) {
componentIndex = index;
$('#componentTitle').text(data.components[componentIndex].name);
$('#delComponent').show();
$('#textureManagerment').show();
$('#upload').removeClass("disabled");
//加载模型列表
freshModelList();
//刷新贴图列表
freshTextureList();
//刷新贴图选择列表
freshTextureField();
}
//刷新模型的选择列表
function freshModelList() {
$('.list-group-item').remove();
if (data.components[componentIndex].models.length == 0) {
data.components[componentIndex].modelIndex == -1;
$('#modelList').append('<a class="list-group-item">暂无模型</a>')
} else {
var textureIndex = data.components[componentIndex].textureIndex;
changeTexture(textureIndex);
for (var index in data.components[componentIndex].models) {
if (index == data.components[componentIndex].modelIndex) {
data.components[componentIndex].models[index].modelObj.visible = true;
$('#modelList').append("<a class='list-group-item active' ondblclick='changeModelName(" + index + ")' 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;
$('#modelList').append("<a class='list-group-item' ondblclick='changeModelName(" + index + ")' 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>");
}
}
}
}
//点击事件:选择模型
function selectModel(index) {
data.components[componentIndex].modelIndex = index;
//将当期贴图赋予给模型
freshModelList();
}
//点击事件:删除模型
function delModelItem(index) {
scene.remove(data.components[componentIndex].models[index].modelObj);
data.components[componentIndex].models.splice(index, 1);
selectModel(0);
//阻止事件冒泡
event.stopPropagation();
}
//点击事件:修改模型名称
function changeModelName(index) {
$('#modelName').val(data.components[componentIndex].models[index].name);
$('#changeModelNameModal').modal('show');
$('#changeModelName').unbind('click');
$('#changeModelName').click(function () {
if ($('#modelName').val().trim().length > 0) {
data.components[componentIndex].models[index].name = $('#modelName').val();
$('#changeModelNameModal').modal('hide');
freshModelList();
}
});
}
//刷新贴图列表
function freshTextureList() {
$('#textureList').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;
$('#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) {
if (index < 0)
return;
var modelIndex = data.components[componentIndex].modelIndex;
if (modelIndex < 0)
return;
data.components[componentIndex].textureIndex = index;
replaceTexture(data.components[componentIndex].models[modelIndex].modelObj, data.components[componentIndex].textures[index].textureObj);
}
//---------------------------------------------------------------------------------------------------------------------
//ui初始化结束后
//初始化Threejs
//主要是场景、相机、渲染器
function initThree() {
initScene();
initCamera();
initRenderer();
render();
}
function initScene() {
//场景设置
scene = new THREE.Scene();
//设置天空盒
scene.background = new THREE.CubeTextureLoader()
.setPath('/img/skybox/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
//场景灯光
//环境光
var light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 2, 0);
scene.add(light);
//直射光
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 2, 1);
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = - 100;
light.shadow.camera.left = - 120;
light.shadow.camera.right = 120;
scene.add(light);
//grid
var grid = new THREE.GridHelper(20, 20, 0x0000ff, 0xff0000);
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add(grid);
}
function initCamera() {
//相机设置
camera = new THREE.PerspectiveCamera(45, $('#viewField').innerWidth() / $('#viewField').innerHeight());
camera.position.set(0, 5, 10);
//让相机对着场景中央
camera.lookAt(scene.position);
//相机控制,控制的相机和监听的dom
controls = new THREE.OrbitControls(camera, $('#viewField')[0]);
controls.target.set(0, 0, 0);
controls.update();
}
function initRenderer() {
//初始化渲染器
renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
//设置像素值
renderer.setPixelRatio(window.devicePixelRatio);
//设置渲染范围为屏幕的大小
renderer.setSize($('#viewField').innerWidth(), $('#viewField').innerHeight());
//将渲染结果放到页面中
$('#viewField').append(renderer.domElement);
}
function render() {
requestAnimationFrame(render);
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/model/' + 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/texture/' + 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() {
$('#saveScheme').click(function () {
var saveData = data;
for (var index in saveData.components) {
for (textureIndex in saveData.components[index].textures) {
delete saveData.components[index].textures[textureIndex].textureObj;
}
for (modelIndex in saveData.components[index].models) {
delete saveData.components[index].models[modelIndex].modelObj;
}
}
var image = new Image();
let imgData = renderer.domElement.toDataURL("image/jpeg");//这里可以选择png格式jpeg格式
saveData.img = imgData;
console.info(saveData);
$.ajax({
type: "POST",
url: "/saveScheme",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(saveData)
});
});
//方案名变动监听
$('#schemeName').change(function () {
data.name = $('#schemeName').val();
});
//将fileinput事件注册到uploadbtn上
$("#upload").click(function () {
$("#file").click();
});
$("#textureUpload").click(function () {
$("#textureFile").click();
});
//只要file发生改变就上传文件
$("#file").change(function () {
if ($(this).val().length > 0) {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "/upload/model",
data: formData,
cache: false,
processData: false,
contentType: false,
success: function (fileData) {
//上传成功后加载模型
//加载是异步的
var addModelItem = function (modelObj) {
data.components[componentIndex].models.push({
name: fileData.originalname,
fileId: fileData.filename,
modelObj: modelObj
});
selectModel(data.components[componentIndex].models.length - 1);
}
addModel('/files/model/' + fileData.filename, addModelItem);
},
error: function () {
alert("上传失败")
}
});
}
});
//贴图文件上传
$("#textureFile").change(function () {
if ($(this).val().length > 0) {
var formData = new FormData($('#uploadTextureForm')[0]);
$.ajax({
type: 'post',
url: "/upload/texture",
data: formData,
cache: false,
processData: false,
contentType: false,
success: function (fileData) {
//上传成功后加载模型
//加载是异步的
var addTextureItem = function (textureObj) {
data.components[componentIndex].textures.push({
name: fileData.originalname,
fileId: fileData.filename,
textureObj: textureObj
});
//selectModel(data.components[componentIndex].models.length - 1);
freshTextureList();
freshTextureField();
}
addTexture('/files/texture/' + fileData.filename, addTextureItem);
},
error: function () {
alert("上传失败")
}
});
}
});
//当浏览器大小变化时
$(window).resize(function () {
camera.aspect = $('#viewField').innerWidth() / $('#viewField').innerHeight();
camera.updateProjectionMatrix();
renderer.setSize($('#viewField').innerWidth(), $('#viewField').innerHeight());
});
//当模态框消失的时候清空text
$('#addComponentModal').on('hidden.zui.modal', function () {
$("#componentName").val("")
});
//添加一个部件
$('#addComponent').click(function () {
var componentName = $("#componentName").val().trim();
if (componentName.length > 0) {
var component = {
name: componentName,
models: [],
modelIndex: -1,
textures: [],
textureIndex: -1
}
data.components.push(component);
freshComponentItem();
$('#addComponentModal').modal('hide');
}
});
//删除部件
$('#delComponent').click(function () {
new $.zui.Messager('你确定要删除该部件吗,该部件的所有模型和贴图将会被清空!', {
type: 'danger',
close: false,
actions: [{
icon: 'ok-sign',
text: '确定',
action: function () { // 点击该操作按钮的回调函数
if (componentIndex >= 0) {
for (var index in data.components[componentIndex].models)
scene.remove(data.components[componentIndex].models[index].modelObj);
data.components.splice(componentIndex, 1);
freshComponentItem();
componentIndex = -1;
$('#componentTitle').text('请先选择部件');
$('#textureManagerment').hide();
$('#delComponent').hide();
$('#upload').addClass("disabled");
$('.list-group-item').remove();
$('#textureField').empty();
//TODO 还需要发送ajax清空模型文件
}
}
}, {
icon: 'times',
text: '取消',
}]
}).show();
});
//贴图模态框弹出
$('#textureManagerment').click(function () {
$('#textureManagermentModal').modal('show');
});
}
// 选择上传完成后加载模型
function addModel(url, callBack) {
//加载fbx模型
var loader = new THREE.FBXLoader();
loader.load(url, function (object) {
scene.add(object);
callBack(object);
}, function (xhr) {
//console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, function (err) {
console.error('An error happened');
}
);
}
//加载贴图
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;
}
});
}