-
Notifications
You must be signed in to change notification settings - Fork 33
/
vehicle-wheel-animation.html
35 lines (30 loc) · 1.79 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
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>
<!-- <script src="./dist/aframe-street-component.js"></script> -->
<script src="/dist/aframe-street-component.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="sedan" src="/assets/objects/vehicles-rig/sedan-rig.glb"></a-asset-item>
<a-asset-item id="bus" src="/assets/objects/vehicles-rig/city-bus-rig.glb"></a-asset-item>
<a-asset-item id="sedan-taxi" src="/assets/objects/vehicles-rig/sedan-taxi-rig.glb"></a-asset-item>
<a-asset-item id="suv" src="/assets/objects/vehicles-rig/suv-rig.glb"></a-asset-item>
<a-asset-item id="box-truck" src="/assets/objects/vehicles-rig/box-truck-rig.glb"></a-asset-item>
<img id="checker" src="/assets/textures/Checkerboard_tile.jpg">
</a-assets>
<a-entity gltf-model="#bus" wheel="speed:3; 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 camera id="camera-parent" position="3 1 0" rotation="0 90 0">
<a-entity camera 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>