blobt
/
threejs
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

更换fxaa抗锯齿

loadobj
ubuntu20 4 years ago
parent
99fed93096
commit
f91e49025e
28 changed files with 8457 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      README.md
  2. 0
      app/js/class/test.js
  3. 0
      app/js/index.js
  4. 0
      app/views/error.ejs
  5. 11
      app/views/index.ejs
  6. BIN
      dist/b3dd3229bb7d217104f5bbbe79a855e0.png
  7. 3
      gulpfile.babel.js
  8. 7495
      npm-shrinkwrap.json
  9. 2
      package.json
  10. 41
      server/app.js
  11. 90
      server/bin/www
  12. 16
      server/package.json
  13. 1
      server/public/js/cp.min.js
  14. 57
      server/public/js/index.js
  15. 9
      server/routes/index.js
  16. 9
      server/routes/users.js
  17. 0
      server/views/error.ejs
  18. 11
      server/views/index.ejs
  19. 646
      src/index.js
  20. 11
      tasks/browser.js
  21. 4
      tasks/build.js
  22. 7
      tasks/clean.js
  23. 10
      tasks/css.js
  24. 2
      tasks/default.js
  25. 10
      tasks/pages.js
  26. 42
      tasks/scripts.js
  27. 19
      tasks/server.js
  28. 27
      tasks/util/args.js

6
README.md
View File

@ -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
```

0
app/js/class/test.js
View File

0
app/js/index.js
View File

0
app/views/error.ejs
View File

11
app/views/index.ejs
View File

@ -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>

BIN
dist/b3dd3229bb7d217104f5bbbe79a855e0.png
View File

Side by Side

Before

Width: 108  |  Height: 108  |  Size: 28 KiB

3
gulpfile.babel.js
View File

@ -0,0 +1,3 @@
import requireDir from 'require-dir';
requireDir('./tasks');

7495
npm-shrinkwrap.json
File diff suppressed because it is too large
View File

2
package.json
View File

@ -7,7 +7,7 @@
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", "build": "webpack",
"watch": "webpack --watch", "watch": "webpack --watch",
"start": "webpack-dev-server --open"
"start": "webpack-dev-server --open --host '0.0.0.0'"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",

41
server/app.js
View File

@ -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;

90
server/bin/www
View File

@ -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);
}

16
server/package.json
View File

@ -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"
}
}

1
server/public/js/cp.min.js
View File

@ -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"}]);

57
server/public/js/index.js
View File

@ -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";
/***/ })
/******/ ]);

9
server/routes/index.js
View File

@ -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;

9
server/routes/users.js
View File

@ -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;

0
server/views/error.ejs
View File

11
server/views/index.ejs
View File

@ -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>

646
src/index.js
View File

@ -1,113 +1,617 @@
import * as THREE from 'three'; 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 { TextureLoader } from 'three/src/loaders/TextureLoader.js';
import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'; import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.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 container = document.getElementById('container');
//创建场景 //创建场景
var scene = new THREE.Scene(); 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); 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); 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 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();
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);
}
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);
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();
objLoader.setMaterials(materials);
objLoader.load('ket.obj', function (mesh) {
mesh.scale.set(0.01, 0.01, 0.01);
scene.add(mesh);
}
);
});
//添加辅助坐标 //添加辅助坐标
var axesHelper = new THREE.AxesHelper( 15 );
scene.add( axesHelper );
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.x = -4;
camera.position.z = 3; camera.position.z = 3;
camera.position.y = 1; camera.position.y = 1;
//创建渲染器 //创建渲染器
var renderer = new WebGLRenderer();
renderer.physicallyCorrectLights = true;
var renderer = new THREE.WebGLRenderer();
//renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding; renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ReinhardToneMapping; renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.setPixelRatio(window.devicePixelRatio); renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("rgb(30, 30, 30)", 1); //设置背景颜色 renderer.setClearColor("rgb(30, 30, 30)", 1); //设置背景颜色
container.appendChild(renderer.domElement); container.appendChild(renderer.domElement);
//控制器
var clock = new THREE.Clock();
const controls = new OrbitControls(camera, renderer.domElement); 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() { 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); 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;
} }
render();
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;
}

11
tasks/browser.js
View File

@ -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']);
})

4
tasks/build.js
View File

@ -0,0 +1,4 @@
import gulp from 'gulp';
import gulpSequence from 'gulp-sequence';
gulp.task('build', gulpSequence('clean', 'css', 'pages', 'scripts', ['browser', 'server']));

7
tasks/clean.js
View File

@ -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']);
})

10
tasks/css.js
View File

@ -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()))
})

2
tasks/default.js
View File

@ -0,0 +1,2 @@
import gulp from 'gulp';
gulp.task('default', ['build']);

10
tasks/pages.js
View File

@ -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()))
})

42
tasks/scripts.js
View File

@ -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()))
})

19
tasks/server.js
View File

@ -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)()
})
})

27
tasks/util/args.js
View File

@ -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;
Write Preview
Loading…
Cancel
Save