更换fxaa抗锯齿

4 years ago · f91e49025e
28 changed files with 8457 additions and 72 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,6 @@
+# threejs
+
+### 初始化要安装的包
+```shell
+npm install yargs gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util express cookie-parser morgan serve-favicon mockjs ejs --save-dev
+```
--- a/app/js/class/test.js
+++ b/app/js/class/test.js
--- a/app/js/index.js
+++ b/app/js/index.js
--- a/app/views/error.ejs
+++ b/app/views/error.ejs
--- a/app/views/index.ejs
+++ b/app/views/index.ejs
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three Js</title>
+</head>
+<body>
+    <h1>Three Js!!</h1>
+</body>
+</html>
--- a/dist/b3dd3229bb7d217104f5bbbe79a855e0.png
+++ b/dist/b3dd3229bb7d217104f5bbbe79a855e0.png
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@ -0,0 +1,3 @@
+import requireDir from 'require-dir';
+
+requireDir('./tasks');
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
-    "start": "webpack-dev-server --open"
+    "start": "webpack-dev-server --open --host '0.0.0.0'"
  },
  "author": "",
  "license": "ISC",
--- a/server/app.js
+++ b/server/app.js
@ -0,0 +1,41 @@
+var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+
+var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'ejs');
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+app.use(require('connect-livereload')());
+app.use('/', indexRouter);
+app.use('/users', usersRouter);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;
--- a/server/bin/www
+++ b/server/bin/www
@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('server:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}
--- a/server/package.json
+++ b/server/package.json
@ -0,0 +1,16 @@
+{
+  "name": "server",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.4",
+    "debug": "~2.6.9",
+    "ejs": "~2.6.1",
+    "express": "~4.16.1",
+    "http-errors": "~1.6.3",
+    "morgan": "~1.9.1"
+  }
+}
--- a/server/public/js/cp.min.js
+++ b/server/public/js/cp.min.js
@ -0,0 +1 @@
+!function(t){function r(e){if(o[e])return o[e].exports;var n=o[e]={"exports":{},"id":e,"loaded":!1};return t[e].call(n.exports,n,n.exports,r),n.loaded=!0,n.exports}var o={};r.m=t,r.c=o,r.p="",r(0)}([function(t,r,o){t.exports=o(1)},function(t,r){"use strict"}]);
--- a/server/public/js/index.js
+++ b/server/public/js/index.js
@ -0,0 +1,57 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	module.exports = __webpack_require__(1);
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+	"use strict";
+
+/***/ })
+/******/ ]);
--- a/server/routes/index.js
+++ b/server/routes/index.js
@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET home page. */
+router.get('/', function(req, res, next) {
+  res.render('index', { title: 'Express' });
+});
+
+module.exports = router;
--- a/server/routes/users.js
+++ b/server/routes/users.js
@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;
--- a/server/views/error.ejs
+++ b/server/views/error.ejs
--- a/server/views/index.ejs
+++ b/server/views/index.ejs
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three Js</title>
+</head>
+<body>
+    <h1>Three Js!!</h1>
+</body>
+</html>
--- a/src/index.js
+++ b/src/index.js
@ -1,85 +1,100 @@
 import * as THREE from 'three';
+import { GUI } from 'three/examples/jsm/libs/dat.gui.module.js';
+import { MeshStandardMaterial } from 'three';
 import { TextureLoader } from 'three/src/loaders/TextureLoader.js';
 import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js';
+import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
+import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass.js';


+var ui;
+// ref for lumens: http://www.power-sure.com/lumens.htm
+var bulbLuminousPowers = {
+    "110000 lm (1000W)": 110000,
+    "3500 lm (300W)": 3500,
+    "1700 lm (100W)": 1700,
+    "800 lm (60W)": 800,
+    "400 lm (40W)": 400,
+    "180 lm (25W)": 180,
+    "20 lm (4W)": 20,
+    "Off": 0
+};
+
+// ref for solar irradiances: https://en.wikipedia.org/wiki/Lux
+var hemiLuminousIrradiances = {
+    "0.5 lx (Full Moon)": 0.5,
+    "3.4 lx (City Twilight)": 3.4,
+    "10 lx (Custom Nemo)": 10,
+};
+var gui = new GUI();
+var params = {
+    exposure: 0.68,
+    bulbPower: Object.keys(bulbLuminousPowers)[4],
+    hemiIrradiance: Object.keys(hemiLuminousIrradiances)[1]
+};
+
 var container = document.getElementById('container');

 //创建场景
 var scene = new THREE.Scene();

