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

home crop picture and fix some mistakes

Browse Source
master
tonkia 6 years ago
parent e159a52afe
commit 4e0de68fb6
5 changed files with 162 additions and 77 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. 18
      app.js
  2. BIN
      static/img/webbg.jpg
  3. 196
      static/js/createScheme.js
  4. 23
      views/createScheme.html
  5. 2
      views/home.html

18
app.js
Unescape View File

@ -162,8 +162,12 @@ app.post('/saveScheme', function (req, res) {
//------------------------------------------------------------------------------------------------ //------------------------------------------------------------------------------------------------
//获取初始方案 //获取初始方案
app.post('/getScheme', function (req, res) { app.post('/getScheme', function (req, res) {
var data = { name: '默认方案', components: [], img: null, id: null }; var data = { name: '默认方案', components: [], img: null, id: null, maxHeight: 10, height: 2, maxDistance: 30, distance: 10 };
res.send(data); replyData = {
msg: 0,
data: data
}
res.send(replyData);
}); });
//根据局ID获取初始方案 //根据局ID获取初始方案
@ -175,9 +179,17 @@ app.post('/getScheme/:id', function (req, res) {
if (row.length > 0) { if (row.length > 0) {
var data = JSON.parse(row[0].data); var data = JSON.parse(row[0].data);
data.id = id; data.id = id;
res.send(data); replyData = {
msg: 0,
data: data
}
res.send(replyData);
} else { } else {
//TODO 找不到方案 //TODO 找不到方案
replyData = {
msg: 1
}
res.send(replyData);
} }
}) })
} else { } else {

BIN
static/img/webbg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 15 KiB

196
static/js/createScheme.js
Unescape View File

@ -1,11 +1,8 @@
//全局变量 //全局变量
var renderer, scene, camera, controls; var renderer, scene, camera, controls;
//加载参数
var totalFinish = 0;
//相机参数 //相机参数
var height = 2; // var height = 2;
var distance = 10; // var distance = 10;
var angel = 0;
//整个页面维护的数据 //整个页面维护的数据
//var data = { name: '默认方案', components: [] }; //var data = { name: '默认方案', components: [] };
//TODO 相机参数 //TODO 相机参数
@ -34,7 +31,10 @@ function initData() {
async: false, //同步请求，不然data会出问题 async: false, //同步请求，不然data会出问题
success: function (remotaData) { success: function (remotaData) {
//给全局data赋值 //给全局data赋值
data = remotaData; if (remotaData.msg == 0)
data = remotaData.data;
else
window.location.href = "/home";
}, },
error: function () { error: function () {
//TODO 初始化数据异常 //TODO 初始化数据异常
@ -48,6 +48,14 @@ function initData() {
function initUi() { function initUi() {
//刷新方案名 //刷新方案名
$('#schemeName').val(data.name); $('#schemeName').val(data.name);
//相机参数
$('#cameraHeightMaxValue').val(data.maxHeight);
$('#cameraHeightValue').text(data.height);
$('#cameraHeight').val(data.height / data.maxHeight * 100);
$('#cameraDistanceMaxValue').val(data.maxDistance);
$('#cameraDistanceValue').text(data.distance);
$('#cameraDistance').val(data.distance / data.maxDistance * 100);
//刷新组件列表 //刷新组件列表
freshComponentItem(); freshComponentItem();
} }
@ -213,16 +221,23 @@ function initScene() {
} }
function initCamera() { function initCamera() {
//相机设置 //相机设置
camera = new THREE.PerspectiveCamera(45, $('#viewField').innerWidth() / $('#viewField').innerHeight()); camera = new THREE.PerspectiveCamera(45, $('#viewField').innerWidth() / $('#viewField').innerHeight());
camera.position.set(distance * Math.sin(angel), height, distance * Math.cos(angel)); camera.position.y = data.height;
//让相机对着场景中央 //让相机对着场景中央
camera.lookAt(0, height, 0); //camera.lookAt(0, height, 0);
//相机控制,控制的相机和监听的dom //相机控制,控制的相机和监听的dom
// controls = new THREE.OrbitControls(camera, $('#viewField')[0]); controls = new THREE.OrbitControls(camera, $('#viewField')[0]);
// controls.target.set(0, 0, 0); controls.target.set(0, data.height, 0);
// controls.update(); controls.maxPolarAngle = Math.PI / 2;
controls.minPolarAngle = Math.PI / 2;
controls.minDistance = data.distance;
controls.maxDistance = data.distance;
controls.enablePan = false;
controls.enableKeys = false;
// controls.maxAzimuthAngle = 0;
// controls.minAzimuthAngle = 0;
controls.update();
} }
function initRenderer() { function initRenderer() {
@ -250,72 +265,60 @@ function loadModel() {
// manager.onStart = function (url, itemsLoaded, itemsTotal) { // manager.onStart = function (url, itemsLoaded, itemsTotal) {
// console.log('Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'); // console.log('Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
// }; // };
// manager.onLoad = function () { manager.onLoad = function () {
// }; initTexture();
};
// manager.onProgress = function (url, itemsLoaded, itemsTotal) { // manager.onProgress = function (url, itemsLoaded, itemsTotal) {
// console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'); // console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
// }; // };
// manager.onError = function (url) { // manager.onError = function (url) {
// console.log('There was an error loading ' + url); // console.log('There was an error loading ' + url);
// }; // };
//模型加载 //模型加载
var loader = new THREE.FBXLoader(manager); var loader = new THREE.FBXLoader(manager);
for (var comIndex in data.components) { for (var comIndex in data.components) {
var comLast = (comIndex == data.components.length - 1);
for (var molIndex in data.components[comIndex].models) { for (var molIndex in data.components[comIndex].models) {
var molLast = (molIndex == data.components[comIndex].models.length - 1);
res = comLast && molLast;
//异步加载问题 //异步加载问题
(function (comIndex, molIndex, res) { (function (comIndex, molIndex) {
var url = '/files/model/' + data.components[comIndex].models[molIndex].fileId; var url = '/files/model/' + data.components[comIndex].models[molIndex].fileId;
loader.load(url, function (object) { loader.load(url, function (object) {
object.visible = (data.components[comIndex].modelIndex == molIndex); object.visible = (data.components[comIndex].modelIndex == molIndex);
data.components[comIndex].models[molIndex].modelObj = object; data.components[comIndex].models[molIndex].modelObj = object;
scene.add(object); scene.add(object);
//如果模型全部加载完成
if (res)
initTexture();
} }
); );
})(comIndex, molIndex, res); })(comIndex, molIndex);
} }
} }
//贴图加载 //贴图加载
var loader = new THREE.TextureLoader(manager); var loader = new THREE.TextureLoader(manager);
for (var comIndex in data.components) { for (var comIndex in data.components) {
var comLast = (comIndex == data.components.length - 1);
for (var textureIndex in data.components[comIndex].textures) { 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) { (function (comIndex, textureIndex) {
var url = '/files/texture/' + data.components[comIndex].textures[textureIndex].fileId; var url = '/files/texture/' + data.components[comIndex].textures[textureIndex].fileId;
loader.load(url, function (object) { loader.load(url, function (object) {
data.components[comIndex].textures[textureIndex].textureObj = object; data.components[comIndex].textures[textureIndex].textureObj = object;
if (res)
initTexture();
} }
); );
})(comIndex, textureIndex, res); })(comIndex, textureIndex);
} }
} }
} }
//当模型和贴图都加载结束后，给模型赋予默认贴图
function initTexture() { function initTexture() {
totalFinish++; for (var comIndex in data.components) {
if (totalFinish == 2) { var modelIndex = data.components[comIndex].modelIndex;
for (var comIndex in data.components) { var textureIndex = data.components[comIndex].textureIndex;
var modelIndex = data.components[comIndex].modelIndex; //赋贴图
var textureIndex = data.components[comIndex].textureIndex; if (data.components[comIndex].models.length > 0 && data.components[comIndex].textures.length > 0)
//赋贴图 replaceTexture(data.components[comIndex].models[modelIndex].modelObj, data.components[comIndex].textures[textureIndex].textureObj);
if (modelIndex >= 0 && textureIndex >= 0)
replaceTexture(data.components[comIndex].models[modelIndex].modelObj, data.components[comIndex].textures[textureIndex].textureObj);
}
} }
} }
//--------------------------------------------------------------------------------------------------------------------- //---------------------------------------------------------------------------------------------------------------------
//初始化所有事件 //初始化所有事件
function initEvent() { function initEvent() {
@ -323,42 +326,63 @@ function initEvent() {
//复制一个saveData //复制一个saveData
var saveData = {}; var saveData = {};
$.extend(saveData, data); $.extend(saveData, data);
//去除aveData中多余的数据
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 imgData = renderer.domElement.toDataURL("image/jpeg");//这里可以选择png格式jpeg格式
var image = new Image(); var image = new Image();
let imgData = renderer.domElement.toDataURL("image/jpeg");//这里可以选择png格式jpeg格式 image.src = imgData;
saveData.img = imgData; //异步
//上传服务器 image.onload = function () {
$.ajax({ var sWidth = image.width;
type: "POST", var sHeigth = image.height;
url: "/saveScheme", var tWidth = sHeigth / 1.2;
contentType: "application/json; charset=utf-8", var tHeigth = sHeigth;
data: JSON.stringify(saveData), //压缩后的像素
success: function (returnData) { $('#compress')[0].width = 200;
console.info(returnData); $('#compress')[0].height = 240;
if (returnData.affectedRows > 0) { //console.info(sWidth + ":" + sHeigth + ":" + tWidth + ":" + tHeigth);
//获取保存后的id //压缩图片
if (returnData.insertId) $('#compress')[0].getContext('2d').drawImage(image, (sWidth - tWidth) / 2, (sHeigth - tHeigth) / 2, tWidth, tHeigth, 0, 0, $('#compress')[0].width, $('#compress')[0].height);
data.id = returnData.insertId; imgData = $('#compress')[0].toDataURL("image/jpeg", 0.5);
new $.zui.Messager('保存成功！', {
type: 'success', saveData.img = imgData;
close: false, //去除多余数据
actions: [{ var sendData = JSON.stringify(saveData, function (key, value) {
icon: 'times', if (key == 'textureObj' || key == 'modelObj') {
text: '确定' return null;
}] } else {
}).show(); return value;
} }
} })
}); // console.info(data);
// console.info(saveData);
// console.info(sendData);
//上传服务器
$.ajax({
type: "POST",
url: "/saveScheme",
contentType: "application/json; charset=utf-8",
data: sendData,
success: function (returnData) {
// console.info(returnData);
if (returnData.affectedRows > 0) {
//获取保存后的id
if (returnData.insertId)
data.id = returnData.insertId;
new $.zui.Messager('保存成功！', {
type: 'success',
close: false,
actions: [{
icon: 'times',
text: '确定'
}]
}).show();
}
}
});
};
}); });
//方案名变动监听 //方案名变动监听
@ -503,6 +527,34 @@ function initEvent() {
$('#textureManagerment').click(function () { $('#textureManagerment').click(function () {
$('#textureManagermentModal').modal('show'); $('#textureManagermentModal').modal('show');
}); });
//相机高度控制
$('#cameraHeight').mousemove(function () {
var height = data.maxHeight / 100 * $('#cameraHeight').val();
data.height = parseFloat(height.toFixed(2));
$('#cameraHeightValue').text(data.height);
camera.position.y = data.height
controls.target.set(0, data.height, 0);
controls.update();
});
//相机距离控制
$('#cameraDistance').mousemove(function () {
distance = data.maxDistance / 100 * $('#cameraDistance').val();
data.distance = parseFloat(distance.toFixed(2));
$('#cameraDistanceValue').text(data.distance);
controls.minDistance = data.distance;
controls.maxDistance = data.distance;
controls.update();
});
$('#cameraHeightMaxValue').change(function () {
data.maxHeight = parseFloat($('#cameraHeightMaxValue').val());
});
$('#cameraDistanceMaxValue').change(function () {
data.maxDistance = parseFloat($('#cameraDistanceMaxValue').val());
});
} }
// 选择上传完成后加载模型 // 选择上传完成后加载模型

