threejs vue TweenJs Logo墙 文字墙 签到

<template>
  <div class="panel">
    <div class="canvas" ref="threeContainer">
        <canvas ref="threedCanvas" class="threed-canvas" height="911" width="1151"></canvas>
    </div> 
  </div>
</template>

<script>
import * as THREE from '@/assets/js/screen/three.js';
import S from '@/assets/js/screen/2d.js';
  
window.THREE = THREE;
import * as TWEEN from '@/assets/js/screen/tween.umd.js';
import OrbitControls from '@/assets/js/screen/OrbitControls.js';
var that;
function getRandomInt(min, max) {
  min = Math.ceil(min); // 确保min是整数
  max = Math.floor(max); // 确保max是整数
  return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
}

export default {
  data() {
    return {
      camera: null,
      scene: null,
      parent: null,
      renderer: null,
      controls: null,
      table: [],
      fontNode: null,
      objects: [],
      targets: {
        table: [],
      },
    };
  },
  mounted() {   
    S.init(this.$refs.threeContainer,this.$refs.threedCanvas, "文字", [
        'https://qn-file.rrxiu.net/mini/screen/avatarBorderDecoration.png',
        "https://qn-file.rrxiu.net/mini/screen/avatarBorderDecoration.png"],'');
    
    setTimeout(() => {
        // png图片LOGO
        S.UI.simulate('https://qn-file.rrxiu.net/mini/screen/avatarBorderDecoration.png'); 
        // 文字
        // S.Shape.switchShape(S.ShapeBuilder.letter("你好")); 
    }, 4000); 
  },
  methods: {
    getRandomAvatar() {
      return Utils.getImageUrl(str);
    },
  },
};
</script>

<style lang="less" scoped>
.panel {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>