-var hemiLight = new THREE.HemisphereLight(0xddeeff, 0x0f0e0d, 2.8);
+var hemiLight = new THREE.HemisphereLight(0xddeeff, 0x0f0e0d, 0.8);
 scene.add(hemiLight);

-var bulbLight = new THREE.PointLight(0xffee88, 10.8, 10, 2.9);
-bulbLight.position.set(0.0, 1.3, 0.0);
+var bulbGeometry = new THREE.SphereBufferGeometry(0.22, 16, 8);
+var bulbMat = new THREE.MeshStandardMaterial({
+    emissive: 0xffffff,
+    emissiveIntensity: 12,
+    color: 0x000000
+});
+var bulbLight = new THREE.PointLight(0xddeeff, 1, 100, 2);
+bulbLight.add(new THREE.Mesh(bulbGeometry, bulbMat));
+bulbLight.position.set(0.0, 25.0, -22.0);
 scene.add(bulbLight);

+ui = gui.addFolder("灯光");
+ui.add(params, 'hemiIrradiance', Object.keys(hemiLuminousIrradiances));
+ui.add(params, 'bulbPower', Object.keys(bulbLuminousPowers));
+ui.add(params, 'exposure', 0, 1);
+
+
 var textureLoader = new TextureLoader();
+var mtlLoader = new MTLLoader();
+var objLoader = new OBJLoader();

-//创建地板
-var diffuseTexture = textureLoader.load("hardwood2_diffuse.jpg");
-diffuseTexture.wrapS = THREE.RepeatWrapping;
-diffuseTexture.wrapT = THREE.RepeatWrapping;
-diffuseTexture.anisotropy = 4;
-diffuseTexture.repeat.set(10, 24);
-diffuseTexture.encoding = THREE.sRGBEncoding;
-
-var bumpTexture = textureLoader.load("hardwood2_bump.jpg");
-bumpTexture.wrapS = THREE.RepeatWrapping;
-bumpTexture.wrapT = THREE.RepeatWrapping;
-bumpTexture.anisotropy = 4;
-bumpTexture.repeat.set(10, 24);
-bumpTexture.encoding = THREE.sRGBEncoding;
-
-var roughnessTexture = textureLoader.load("hardwood2_roughness.jpg");
-roughnessTexture.wrapS = THREE.RepeatWrapping;
-roughnessTexture.wrapT = THREE.RepeatWrapping;
-roughnessTexture.anisotropy = 4;
-roughnessTexture.repeat.set(10, 24);
-roughnessTexture.encoding = THREE.sRGBEncoding;
-
-var floorMat = new THREE.MeshStandardMaterial({
-    roughness: 0.8,
-    color: 0xffffff,
-    metalness: 0.12,
-    bumpScale: 0.005,
-    side: THREE.DoubleSide,
-    map: diffuseTexture,
-    bumpMap: bumpTexture,
-    roughnessMap:roughnessTexture
-});
+mtlLoader.setPath('./');
+mtlLoader.load('dimian.mtl', function (materials) {
+    materials.preload();
+
+    materials.materials.dimian = makeDimian();
+    materials.materials.tijiao = makeTijiao();
+    materials.materials.qiangti = makeQiangti();
+    materials.materials.chuangkuang = makeChuangkuang();
+    materials.materials.glass = makeGlass();
+    materials.materials.chuanglianbu = makeChuanglianbu();
+    materials.materials.chuangsha = makeChuangsha();
+    materials.materials.heikon = makeHeikon();
+    materials.materials.jinshuxian = makeJinshuxian();
+    materials.materials.qiangbu = makeQiangbu();
+    materials.materials.dalishi = makeDalishi();

-floorMat.needsUpdate = true;
-
-var floorGeometry = new THREE.PlaneBufferGeometry(20, 20);
-var floorMesh = new THREE.Mesh(floorGeometry, floorMat);
-floorMesh.receiveShadow = true;
-floorMesh.rotation.x = - Math.PI / 2.0;
-scene.add(floorMesh);
-
-
-//创建墙
-var matArrayB = [];//外墙
-matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca}));  //前  0xafc0ca :灰色
-matArrayB.push(new THREE.MeshPhongMaterial({color: 0x9cb2d1}));  //后  0x9cb2d1：淡紫
-matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec}));  //上  0xd6e4ec： 偏白色
-matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec}));  //下  
-matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca}));  //左   0xafc0ca :灰色
-matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca}));  //右
-
-function createCubeWall(width, height, depth,angle,material,x,y,z){
-    var cubeGeometry = new THREE.BoxGeometry(width, height, depth );     
-    var cube = new THREE.Mesh( cubeGeometry, material );  
-    cube.position.x = x;  
-    cube.position.y = height / 2;  
-    cube.position.z = z;  
-    cube.rotation.y += angle*Math.PI;  //-逆时针旋转,+顺时针
-    scene.add(cube);  
+    objLoader.setMaterials(materials);
+
+    objLoader.load('ket.obj', function (mesh) {
+
+        mesh.scale.set(0.01, 0.01, 0.01);
+        scene.add(mesh);
    }
-createCubeWall(0.05, 1.6, 4.5,0,matArrayB,2,0,0.225);
-createCubeWall(0.05, 1.6, 4,0.5,matArrayB,0,0,-2);
+    );
+
+});


 //添加辅助坐标
