WIP: made something visible

Author: Raphael Brand

demo/app/js/acceleration.js

@@ -32,7 +32,9 @@ define('acceleration', () => {
   };
   this.getPosition = function() {
     console.log(playerAt);
-    return playerAt ? playerAt : playerPosition
+    let pos = playerAt;
+    pos.z = pos.y; // mhh ...
+    return playerAt ? pos : playerPosition
   }
   this.onMove;
   var onKeyDown = function onKeyDown(e) {

demo/app/js/main.js

@@ -1,7 +1,7 @@
 const log = console.log;
 
 log('Hello Bootstrap');
-require(['test-module', 'acceleration'], function (test, acc) {
+define('start', ['test-module', 'acceleration'], function (test, acc) {
   test.test();
   acc.setCanvas(document.querySelector('#canvas'));
   acc.setLevel([
@@ -15,10 +15,11 @@ require(['test-module', 'acceleration'], function (test, acc) {
     [1, 0, 0, 0, 0, 0, 0, 1]
   ]);
   acc.draw() && acc.printMap();
+  return acc;
 });
 
-require(['three-scene', 'acceleration'], (Scene, acc) => {
-  Scene.animate({ rotation: { speed: { x: 0.01, y: 0 } } });
-  Scene.animate({ position: { x: 100, y: 0 } })
+require(['three-scene', 'start'], (Scene, acc) => {
+  // Scene.animate({ rotation: { speed: { x: 0.01, y: 0 } } });
+  Scene.animate({ position: { x: 100, y: 30 } })
   acc.onMove(acc.getPosition)
 })

demo/app/js/three-scene.js

@@ -6,39 +6,51 @@ define('three-scene', () => {
   init();
 
   function init() {
-    scene = new THREE.Scene();
-    camera = new THREE.PerspectiveCamera(100, 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 = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(50, 1, 1, 1000);
+    camera.position.z = 500;
+    scene.add(camera);
+
+    geometry = new THREE.CubeGeometry(50, 50, 50);
+    material = new THREE.MeshNormalMaterial({ color: 0xff0000 });
+
+    cube = new THREE.Mesh(geometry, material);
     scene.add(cube);
+
     renderer = new THREE.CanvasRenderer();
     console.log(renderer);
     renderer.setSize(w, h);
-    camera.position.x = 50;
-    camera.position.y = 50;
-    camera.position.z = 300;
 
     container.appendChild(renderer.domElement);
 
-    renderer.render(scene, camera);
+    //renderer.render(scene, camera);
 
   }
 
   let currentFrame = 0;
   let animate;
-  let rotationSpeed = (rotation={speed:{x:0,y:0}}) => {
+
+  let rotationSpeed = (rotation={ speed:{ x:0, y:0 } }) => {
     cube.rotation.x += rotation.speed.x;
     cube.rotation.y += rotation.speed.y;
   }
+
+  let positionSpeed = (position={ x:0, y:0 }) => {
+    cube.position.x += position.x * 0.01;
+    cube.position.z += position.y * 0.01;
+  }
+
   animate = (params) => {
     requestAnimationFrame(() => animate(params));
     if(params.rotation) rotationSpeed(params.rotation)
-    //console.info(cube.rotation.y, scene, camera, cube);
-    scene.add(cube);
+    if(params.position) positionSpeed(params.position)
+    //cube.position.x += 2.0; // auto move right
+    cube.position.y = 30; // make it visible, do not change ...
+    //cube.position.z += params.position.z * 0.1;
+    //log(cube.position.z);
     renderer.render(scene, camera);
     document.querySelector('#perspective_stats').innerHTML = cube.rotation.x;
   }