add threejs CanvasRenderer

Author: Raphael Brand

demo/Gulpfile.js

@@ -57,16 +57,23 @@ gulp.task('js-vendor', function () {
     (typeof vendorConfig.js.src == 'string' || vendorConfig.js.src.length === 0)) {
     throw new Error('no vendor scripts added. \nvendor.json:\nuse src["file.a.js"]')
   }
-  return gulp.src(vendorConfig.js.src)
-      .pipe(uglifyjs({ output: { comments: /^!|@preserve|@license|@cc_on/i } }))
-      .pipe(rename({ suffix: '.min' }))
+  vendorConfig.js.src.map((value) => {
+    console.log('Building', value, '...');
+    let suffix = ''
+    suffix = (!/\.min/.test(value) ? '.min' : '');
+    
+    gulp.src(value)
+      .pipe(uglifyjs({ output: { comments: /^!|@preserve|@?license|@cc_on/i } }))
+      .pipe(rename({ "suffix": suffix }))
       .pipe(gulp.dest(vendorConfig.js.dest))
+  });
 });
 
 gulp.task('js', function () {
   return gulp.src([
     'app/js/test-module.js',
     'app/js/acceleration.js',
+    'app/js/three-scene.js',
     'app/js/main.js']
   )
     .pipe(concat('main.js'))
@@ -86,31 +93,3 @@ gulp.task('default', ['sass', 'js', 'templates'], function () {
   gulp.watch('./app/sass/*.sass', ['sass']);
   gulp.watch('./app/*.pug', ['pug-watch']);
 });
-
-
-/*
-gulp.task('uglify-vendor', function () {
-
-  console.dir(arguments);
-  return;
-  let optionFiles;
-
-  optionFiles = process.argv.filter((option, index, arr) => {
-    if (/\-\-file/gi.test(arr[index - 1])) {
-      //optionFile = index+1;
-      return arr[index];
-    }
-    return false;
-  });
-  if (optionFiles.length) {
-    optionFiles.map((src) => {
-      console.log(src);
-      return gulp.src(src) // could do this cli-wise with process.argv
-        .pipe(uglifyjs({ output: { comments: /^!|@preserve|@license|@cc_on/i } }))
-        .pipe(rename(src.replace(/.+\/(\w+)\.js$/gi, '$1.min.js')))
-        .pipe(gulp.dest('./dist/js/vendor', { overwrite: true }));
-    });
-  }
-
-});
-*/

demo/app/index.pug

@@ -3,14 +3,17 @@ html
         title Canvas - Pacman-alike-playfield (work-in-progress)
         link(href='https://fonts.googleapis.com/css?family=Fresca')
         link(href='/css/main.css', rel='stylesheet')
+        script(src='https://threejs.org/build/three.min.js')
+        script(src='https://threejs.org/examples/js/renderers/Projector.js')
+        script(src='https://threejs.org/examples/js/renderers/CanvasRenderer.js')
         script(type='text/javascript', data-main='js/main', src='js/vendor/require.min.js')
     body
         .container
           .jumbotron
             .heading1.animation Hello World!
-
           canvas#canvas(width=300,height=300)
-
+          #perspective
+          #perspective_stats
           .btnWrap
             button.left='left'
             button.up='up'

demo/app/js/acceleration.js

@@ -31,16 +31,16 @@ define('acceleration', () => {
     return true;
   };
   var onKeyDown = function onKeyDown(e) {
-    var code = codes[e.keyCode] != undefined ? codes[e.keyCode] : e.target.className;
+    var code = codes[e.keyCode] ? codes[e.keyCode] : e.target.className;
 
     move(code) && draw() && setTimeout(function () {
       Array.from(document.querySelectorAll(".btnWrap button")).forEach(function (el) {
         return el.classList.remove("active");
       });
       return true;
-    }, 400) && document.querySelector("." + code).classList.add("active");
+    }, 400) && document.querySelector('.' + code).classList.add("active");
     setTimeout(function () {
-      return document.querySelector("." + code).blur();
+      return document.querySelector('.' + code).blur();
     }, 400);
   };
 
@@ -85,7 +85,7 @@ define('acceleration', () => {
       level[current.y][current.x] = free;
       level[playerPosition.y][playerPosition.x] = player;
       playerAt = playerPosition;
-      console.clear();
+      //console.clear();
       console.log("Player has moved " + direction);
     }
     return hasMoved;
@@ -121,7 +121,7 @@ define('acceleration', () => {
 
   //move();
   //draw();
-  console.clear();
+  //console.clear();
   document.querySelector(".up").focus();
   setTimeout(function (el) {
     el.classList.remove("active"), el.blur();

demo/app/js/main.js

@@ -16,3 +16,6 @@ require(['test-module', 'acceleration'], function(test, acc) {
   ]);
   acc.draw() && acc.printMap()
 });
+require(['three-scene'], (Scene) => {
+  Scene.animate({rotation:{speed:{x:0.01, y:0.01}}})
+})

demo/app/js/three-scene.js

@@ -0,0 +1,46 @@
+define('three-scene', () => {
+  var scene, camera, renderer, container;
+  var geometry, material, cube, w, h;
+  w = h = 300;
+
+  init();
+
+  function init() {
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+    container = document.createElement('div');
+    document.getElementById('perspective').appendChild(container);
+
+    gemoetry = new THREE.BoxGeometry(50, 50, 50);
+    material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+    cube = new THREE.Mesh(gemoetry, material);
+    scene.add(cube);
+    renderer = new THREE.CanvasRenderer();
+    console.log(renderer);
+    renderer.setSize(w, h);
+    camera.position.z = 200;
+
+    container.appendChild(renderer.domElement);
+    
+    renderer.render(scene, camera);
+
+  }
+
+  let currentFrame = 0;
+  let animate;
+
+  animate = (params) => {
+    requestAnimationFrame(() => animate(params));
+    cube.rotation.x += params.rotation.speed.x;
+    cube.rotation.y += params.rotation.speed.y;
+    //console.info(cube.rotation.y, scene, camera, cube);
+    scene.add(cube);
+    renderer.render(scene, camera);
+    document.querySelector('#perspective_stats').innerHTML = cube.rotation.x;
+  }
+  return {
+    "animate": animate
+  }
+
+  console.log(currentFrame);
+})

demo/app/sass/main.sass

@@ -1 +1,5 @@
 @import 'acceleration';
+#perspective
+  position: absolute
+  top: 0px
+  right: 0px

demo/package.json

@@ -5,7 +5,7 @@
   "main": "Gulpfile.js",
   "private": true,
   "scripts": {
-    "start": "npm run check-vendor && gulp",
+    "start": "npm run check-vendor && npm run vendor && gulp",
     "check-vendor": "test -d node_modules || (npm install) || (echo 'npm not installed. Please run \"npm install -g npm\"' && exit 1)",
     "vendor": "gulp vendor-scripts",
     "css": "gulp sass",
@@ -17,19 +17,18 @@
   },
   "author": "Raphael Brand<info@raphaelbrand.de>",
   "license": "MIT",
-  "devDependencies": { 
+  "devDependencies": {
     "browser-sync": "^2.17.5",
     "gulp": "^3.9.1",
     "gulp-concat": "^2.6.1",
     "gulp-pug": "^3.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.3.2",
     "gulp-uglify": "^3.0.0",
-    "nodemon": "^1.11.0"
+    "nodemon": "^1.11.0",
+    "requirejs": "^2.3.3"
   },
   "dependencies": {
-    "requirejs": "^2.3.3",
-    "bootstrap-sass": "^3.3.7",
-    "three": "^0.86.0"
+    "bootstrap-sass": "^3.3.7"
   }
 }

demo/vendor.json

@@ -1,8 +1,7 @@
 {
   "js": {
     "src": [
-      "node_modules/requirejs/require.js",
-      "node_modules/three/build/three.min.js"
+      "node_modules/requirejs/require.js"
   ],
     "dest": "./dist/js/vendor"
   },