@ -87,27 +102,516 @@ var axesHelper = new THREE.AxesHelper( 15 );
 scene.add(axesHelper);

 //创建相机
-var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
+var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000000);
 camera.position.x = -4;
 camera.position.z = 3;
 camera.position.y = 1;

 //创建渲染器
-var renderer = new WebGLRenderer();
-renderer.physicallyCorrectLights = true;
+var renderer = new THREE.WebGLRenderer();
+//renderer.physicallyCorrectLights = true;
 renderer.outputEncoding = THREE.sRGBEncoding;
 renderer.shadowMap.enabled = true;
 renderer.toneMapping = THREE.ReinhardToneMapping;
+
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setClearColor("rgb(30, 30, 30)", 1); //设置背景颜色
 container.appendChild(renderer.domElement);

+//控制器
+var clock = new THREE.Clock();
 const controls = new OrbitControls(camera, renderer.domElement);
+// controls.enableZoom = true;
+// controls.enablePan = false;
+// controls.minDistance = 5;
+// controls.maxDistance = 15;
+// controls.enableDamping = true;
+// controls.dampingFactor = 0.25;
+// controls.rotation = 0.3;
+
+var targetMat = new THREE.MeshBasicMaterial({ color: '#ff0000' });
+var targetGeo = new THREE.BoxGeometry(4, 17, 4);
+var camTarget = new THREE.Mesh(targetGeo, targetMat);
+camTarget.position.set(0, 0, 0);
+//scene.add(camTarget);
+
+//抗锯齿
+var composer;
+var fxaaPass;
+var renderPass;
+var pixelRatio;
+
+renderPass = new RenderPass(scene, camera);
+fxaaPass = new ShaderPass(FXAAShader);
+pixelRatio = renderer.getPixelRatio();
+fxaaPass.material.uniforms['resolution'].value.x = 1 / (container.offsetWidth * pixelRatio);
+fxaaPass.material.uniforms['resolution'].value.y = 1 / (container.offsetHeight * pixelRatio);
+
+composer = new EffectComposer(renderer);
+composer.addPass(renderPass);
+composer.addPass(fxaaPass);

 // 渲染函数
 function render() {
-    renderer.render(scene, camera); //执行渲染操作
+    controls.update(clock.getDelta);
+    //controls.target.copy(camTarget.position).add(new THREE.Vector3(0, 7, 0));
+    renderer.toneMappingExposure = Math.pow(params.exposure, 5.0); // to allow for very bright scenes.
+    bulbLight.power = bulbLuminousPowers[params.bulbPower];
+    //bulbMat.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0); // convert from intensity to irradiance at bulb surface
+    hemiLight.intensity = hemiLuminousIrradiances[params.hemiIrradiance];
    requestAnimationFrame(render);
+    
+    //fxaa
+    composer.render();
+    //renderer.render(scene, camera); //执行渲染操作
 }
+
 render();
