<template>
  <Jsv3dStage :style="{ width: 1280, height: 720 }" :perspective="700">
    <Poster3d
      :position="rPosition"
      :style="cStyle"
      :divStyle="{ width: 400, height: 200 }"
    >
      <Jsv3dDiv
        v-for="(item, index) in cSrcImgArray"
        :style="{
          width: 100,
          height: 200,
          left: index * 130 + 20,
          backgroundImage: item,
        }"
      ></Jsv3dDiv>
    </Poster3d>
  </Jsv3dStage>
</template>

<script setup>
import { Jsv3dStage, Jsv3dDiv } from "jsview";
import { shallowReactive, onBeforeUnmount } from "vue";
import Poster3d from "./Poster3d.vue";

// 使用到的Jsview组件说明:
// Jsv3dStage用来创建透视区域，透视区域以中间为3d的消失点, perspective为透视率，默认为1000，约小透视扭曲越明显
// Jsv3dDiv为解决图片倾斜时的锯齿问题，放入Jsv3dStage的内容，如果可能发生旋转的div请全部使用Jsv3dDiv
// Jsv3dDiv比div的渲染性能略低, 所以非3d场景，不要习惯性全替换成Jsv3dDiv

// Poster3d为应用层样例组件，里面自带类似于tansition的动画功能，可以处理平移和旋转的配置

//起始位置和旋转角
const rPosition = shallowReactive({
  x: 720,
  y: 260,
  rotateY: -30,
});
//3d组件的style
const cStyle = {
  width: 400,
  height: 200,
};
//插槽的图片来源数组
const cSrcImgArray = [
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Poster3d/App/element_228120_img_20230522225739.jpg",
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Poster3d/App/element_228121_img_20230522225750.jpg",
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Poster3d/App/element_228277_img_20230530144223.png",
];
//定时器
let vTimer = { id: -1 };
let vTimer1 = { id: -1 };
vTimer.id = setTimeout(() => {
  rPosition.x = 420;
  rPosition.rotateY = 0;
}, 3000);
vTimer1.id = setTimeout(() => {
  rPosition.x = 120;
  rPosition.rotateY = 30;
}, 6000);
onBeforeUnmount(() => {
  clearTimeout(vTimer.id);
  clearTimeout(vTimer1.id);
  vTimer.id = -1;
  vTimer1.id = -1;
});
</script>

<style lang="scss" scoped></style>
