add new test and lint

uses another script to move vehicle forward instead of bone translation
3DStreet · Oct 16, 2022 · da7c60b · da7c60b
1 parent e844ea8
commit da7c60b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 34 deletions.
diff --git a/dist/aframe-street-component.js b/dist/aframe-street-component.js
diff --git a/src/index.js b/src/index.js
@@ -372,23 +372,16 @@ AFRAME.registerComponent('wheel', {
       self.wheel_B_L = vehicle.getObjectByName('wheel_B_L');
       self.wheel_B_R = vehicle.getObjectByName('wheel_B_R');
 
-      // For Truck exrta Wheels
+      // For Truck extra Wheels
       self.wheel_B_L_2 = vehicle.getObjectByName('wheel_B_L_2');
       self.wheel_B_R_2 = vehicle.getObjectByName('wheel_B_R_2');
-
-      self.main_bone = vehicle.getObjectByName('main_bone');
     });
   },
-  tick: function (t,dt) {
-    const speed = this.data.speed/1000;
+  tick: function (t, dt) {
+    const speed = this.data.speed / 1000;
     const wheelDiameter = this.data.wheelDiameter;
-
-    // let distance = speed * t ;
-    // let wheelRotations = distance/Math.PI*wheelDiameter;
-    // let angle = (wheelRotations)*2*Math.PI;
-    // let rateOfRotation = (angle/t);
-    // Simplified Formula
-    let rateOfRotation = (2*(speed/wheelDiameter))*dt;
+
+    const rateOfRotation = (2 * (speed / wheelDiameter)) * dt;
 
     if (this.wheel_F_L) {
       this.wheel_F_L.rotateY(rateOfRotation);

diff --git a/src/tested/vehicle-wheel-animation-test.js b/src/tested/vehicle-wheel-animation-test.js
@@ -21,27 +21,17 @@ AFRAME.registerComponent('wheel', {
       self.wheel_B_L = vehicle.getObjectByName('wheel_B_L');
       self.wheel_B_R = vehicle.getObjectByName('wheel_B_R');
 
-      // For Truck exrta Wheels
+      // For Truck extra Wheels
       self.wheel_B_L_2 = vehicle.getObjectByName('wheel_B_L_2');
       self.wheel_B_R_2 = vehicle.getObjectByName('wheel_B_R_2');
-
-      self.main_bone = vehicle.getObjectByName('main_bone');
     });
   },
-  tick: function (t,dt) {
-    const speed = this.data.speed/1000; //speed per millisecond
+  tick: function (t, dt) {
+    const speed = this.data.speed / 1000; // speed per millisecond
     const wheelDiameter = this.data.wheelDiameter;
-
-
-    // let distance = speed * t ;
-    // let angle = (distance/(Math.PI*wheelDiameter))*2*Math.PI;
-    // let rateOfRotation = angle/t;
 
-    let rateOfRotation = (2*(speed/wheelDiameter));
+    const rateOfRotation = (2 * (speed / wheelDiameter));
 
-    if (this.main_bone) {
-      this.main_bone.translateY(speed);
-    }
     if (this.wheel_F_L) {
       this.wheel_F_L.rotateY(rateOfRotation);
     }

diff --git a/vehicle-wheel-animation.html b/vehicle-wheel-animation.html
@@ -1,12 +1,41 @@
 <html>
 
 <head>
-  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
 
   <script src="https://unpkg.com/[email protected]/dist/aframe-orbit-controls.min.js"></script>
   <!-- <script src="./dist/aframe-street-component.js"></script> -->
 
   <script src="./src/tested/vehicle-wheel-animation-test.js"></script>
+  <script>
+
+    // source: https://github.com/networked-aframe/networked-aframe/blob/master/examples/js/forward.component.js
+    // modified to be meters per second and default direction
+    AFRAME.registerComponent('forward', {
+      schema: {
+        speed: {default: 1}, // meters per second
+      },
+
+      init: function() {
+        var worldDirection = new THREE.Vector3();
+
+        this.el.object3D.getWorldDirection(worldDirection);
+
+        this.worldDirection = worldDirection;
+      },
+
+      tick: function() {
+        var el = this.el;
+
+        var currentPosition = el.getAttribute('position');
+        var newPosition = this.worldDirection
+          .clone()
+          .multiplyScalar(this.data.speed / 1000)
+          .add(currentPosition);
+        el.setAttribute('position', newPosition);
+      }
+    });
+  </script>
 </head>
 
 <body>
@@ -20,13 +49,13 @@
       <img id="checker" src="//assets.3dstreet.app/materials/Checkerboard_tile.jpg" crossorigin="anonymous" />
     </a-assets>
 
-    <a-entity gltf-model="#bus" wheel="speed:5; wheelDiameter:1.08" position="-8 0 0"></a-entity>
-    <a-entity gltf-model="#sedan" wheel="speed:10; wheelDiameter:0.76" position="-1 0 -9"></a-entity>
-    <a-entity gltf-model="#sedan-taxi" wheel="speed:15; wheelDiameter:0.76" position="-1 0 -5"></a-entity>
-    <a-entity gltf-model="#suv" wheel="speed:5; wheelDiameter:0.84" position="-3 0 0"></a-entity>
-    <a-entity gltf-model="#box-truck" wheel="speed:2; wheelDiameter:1.05" position="-5 0 -5"></a-entity>
+    <a-entity gltf-model="#bus" wheel="speed:5; wheelDiameter:1.08" forward="speed:5" position="-8 0 0"></a-entity>
+    <a-entity gltf-model="#sedan" wheel="speed:10; wheelDiameter:0.76" forward="speed:10" position="-1 0 -9"></a-entity>
+    <a-entity gltf-model="#sedan-taxi" wheel="speed:15; wheelDiameter:0.76" forward="speed:15" position="-1 0 -5"></a-entity>
+    <a-entity gltf-model="#suv" wheel="speed:5; wheelDiameter:0.84" forward="speed:5" position="-3 0 0"></a-entity>
+    <a-entity gltf-model="#box-truck" wheel="speed:1; wheelDiameter:1.05" forward position="-5 0 -5"></a-entity>
     <a-entity camera id="camera-parent" position="3 1 0" rotation="0 90 0">
-      <a-entity camera look-controls id="camera"></a-entity>
+      <a-entity camera wasd-controls look-controls id="camera"></a-entity>
     </a-entity>
     <a-entity geometry="primitive: plane; height: 100; width: 100" rotation="90 0 0"
       material="src: #checker;side: double;shader: flat; color: lightgreen; repeat: 100 100 "></a-entity>