+
+
+function makeDimian() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_dimian_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_dimian_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_dimian_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_dimian_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        //metalness: 0.02,
+        //roughness: 0.13,
+        bumpScale: 0.06
+    });
+
+    var ui = gui.addFolder("地面");
+    ui.add(ret, "metalness", 0.0, 1);
+    ui.add(ret, "roughness", 0.0, 1);
+    return ret;
+}
+
+function makeTijiao() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_tijiao_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_tijiao_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_tijiao_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_tijiao_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.06
+    });
+    return ret;
+}
+function makeQiangti() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_qiangti_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_qiangti_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_qiangti_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_qiangti_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.06
+    });
+    return ret;
+}
+
+function makeChuangkuang() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_chuangkuang_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_chuangkuang_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_chuangkuang_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_chuangkuang_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.06
+    });
+    return ret;
+}
+function makeChuangsha() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_chuangsha_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_chuangsha_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_chuangsha_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_chuangsha_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        transparent:true,
+        opacity:0.91,
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+    });
+    return ret;
+}
+function makeGlass() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_glass_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_glass_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_glass_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_glass_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        transparent:true,
+        alphaMap: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.06
+    });
+    return ret;
+}
+function makeChuanglianbu() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_chuanglianbu_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_chuanglianbu_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_chuanglianbu_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_chuanglianbu_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.06
+    });
+    return ret;
+}
+
+function makeHeikon() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_heikon_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_heikon_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_heikon_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_heikon_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.06
+    });
+    return ret;
+}
+
+function makeJinshuxian() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_jinshuxian_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_jinshuxian_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_jinshuxian_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_jinshuxian_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.06
+    });
+    return ret;
+}
+
+function makeQiangbu() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_qiangbu_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_qiangbu_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_qiangbu_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_qiangbu_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        //color: 0xff0000,
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.06
+    });
+    return ret;
+}
+
+function makeDalishi() {
+    //diffuse map
+    var diffuseMpa = textureLoader.load('./ket_dalishi_BaseColor.png');
+    diffuseMpa.wrapS = 1000;
+    diffuseMpa.wrapT = 1000;
+    diffuseMpa.repeat.copy(new THREE.Vector2(1, 1));
+    diffuseMpa.offset.copy(new THREE.Vector2(0, 0));
+
+    //bump map
+    var bumpMap = textureLoader.load('./ket_dalishi_Height.png');
+    bumpMap.wrapS = THREE.RepeatWrapping;
+    bumpMap.wrapT = THREE.RepeatWrapping;
+    bumpMap.repeat.copy(new THREE.Vector2(1, 1));
+    bumpMap.offset.copy(new THREE.Vector2(0, 0));
+
+    //matelness map
+     var matelMap = textureLoader.load('./ket_dalishi_Metallic.png');
+     matelMap.wrapS = THREE.RepeatWrapping;
+     matelMap.wrapT = THREE.RepeatWrapping;
+     matelMap.repeat.copy(new THREE.Vector2(1, 1));
+     matelMap.offset.copy(new THREE.Vector2(0, 0));
+    
+     //roughness map
+     var roughnessMap = textureLoader.load('./ket_dalishi_Roughness.png');
+     roughnessMap.wrapS = THREE.RepeatWrapping;
+     roughnessMap.wrapT = THREE.RepeatWrapping;
+     roughnessMap.repeat.copy(new THREE.Vector2(1, 1));
+     roughnessMap.offset.copy(new THREE.Vector2(0, 0));
+     
+
+    var ret = new MeshStandardMaterial({
+        //color: 0xff0000,
+        map: diffuseMpa,
+        bumpMap: bumpMap,
+        metalnessMap: matelMap,
+        roughnessMap: roughnessMap,
+        bumpScale: 0.01
+    });
+    return ret;
+}
--- a/tasks/browser.js
+++ b/tasks/browser.js
@ -0,0 +1,11 @@
+import gulp from 'gulp';
+import gulpif from 'gulp-if';
+import gutil from 'gulp-util';
+import args from './util/args';
+
+gulp.task('browser', (cb)=>{
+    if(!args.watch) return cb();
+    gulp.watch('app/**/*.js', ['scripts']);
+    gulp.watch('app/**/*.ejs', ['pages']);
+    gulp.watch('app/**/*.css', ['css']);
+})
--- a/tasks/build.js
+++ b/tasks/build.js
@ -0,0 +1,4 @@
+import gulp from 'gulp';
+import gulpSequence from 'gulp-sequence';
+
+gulp.task('build', gulpSequence('clean', 'css', 'pages', 'scripts', ['browser', 'server']));
--- a/tasks/clean.js
+++ b/tasks/clean.js
@ -0,0 +1,7 @@
+import gulp from 'gulp';
+import del from 'del';
+import args from './util/args';
+
+gulp.task('clean', ()=>{
+    return del(['server/public', 'server/views']);
+})
--- a/tasks/css.js
+++ b/tasks/css.js
@ -0,0 +1,10 @@
+import gulp from 'gulp';
+import gulpif from 'gulp-if';
+import livereload from 'gulp-livereload';
+import args from './util/args';
+
+gulp.task('css',()=>{
+    return gulp.src('app/**/*.css')
+    .pipe(gulp.dest('server/public'))
+    .pipe(gulpif(args.watch, livereload()))
+})
--- a/tasks/default.js
+++ b/tasks/default.js
@ -0,0 +1,2 @@
+import gulp from 'gulp';
+gulp.task('default', ['build']);
--- a/tasks/pages.js
+++ b/tasks/pages.js
@ -0,0 +1,10 @@
+import gulp from 'gulp';
+import gulpif from 'gulp-if';
+import livereload from 'gulp-livereload';
+import args from './util/args'
+
+gulp.task('pages',()=>{
+    return gulp.src('app/**/*.ejs')
+    .pipe(gulp.dest('server'))
+    .pipe(gulpif(args.watch, livereload()))
+})
--- a/tasks/scripts.js
+++ b/tasks/scripts.js
@ -0,0 +1,42 @@
+import gulp from 'gulp';
+import gulpif from 'gulp-if';
+import concat from 'gulp-concat';
+import webpack from 'webpack';
+import gulpWebpack from 'webpack-stream';
+import named from 'vinyl-named';
+import livereload from 'gulp-livereload';
+import plumber from 'gulp-plumber';
+import rename from 'gulp-rename';
+import uglify from 'gulp-uglify';
+import {log,colors} from 'gulp-util';
+import args from './util/args';
+
+gulp.task('scripts',()=>{
+  return gulp.src(['app/js/index.js'])
+    .pipe(plumber({
+      errorHandle:function(){
+
+      }
+    }))
+    .pipe(named())
+    .pipe(gulpWebpack({
+      module:{
+        loaders:[{
+          test:/\.js$/,
+          loader:'babel'
+        }]
+      }
+    }),null,(err,stats)=>{
+      log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
+        chunks:false
+      }))
+    })
+    .pipe(gulp.dest('server/public/js'))
+    .pipe(rename({
+      basename:'cp',
+      extname:'.min.js'
+    }))
+    .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
+    .pipe(gulp.dest('server/public/js'))
+    .pipe(gulpif(args.watch,livereload()))
+})
--- a/tasks/server.js
+++ b/tasks/server.js
@ -0,0 +1,19 @@
+import gulp from 'gulp';
+import gulpif from 'gulp-if';
+import liveserver from 'gulp-live-server';
+import args from './util/args';
+
+gulp.task('server',(cb)=>{
+    if(!args.watch) return cb();
+    
+    var server = liveserver.new(['--harmony', 'server/bin/www']);
+    server.start();
+
+    gulp.watch(['server/public/**/*.js', 'server/public/**/*.ejs'], function(file){
+        server.notify.apply(server, [file])
+    })
+
+    gulp.watch(['server/routes/**/*.js', 'server/app.js'], function(){
+        server.start.bind(server)()
+    })
+})
--- a/tasks/util/args.js
+++ b/tasks/util/args.js
@ -0,0 +1,27 @@
+import yargs from 'yargs';
+const args = yargs
+    .option('production', {
+        boolean: true,
+        default: false,
+        description: 'min all script'
+    })
+    .option('watch', {
+        boolean: true,
+        default: false,
+        description: 'watch all script'
+    })
+    .option('verbose', {
+        boolean: true,
+        default: false,
+        description: 'log'
+    })
+    .option('sourcemaps', {
+        description: 'force to create the sourcemaps'
+    })
+    .option('port', {
+        string: true,
+        default: 8080,
+        description: 'server port'
+    })
+.argv
+export default args;