23
views/createScheme.html
Unescape View File

@ -54,11 +54,15 @@
#textureField>img{ #textureField>img{
margin-top:5px; margin-top:5px;
} }
#cameraConfig>*{
margin-top:5px;
margin-bottom:5px;
}
</style> </style>
</head> </head>
<body> <body>
<!-- threejs容器 --> <!-- threejs容器 -->
<div id="viewField"> <div id="viewField">
@ -68,8 +72,23 @@
<div id="textureField"> <div id="textureField">
</div> </div>
<!-- 编辑栏 --> <!-- 编辑栏 -->
<div id="editField"> <div id="editField">
<div class="panel">
<div class="panel-body">
<div id='cameraConfig'>
<label for="volume">相机高度最大值：</label><input type="number" id='cameraHeightMaxValue'><br />
<label for="volume">相机高度：</label><b id='cameraHeightValue'>xx</b><br />
<input type="range" id="cameraHeight" min="0" max="100" style="display: block;width: 100%">
<hr />
<label for="volume">相机距离最大值：</label><input type="number" id='cameraDistanceMaxValue'><br />
<label for="volume">相机距离：</label><b id='cameraDistanceValue'>xx</b><br />
<input type="range" id="cameraDistance" min="0" max="100" style="display: block;width: 100%">
</div>
</div>
</div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<div class="input-control has-label-left"> <div class="input-control has-label-left">
@ -174,6 +193,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 图片裁切 -->
<canvas style='z-index: 5;' id='compress' style='display: none'></canvas>
<script src="/js/createScheme.js"></script> <script src="/js/createScheme.js"></script>
</body> </body>

