-
Notifications
You must be signed in to change notification settings - Fork 34
/
vehicle-wheel-animation.html
65 lines (53 loc) · 2.82 KB
/
vehicle-wheel-animation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
<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>
<a-scene>
<a-assets>
<a-asset-item id="sedan" src="//assets.3dstreet.app/objects/vehicles-rig/sedan-rig.glb"></a-asset-item>
<a-asset-item id="bus" src="//assets.3dstreet.app/objects/vehicles-rig/city-bus-rig.glb"></a-asset-item>
<a-asset-item id="sedan-taxi" src="//assets.3dstreet.app/objects/vehicles-rig/sedan-taxi-rig.glb"></a-asset-item>
<a-asset-item id="suv" src="//assets.3dstreet.app/objects/vehicles-rig/suv-rig.glb"></a-asset-item>
<a-asset-item id="box-truck" src="//assets.3dstreet.app/objects/vehicles-rig/box-truck-rig.glb"></a-asset-item>
<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" 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 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>
</a-scene>
</body>
</html>