<template>
  <div> 
      <div ref="container"></div> 
  </div>
</template>

<script setup> 
// 加载three.js
// 拖拽控件
import { OrbitControls } from '../../../../node_modules/three/examples/jsm/controls/OrbitControls.js'
import * as THREE from "../../../../node_modules/three/build/three.module.js"
import { FBXLoader } from "../../../../node_modules/three/examples/jsm/loaders/FBXLoader.js"
 

const init = (e) => {
  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(55, 600 / 400, 30, 1000);
  camera.position.z = 355;
  camera.position.x = 0;
  camera.position.y = -350;
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(600, 400);
  container.value.appendChild(renderer.domElement);
  // 创建背景色
  scene.background = new THREE.Color(0x333333);
  //添加相机控件
  let controls = new OrbitControls(camera, renderer.domElement)
  //是否有惯性
  controls.enableDamping = true
  // 是否可缩放
  controls.enableZoom = true
  // 最近距离
  controls.minDistance = 200
  controls.maxDistance = 500
  //创建灯光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  scene.add(directionalLight);
  // 加载fbx模型
  const loader = new FBXLoader();
  loader.load(e, (fbx) => {
    scene.add(fbx);
    frame.value = fbx.animations[0].tracks[0].times.length
    console.log(fbx.animations[0].tracks[0].times.length, '总帧数')
    // 获取动画混合器
    animationMixer.value = new THREE.AnimationMixer(fbx);
    // 播放动画
    animationAction = animationMixer.value.clipAction(fbx.animations[0]);
    // 设置只播放一次模型动画
    // animationAction.setLoop(THREE.LoopOnce)
    // 开始播放
    animationAction.play();
  })
  const animate = () => {
    requestAnimationFrame(animate);
    controls.update()
    renderer.render(scene, camera);

    // 更新动画
    if (animationMixer.value) {
      animationMixer.value.update(0.01);
    }
  };
  animate();
}


// 获取模型地址可以是初始加载也可以是获取  
var filePath = ""  


function showInfo(row) { 
  filePath = "api/" + row.src 
  nextTick(() => {
    init(filePath)
  })
}


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