2
views/home.html
Unescape View File

@ -86,7 +86,7 @@
var name = data.schemeList[index].name; var name = data.schemeList[index].name;
var img = data.schemeList[index].img; var img = data.schemeList[index].img;
var id = data.schemeList[index].id; var id = data.schemeList[index].id;
$('#schemeList').append("<div class='col-md-4 col-sm-6 col-lg-3'><a class='card' href='" + href + "'><div class='media-wrapper'><img src='" + img + "' alt='" + name + "'></div><div class='card-heading'><strong>" + name + "</strong></div><div class='card-actions'><div class='pull-right'> <button type='button' class='btn btn-primary' onclick='share(" + id + ")'><i class='icon-heart'></i> 分享</button></div></div></a></div >"); $('#schemeList').append("<div class='col-md-4 col-sm-6 col-lg-3'><a class='card' href='" + href + "'><div class='media-wrapper'><img style='width:100%' src='" + img + "' alt='" + name + "'></div><div class='card-heading'><strong>" + name + "</strong></div><div class='card-actions'><div class='pull-right'> <button type='button' class='btn btn-primary' onclick='share(" + id + ")'><i class='icon-heart'></i> 分享</button></div></div></a></div >");
} }
}); });
} }

Write Preview
Loading…
Cancel
Save