Car 360º Viewer

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

JavaScript
React
Vue@2
Vue@3
Svelte

<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"));

import React, { useEffect } from "react";

import { useAxes, PanInput } from "@egjs/react-axes";
import "../../css/demos/car360viewer.css";

const Car360viewer = () => {
  const images = Array.from({length: 36}, (_, i) => i + 1);
  const { connect, angle } = useAxes(
    {
      angle: {
        range: [0, 360],
        circular: true,
      }
    },
    {
      deceleration: 0.01,
    },
  );

  useEffect(() => {
    connect("angle", new PanInput(".car_rotate"));
  }, []);

  return (
    <div>
      <p>You can create a viewer that can rotate 360 ​​degrees using one axis.</p>
      <div className="car_spot">
        <div className="car_rotate">
          <div className="img_cont" style={{ position: "relative", zIndex: 10 }}>
            {images.map((i) => (
              <img
                key={i}
                src={ require(`@site/static/img/demos/car360/beatle (${i}).png`).default}
                style={{ display: Math.floor((angle % 360) / 10 + 1) === i ? "inline-block" : "none" }}
              />
            ))}
          </div>
          <div className="ratate_bg"></div>
        </div>
      </div>
    </div>
  );
};

export default Car360viewer;

<template>
  <div class="App">
    <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', zIndex: 10}">
          <img
            v-for="i in images" height="150"
            v-bind:key="i"
            :src="`${require('../../../static/img/demos/car360/beatle (${i}).png')}`"
            :style="{display: Math.floor((angle % 360) / 10 + 1) === i ? 'inline-block' : 'none'}"
          >
        </div>
        <div class="ratate_bg"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "@vue/composition-api";
import { useAxes, PanInput } from "@egjs/vue2-axes";

export default defineComponent({
  name: "App",
  setup() {
    const images = Array.from({length: 36}, (_, i) => i + 1);
    const { connect, angle } = useAxes(
      {
        angle: {
          range: [0, 360],
          circular: true,
        }
      },
      {
        deceleration: 0.01,
      },
    );

    onMounted(() => {
      connect("angle", new PanInput(".car_rotate"));
    });

    return {
      images,
      angle,
    };
  },
});
</script>

<template>
  <div class="App">
    <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', zIndex: 10}">
          <img
            v-for="i in images" height="150"
            v-bind:key="i"
            :src="`${require('../../../static/img/demos/car360/beatle (${i}).png')}`"
            :style="{display: Math.floor((angle % 360) / 10 + 1) === i ? 'inline-block' : 'none'}"
          >
        </div>
        <div class="ratate_bg"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useAxes, PanInput } from "@egjs/vue-axes";

export default defineComponent({
  name: "App",
  setup() {
    const images = Array.from({length: 36}, (_, i) => i + 1);
    const { connect, angle } = useAxes(
      {
        angle: {
          range: [0, 360],
          circular: true,
        }
      },
      {
        deceleration: 0.01,
      },
    );

    onMounted(() => {
      connect("angle", new PanInput(".car_rotate"));
    });

    return {
      images,
      angle,
    };
  },
});
</script>

<script>
  import { onMount } from "svelte";
  import { useAxes, PanInput } from "@egjs/svelte-axes";

  const images = Array.from({length: 36}, (_, i) => i + 1);
  const { connect, angle } = useAxes(
    {
      angle: {
        range: [0, 360],
        circular: true,
      }
    },
    {
      deceleration: 0.01,
    },
  );

  onMount(() => {
    connect("angle", new PanInput(".car_rotate"));
  });
</script>

<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', zIndex: 10">
        {#each images as i}
          <img height="150" src="./../image/car360/beatle ({i}).png" style="display: {Math.floor(($angle % 360) / 10 + 1) === i ? 'inline-block' : 'none'}">
        {/each}
      </div>
      <div class="ratate_bg"></div>
    </div>
  </div>
</div>