Skip to main content

Car 360º Viewer

You can create a viewer that can rotate 360 ​​degrees using one axis.

<div>
<p>You can create a viewer that can rotate 360 ​​degrees using one axis.</p>
<div class="car_spot">
<div class="car_rotate">
<div class="img_cont" style="position:relative;z-index:10">
<img height="150" src="./../image/car360/beatle (1).png">
<img height="150" src="./../image/car360/beatle (2).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (3).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (4).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (5).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (6).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (7).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (8).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (9).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (10).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (11).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (12).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (13).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (14).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (15).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (16).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (17).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (18).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (19).png" style="display:none;">
<img height="150" src="./../image/car360/beatle (20).png" style="display:none">
<img height="150" src="./../image/car360/beatle (21).png" style="display:none">
<img height="150" src="./../image/car360/beatle (22).png" style="display:none">
<img height="150" src="./../image/car360/beatle (23).png" style="display:none">
<img height="150" src="./../image/car360/beatle (24).png" style="display:none">
<img height="150" src="./../image/car360/beatle (25).png" style="display:none">
<img height="150" src="./../image/car360/beatle (26).png" style="display:none">
<img height="150" src="./../image/car360/beatle (27).png" style="display:none">
<img height="150" src="./../image/car360/beatle (28).png" style="display:none">
<img height="150" src="./../image/car360/beatle (29).png" style="display:none">
<img height="150" src="./../image/car360/beatle (30).png" style="display:none">
<img height="150" src="./../image/car360/beatle (31).png" style="display:none">
<img height="150" src="./../image/car360/beatle (32).png" style="display:none">
<img height="150" src="./../image/car360/beatle (33).png" style="display:none">
<img height="150" src="./../image/car360/beatle (34).png" style="display:none">
<img height="150" src="./../image/car360/beatle (35).png" style="display:none">
<img height="150" src="./../image/car360/beatle (36).png" style="display:none">
</div>
<div class="ratate_bg"></div>
</div>
</div>
</div>
const images = Array.prototype.slice.call(document.querySelectorAll(
".car_rotate img"));
const imagesNum = images.length;
const ape = 360 / imagesNum; // angle per each

// 1. Initialize eg.Axes
const axes = new eg.Axes({
angle: {
range: [0, 360],
circular: true
}
}, {
deceleration: 0.01
});

// 2. attach event handler
axes.on("change", ({pos}) => {
const index = Math.min(Math.round(pos.angle % 360 / ape), imagesNum - 1);
images.map((v, i) => {
v.style.display = i === index ? "inline-block" : "none";
});
});

// 3. Initialize a inputType and connect it
axes.connect("angle", new eg.Axes.PanInput(".car_rotate"));