From b6b899ff5536f33887c0e5741a6ea6dea3bbae5a Mon Sep 17 00:00:00 2001 From: tonkia Date: Wed, 19 Dec 2018 18:01:51 +0800 Subject: [PATCH] syn --- app.js | 36 +++--- package.json | 3 +- static/js/createScheme.js | 30 +++-- static/js/vector.js | 230 ++++++++++++++++++++++++++++++++++++++ views/createScheme.html | 4 +- views/home.html | 25 ++++- views/login.html | 26 ++++- 7 files changed, 315 insertions(+), 39 deletions(-) create mode 100644 static/js/vector.js diff --git a/app.js b/app.js index 94382d2..867cda2 100644 --- a/app.js +++ b/app.js @@ -1,12 +1,21 @@ var express = require('express'); var multer = require('multer'); -var upload = multer({ dest: 'uploads/' }); var bodyParser = require('body-parser'); var session = require('express-session'); var fs = require('fs'); var gm = require('gm'); + var app = express(); +var storage = multer.diskStorage({ + destination: function (req, res, cb) { + var fileType = req.params["fileType"]; + console.info(fileType); + cb(null, 'uploads/' + fileType); + } +}); +var upload = multer({ storage: storage }); + app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json({ limit: '50mb' })); app.use(express.static('static')); @@ -62,22 +71,15 @@ app.get('/logout', function (req, res) { //用户主页 app.get('/home', function (req, res) { - res.sendFile(__dirname + "/views/home.html"); + res.sendFile(__dirname + "/views/home.html"); }); //接受文件上传，并且返回文件名 -app.post('/upload', upload.single('file'), function (req, res) { - //console.info(req.file) +app.post('/upload/:fileType', upload.single('file'), function (req, res) { + console.info(req.file) res.send(req.file); }); -//返回文件 -app.get('/files/:filename', function (req, res) { - //TODO 根据session判断是否有权限获取文件 - var filename = req.params['filename']; - res.sendFile(__dirname + "/uploads/" + filename); -}); - //返回缩略图 app.get('/files/thumbnail/:filename', function (req, res) { var filename = req.params['filename']; @@ -92,13 +94,21 @@ app.get('/files/thumbnail/:filename', function (req, res) { // }) // } // }); - res.sendFile(__dirname + "/uploads/" + filename); + res.sendFile(__dirname + "/uploads/texture/" + filename); +}); + +//返回文件 +app.get('/files/:fileType/:fileName', function (req, res) { + //TODO 根据session判断是否有权限获取文件 + var fileType = req.params['fileType']; + var fileName = req.params['fileName']; + res.sendFile(__dirname + "/uploads/" + fileType + "/" + fileName); }); //保存方案 app.post('/saveScheme', function (req, res) { data = req.body; - //console.info(data); + console.info(data); }); //获取方案 diff --git a/package.json b/package.json index 46383d5..0f7ad38 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "express": "^4.16.4", "express-session": "^1.15.6", "gm": "^1.23.1", - "multer": "^1.4.1" + "multer": "^1.4.1", + "mysql": "^2.16.0" } } diff --git a/static/js/createScheme.js b/static/js/createScheme.js index 04929b7..efd9e16 100644 --- a/static/js/createScheme.js +++ b/static/js/createScheme.js @@ -1,5 +1,5 @@ //全局变量 -var renderer, scene, camera; +var renderer, scene, camera, controls; var totalFinish = 0; //整个页面维护的数据 //var data = { name: '默认方案', components: [] }; @@ -260,7 +260,7 @@ function loadModel() { res = comLast && molLast; //异步加载问题 (function (comIndex, molIndex, res) { - var url = '/files/' + data.components[comIndex].models[molIndex].fileId; + 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; @@ -283,7 +283,7 @@ function loadModel() { var res = comLast && textureLast; //异步加载问题 (function (comIndex, textureIndex, res) { - var url = '/files/' + data.components[comIndex].textures[textureIndex].fileId; + var url = '/files/texture/' + data.components[comIndex].textures[textureIndex].fileId; loader.load(url, function (object) { data.components[comIndex].textures[textureIndex].textureObj = object; if (res) @@ -311,14 +311,11 @@ function initTexture() { //初始化所有事件 function initEvent() { $('#saveScheme').click(function () { - // $.ajax({ - // type: "POST", - // url: "/saveScheme", - // contentType: "application/json; charset=utf-8", - // data: JSON.stringify(data) - // }); - $.post('/saveScheme', data, function () { - + $.ajax({ + type: "POST", + url: "/saveScheme", + contentType: "application/json; charset=utf-8", + data: JSON.stringify(data) }); }); @@ -330,7 +327,7 @@ function initEvent() { //将fileinput事件注册到uploadbtn上 $("#upload").click(function () { $("#file").click(); - }); + }); $("#textureUpload").click(function () { $("#textureFile").click(); @@ -342,7 +339,7 @@ function initEvent() { var formData = new FormData($('#uploadForm')[0]); $.ajax({ type: 'post', - url: "/upload", + url: "/upload/model", data: formData, cache: false, processData: false, @@ -358,7 +355,7 @@ function initEvent() { }); selectModel(data.components[componentIndex].models.length - 1); } - addModel('/files/' + fileData.filename, addModelItem); + addModel('/files/model/' + fileData.filename, addModelItem); }, error: function () { alert("上传失败") @@ -373,7 +370,7 @@ function initEvent() { var formData = new FormData($('#uploadTextureForm')[0]); $.ajax({ type: 'post', - url: "/upload", + url: "/upload/texture", data: formData, cache: false, processData: false, @@ -391,7 +388,7 @@ function initEvent() { freshTextureList(); freshTextureField(); } - addTexture('/files/' + fileData.filename, addTextureItem); + addTexture('/files/texture/' + fileData.filename, addTextureItem); }, error: function () { alert("上传失败") @@ -487,7 +484,6 @@ function addTexture(url, callBack) { callBack(object); }); } - function replaceTexture(modelObj, textureObj) { modelObj.traverse(function (child) { if (child instanceof THREE.Mesh) { diff --git a/static/js/vector.js b/static/js/vector.js new file mode 100644 index 0000000..674ab61 --- /dev/null +++ b/static/js/vector.js @@ -0,0 +1,230 @@ +CAV={FRONT:0,BACK:1,DOUBLE:2,SVGNS:"http://www.w3.org/2000/svg"};CAV.Array=typeof Float32Array==="function"?Float32Array:Array;CAV.Utils={isNumber:function(a){return!isNaN(parseFloat(a))&&isFinite(a)}}; +(function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;cb&&(a[0]=b);a[1]>b&&(a[1]=b);a[2]>b&&(a[2]=b);return this},clamp:function(a,b,c){this.min(a,b);this.max(a,c);return this},limit:function(a,b,c){var d=this.length(a);b!==null&&dc&&this.setLength(a,c);return this},dot:function(a,b){return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]},normalise:function(a){return this.divideScalar(a,this.length(a))},negate:function(a){return this.multiplyScalar(a, +-1)},distanceSquared:function(a,b){var c=a[0]-b[0],d=a[1]-b[1],e=a[2]-b[2];return c*c+d*d+e*e},distance:function(a,b){return Math.sqrt(this.distanceSquared(a,b))},lengthSquared:function(a){return a[0]*a[0]+a[1]*a[1]+a[2]*a[2]},length:function(a){return Math.sqrt(this.lengthSquared(a))},setLength:function(a,b){var c=this.length(a);c!==0&&b!==c&&this.multiplyScalar(a,b/c);return this}}; +CAV.Vector4={create:function(a,b,c){var d=new CAV.Array(4);this.set(d,a,b,c);return d},set:function(a,b,c,d,e){a[0]=b||0;a[1]=c||0;a[2]=d||0;a[3]=e||0;return this},setX:function(a,b){a[0]=b||0;return this},setY:function(a,b){a[1]=b||0;return this},setZ:function(a,b){a[2]=b||0;return this},setW:function(a,b){a[3]=b||0;return this},add:function(a,b){a[0]+=b[0];a[1]+=b[1];a[2]+=b[2];a[3]+=b[3];return this},multiplyVectors:function(a,b,c){a[0]=b[0]*c[0];a[1]=b[1]*c[1];a[2]=b[2]*c[2];a[3]=b[3]*c[3];return this}, +multiplyScalar:function(a,b){a[0]*=b;a[1]*=b;a[2]*=b;a[3]*=b;return this},min:function(a,b){a[0]b&&(a[0]=b);a[1]>b&&(a[1]=b);a[2]>b&&(a[2]=b);a[3]>b&&(a[3]=b);return this},clamp:function(a,b,c){this.min(a,b);this.max(a,c);return this}};CAV.Color=function(a,b){this.rgba=CAV.Vector4.create();this.hex=a||"#000000";this.opacity=CAV.Utils.isNumber(b)?b:1;this.set(this.hex,this.opacity)}; +CAV.Color.prototype={set:function(a,b){var a=a.replace("#",""),c=a.length/3;this.rgba[0]=parseInt(a.substring(c*0,c*1),16)/255;this.rgba[1]=parseInt(a.substring(c*1,c*2),16)/255;this.rgba[2]=parseInt(a.substring(c*2,c*3),16)/255;this.rgba[3]=CAV.Utils.isNumber(b)?b:this.rgba[3];return this},hexify:function(a){a=Math.ceil(a*255).toString(16);a.length===1&&(a="0"+a);return a},format:function(){var a=this.hexify(this.rgba[0]),b=this.hexify(this.rgba[1]),c=this.hexify(this.rgba[2]);return this.hex="#"+ +a+b+c}};CAV.Object=function(){this.position=CAV.Vector3.create()};CAV.Object.prototype={setPosition:function(a,b,c){CAV.Vector3.set(this.position,a,b,c);return this}};CAV.Light=function(a,b){CAV.Object.call(this);this.ambient=new CAV.Color(a||"#FFFFFF");this.diffuse=new CAV.Color(b||"#FFFFFF");this.ray=CAV.Vector3.create()};CAV.Light.prototype=Object.create(CAV.Object.prototype);CAV.Vertex=function(a,b,c){this.position=CAV.Vector3.create(a,b,c)}; +CAV.Vertex.prototype={setPosition:function(a,b,c){CAV.Vector3.set(this.position,a,b,c);return this}}; +CAV.Triangle=function(a,b,c){this.a=a||new CAV.Vertex;this.b=b||new CAV.Vertex;this.c=c||new CAV.Vertex;this.vertices=[this.a,this.b,this.c];this.u=CAV.Vector3.create();this.v=CAV.Vector3.create();this.centroid=CAV.Vector3.create();this.normal=CAV.Vector3.create();this.color=new CAV.Color;this.polygon=document.createElementNS(CAV.SVGNS,"polygon");this.polygon.setAttributeNS(null,"stroke-linejoin","round");this.polygon.setAttributeNS(null,"stroke-miterlimit","1");this.polygon.setAttributeNS(null,"stroke-width", +"1");this.computeCentroid();this.computeNormal()}; +CAV.Triangle.prototype={computeCentroid:function(){this.centroid[0]=this.a.position[0]+this.b.position[0]+this.c.position[0];this.centroid[1]=this.a.position[1]+this.b.position[1]+this.c.position[1];this.centroid[2]=this.a.position[2]+this.b.position[2]+this.c.position[2];CAV.Vector3.divideScalar(this.centroid,3);return this},computeNormal:function(){CAV.Vector3.subtractVectors(this.u,this.b.position,this.a.position);CAV.Vector3.subtractVectors(this.v,this.c.position,this.a.position);CAV.Vector3.crossVectors(this.normal, +this.u,this.v);CAV.Vector3.normalise(this.normal);return this}};CAV.Geometry=function(){this.vertices=[];this.triangles=[];this.dirty=false};CAV.Geometry.prototype={update:function(){if(this.dirty){var a,b;for(a=this.triangles.length-1;a>=0;a--)b=this.triangles[a],b.computeCentroid(),b.computeNormal();this.dirty=false}return this}}; +CAV.Plane=function(a,b,c,d){CAV.Geometry.call(this);this.width=a||100;this.height=b||100;this.segments=c||4;this.slices=d||4;this.segmentWidth=this.width/this.segments;this.sliceHeight=this.height/this.slices;var e,f,g,c=[];e=this.width*-0.5;f=this.height*0.5;for(a=0;a<=this.segments;a++){c.push([]);for(b=0;b<=this.slices;b++)d=new CAV.Vertex(e+a*this.segmentWidth,f-b*this.sliceHeight),c[a].push(d),this.vertices.push(d)}for(a=0;a=0;c--){d=this.geometry.triangles[c];CAV.Vector4.set(d.color.rgba);for(e=a.length-1;e>=0;e--)f=a[e],CAV.Vector3.subtractVectors(f.ray,f.position,d.centroid),CAV.Vector3.normalise(f.ray),g=CAV.Vector3.dot(d.normal,f.ray),this.side===CAV.FRONT?g=Math.max(g,0):this.side===CAV.BACK?g=Math.abs(Math.min(g,0)):this.side===CAV.DOUBLE&&(g=Math.max(Math.abs(g),0)),CAV.Vector4.multiplyVectors(this.material.slave.rgba, +this.material.ambient.rgba,f.ambient.rgba),CAV.Vector4.add(d.color.rgba,this.material.slave.rgba),CAV.Vector4.multiplyVectors(this.material.slave.rgba,this.material.diffuse.rgba,f.diffuse.rgba),CAV.Vector4.multiplyScalar(this.material.slave.rgba,g),CAV.Vector4.add(d.color.rgba,this.material.slave.rgba);CAV.Vector4.clamp(d.color.rgba,0,1)}return this};CAV.Scene=function(){this.meshes=[];this.lights=[]}; +CAV.Scene.prototype={add:function(a){a instanceof CAV.Mesh&&!~this.meshes.indexOf(a)?this.meshes.push(a):a instanceof CAV.Light&&!~this.lights.indexOf(a)&&this.lights.push(a);return this},remove:function(a){a instanceof CAV.Mesh&&~this.meshes.indexOf(a)?this.meshes.splice(this.meshes.indexOf(a),1):a instanceof CAV.Light&&~this.lights.indexOf(a)&&this.lights.splice(this.lights.indexOf(a),1);return this}};CAV.Renderer=function(){this.halfHeight=this.halfWidth=this.height=this.width=0}; +CAV.Renderer.prototype={setSize:function(a,b){if(!(this.width===a&&this.height===b))return this.width=a,this.height=b,this.halfWidth=this.width*0.5,this.halfHeight=this.height*0.5,this},clear:function(){return this},render:function(){return this}};CAV.CanvasRenderer=function(){CAV.Renderer.call(this);this.element=document.createElement("canvas");this.element.style.display="block";this.context=this.element.getContext("2d");this.setSize(this.element.width,this.element.height)}; +CAV.CanvasRenderer.prototype=Object.create(CAV.Renderer.prototype);CAV.CanvasRenderer.prototype.setSize=function(a,b){CAV.Renderer.prototype.setSize.call(this,a,b);this.element.width=a;this.element.height=b;this.context.setTransform(1,0,0,-1,this.halfWidth,this.halfHeight);return this};CAV.CanvasRenderer.prototype.clear=function(){CAV.Renderer.prototype.clear.call(this);this.context.clearRect(-this.halfWidth,-this.halfHeight,this.width,this.height);return this}; +CAV.CanvasRenderer.prototype.render=function(a){CAV.Renderer.prototype.render.call(this,a);var b,c,d,e,f;this.clear();this.context.lineJoin="round";this.context.lineWidth=1;for(b=a.meshes.length-1;b>=0;b--)if(c=a.meshes[b],c.visible){c.update(a.lights,true);for(d=c.geometry.triangles.length-1;d>=0;d--)e=c.geometry.triangles[d],f=e.color.format(),this.context.beginPath(),this.context.moveTo(e.a.position[0],e.a.position[1]),this.context.lineTo(e.b.position[0],e.b.position[1]),this.context.lineTo(e.c.position[0], +e.c.position[1]),this.context.closePath(),this.context.strokeStyle=f,this.context.fillStyle=f,this.context.stroke(),this.context.fill()}return this}; + +function Victor(container, anitOut){ + if (!!document.createElement("canvas").getContext) { + var t = { + width: 1.5, + height: 1.5, + depth: 10, + segments: 12, + slices: 6, + xRange: 0.8, + yRange: 0.1, + zRange: 1, + ambient: "#525252", + diffuse: "#FFFFFF", + speed: 0.0002 + }; + var G = { + count: 2, + xyScalar: 1, + zOffset: 100, + ambient: "#002c4a", + diffuse: "#005584", + speed: 0.001, + gravity: 1200, + dampening: 0.95, + minLimit: 10, + maxLimit: null, + minDistance: 20, + maxDistance: 400, + autopilot: false, + draw: false, + bounds: CAV.Vector3.create(), + step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1)) + }; + var m = "canvas"; + var E = "svg"; + var x = { + renderer: m + }; + var i, n = Date.now(); + var L = CAV.Vector3.create(); + var k = CAV.Vector3.create(); + var z = document.getElementById(container || "container"); + var w = document.getElementById(anitOut || "anitOut"); + var D, I, h, q, y; + var g; + var r; + + function C() { + F(); + p(); + s(); + B(); + v(); + K(z.offsetWidth, z.offsetHeight); + o() + } + + function F() { + g = new CAV.CanvasRenderer(); + H(x.renderer) + } + + function H(N) { + if (D) { + w.removeChild(D.element) + } + switch (N) { + case m: + D = g; + break + } + D.setSize(z.offsetWidth, z.offsetHeight); + w.appendChild(D.element) + } + + function p() { + I = new CAV.Scene() + } + + function s() { + I.remove(h); + D.clear(); + q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices); + y = new CAV.Material(t.ambient, t.diffuse); + h = new CAV.Mesh(q, y); + I.add(h); + var N, O; + for (N = q.vertices.length - 1; N >= 0; N--) { + O = q.vertices[N]; + O.anchor = CAV.Vector3.clone(O.position); + O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1)); + O.time = Math.randomInRange(0, Math.PIM2) + } + } + + function B() { + var O, N; + for (O = I.lights.length - 1; O >= 0; O--) { + N = I.lights[O]; + I.remove(N) + } + D.clear(); + for (O = 0; O < G.count; O++) { + N = new CAV.Light(G.ambient, G.diffuse); + N.ambientHex = N.ambient.format(); + N.diffuseHex = N.diffuse.format(); + I.add(N); + N.mass = Math.randomInRange(0.5, 1); + N.velocity = CAV.Vector3.create(); + N.acceleration = CAV.Vector3.create(); + N.force = CAV.Vector3.create() + } + } + + function K(O, N) { + D.setSize(O, N); + CAV.Vector3.set(L, D.halfWidth, D.halfHeight); + s() + } + + function o() { + i = Date.now() - n; + u(); + M(); + requestAnimationFrame(o) + } + + function u() { + var Q, P, O, R, T, V, U, S = t.depth / 2; + CAV.Vector3.copy(G.bounds, L); + CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar); + CAV.Vector3.setZ(k, G.zOffset); + for (R = I.lights.length - 1; R >= 0; R--) { + T = I.lights[R]; + CAV.Vector3.setZ(T.position, G.zOffset); + var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance); + var W = G.gravity * T.mass / N; + CAV.Vector3.subtractVectors(T.force, k, T.position); + CAV.Vector3.normalise(T.force); + CAV.Vector3.multiplyScalar(T.force, W); + CAV.Vector3.set(T.acceleration); + CAV.Vector3.add(T.acceleration, T.force); + CAV.Vector3.add(T.velocity, T.acceleration); + CAV.Vector3.multiplyScalar(T.velocity, G.dampening); + CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit); + CAV.Vector3.add(T.position, T.velocity) + } + for (V = q.vertices.length - 1; V >= 0; V--) { + U = q.vertices[V]; + Q = Math.sin(U.time + U.step[0] * i * t.speed); + P = Math.cos(U.time + U.step[1] * i * t.speed); + O = Math.sin(U.time + U.step[2] * i * t.speed); + CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S); + CAV.Vector3.add(U.position, U.anchor) + } + q.dirty = true + } + + function M() { + D.render(I) + } + + function J(O) { + var Q, N, S = O; + var P = function(T) { + for (Q = 0, l = I.lights.length; Q < l; Q++) { + N = I.lights[Q]; + N.ambient.set(T); + N.ambientHex = N.ambient.format() + } + }; + var R = function(T) { + for (Q = 0, l = I.lights.length; Q < l; Q++) { + N = I.lights[Q]; + N.diffuse.set(T); + N.diffuseHex = N.diffuse.format() + } + }; + return { + set: function() { + P(S[0]); + R(S[1]) + } + } + } + + function v() { + window.addEventListener("resize", j) + } + + function A(N) { + CAV.Vector3.set(k, N.x, D.height - N.y); + CAV.Vector3.subtract(k, L) + } + + function j(N) { + K(z.offsetWidth, z.offsetHeight); + M() + } + C(); + } + return J; +} \ No newline at end of file diff --git a/views/createScheme.html b/views/createScheme.html index 7273585..294f0fb 100644 --- a/views/createScheme.html +++ b/views/createScheme.html @@ -15,8 +15,8 @@ - - + + +
+
+
+ + \ No newline at end of file diff --git a/views/login.html b/views/login.html index d677da7..85e4fda 100644 --- a/views/login.html +++ b/views/login.html @@ -8,17 +8,33 @@ - - - 3D MODELS SYSTEM + + + + + - + +
+
+

3D MODELS SYSTEM

@@ -46,6 +62,8 @@