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.
276 lines
9.2 KiB
276 lines
9.2 KiB
var renderer, scene, camera;
|
|
|
|
//整个页面维护的数据
|
|
var data = { name: '默认方案', components: [] };
|
|
|
|
//当前选择的部件
|
|
var componentIndex = -1;
|
|
|
|
$().ready(function () {
|
|
initData();
|
|
initUi();
|
|
initThree();
|
|
loadmodel();
|
|
initEvent();
|
|
});
|
|
//初始化Threejs
|
|
function initThree() {
|
|
initScene();
|
|
initCamera();
|
|
initRenderer();
|
|
render();
|
|
}
|
|
//获取数据
|
|
function initData() {
|
|
//todo ajax请求数据
|
|
}
|
|
//刷新主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();
|
|
}
|
|
|
|
//选择模型列表
|
|
function freshmodelList() {
|
|
$('.list-group-item').remove();
|
|
if (data.components[componentIndex].models.length == 0) {
|
|
$('#modelList').append('<a class="list-group-item">暂无模型</a>')
|
|
} else {
|
|
// if (data.components[componentIndex].modelIndex == -1)
|
|
// data.components[componentIndex].modelIndex = 0;
|
|
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' 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' 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 delModelItem(index) {
|
|
scene.remove(data.components[componentIndex].models[index].modelObj);
|
|
data.components[componentIndex].models.splice(index, 1);
|
|
selectModel(0);
|
|
}
|
|
//选择模型
|
|
function selectModel(index) {
|
|
data.components[componentIndex].modelIndex = index;
|
|
freshmodelList();
|
|
}
|
|
|
|
//初始化模型
|
|
function loadmodel() {
|
|
|
|
}
|
|
|
|
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();
|
|
//设置像素值
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
//设置渲染范围为屏幕的大小
|
|
renderer.setSize($('#viewField').innerWidth(), $('#viewField').innerHeight());
|
|
//将渲染结果放到页面中
|
|
$('#viewField').append(renderer.domElement);
|
|
}
|
|
|
|
function render() {
|
|
requestAnimationFrame(render);
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
//初始化所有事件
|
|
function initEvent() {
|
|
//方案名变动监听
|
|
$('#schemeName').change(function () {
|
|
data.name = $('#schemeName').val();
|
|
});
|
|
|
|
//将fileinput事件注册到uploadbtn上
|
|
$("#upload").click(function () {
|
|
$("#file").click();
|
|
});
|
|
|
|
//只要file发生改变就上传文件
|
|
$("#file").change(function () {
|
|
if ($(this).val().length > 0) {
|
|
var formData = new FormData($('#uploadForm')[0]);
|
|
$.ajax({
|
|
type: 'post',
|
|
url: "/upload",
|
|
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/' + fileData.filename, addModelItem);
|
|
},
|
|
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
|
|
}
|
|
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();
|
|
//todo 还需要发送ajax清空模型文件
|
|
}
|
|
}
|
|
}]
|
|
}).show();
|
|
});
|
|
}
|
|
|
|
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) {
|
|
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);
|
|
callBack(object);
|
|
}, function (xhr) {
|
|
//console.log((xhr.loaded / xhr.total * 100) + '% loaded');
|
|
}, function (err) {
|
|
console.error('An error happened');
|
|
}
|
|
);
|
|
}
|
|
|
|
|