import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'
import { ExplosionManager } from './ExplosionManager.js'

const box = document.getElementById('box')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)
camera.position.set(5, 5, 5)

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
renderer.setSize(box.clientWidth, box.clientHeight)
box.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

window.onresize = () => {
    renderer.setSize(box.clientWidth, box.clientHeight)
    camera.aspect = box.clientWidth / box.clientHeight
    camera.updateProjectionMatrix()
}

// 添加光照
scene.add(new THREE.AmbientLight(0xffffff, 1))

const pointLight = new THREE.PointLight(0xffffff, 1.5, 0, 2)
pointLight.position.set(5, 5, 5)
scene.add(pointLight)

const directionalLight = new THREE.DirectionalLight(0xffffff, 2)
directionalLight.position.set(-5, 5, -5)
scene.add(directionalLight)

scene.add(new THREE.AxesHelper(1000))

// 创建爆炸管理器
const explosionManager = new ExplosionManager(scene)

// 加载模型示例
// 方式1: 加载GLTF/GLB模型
// explosionManager.loadGLTF('/model/car.glb')
//     .then((model) => {
//         console.log('模型加载成功', model)
//     })
//     .catch((error) => {
//         console.error('模型加载失败', error)
//     })

// 方式2: 加载OBJ模型（支持MTL材质）
explosionManager.loadOBJ(
    '/model/刘家大堰室内示例.obj',
    '/model/刘家大堰室内示例.mtl'
)
    .then((model) => {
        console.log('模型加载成功', model)
    })
    .catch((error) => {
        console.error('模型加载失败', error)
    })

// 创建GUI控制面板
const gui = new dat.GUI()

gui.add({
    '拆解动画': () => {
        explosionManager.explode({
            duration: 1,
            distance: 1.5,
            ease: 'power2.inOut',
            onComplete: () => {
                console.log('拆解动画完成')
            }
        })
    }
}, '拆解动画')

gui.add({
    '还原动画': () => {
        explosionManager.restore({
            duration: 1,
            ease: 'power2.inOut',
            onComplete: () => {
                console.log('还原动画完成')
            }
        })
    }
}, '还原动画')

gui.add({
    '切换状态': () => {
        explosionManager.toggle({
            duration: 1,
            distance: 1.5,
            ease: 'power2.inOut'
        })
    }
}, '切换状态')

// 动画参数控制
const params = {
    duration: 1,
    distance: 1.5,
    ease: 'power2.inOut'
}

gui.add(params, 'duration', 0.1, 3).onChange((value) => {
    explosionManager.setAnimationParams({ duration: value })
})

gui.add(params, 'distance', 0.5, 5).onChange((value) => {
    explosionManager.setAnimationParams({ distance: value })
})

gui.add(params, 'ease', ['power1.inOut', 'power2.inOut', 'power3.inOut', 'power4.inOut', 'back.inOut', 'elastic.inOut']).onChange((value) => {
    explosionManager.setAnimationParams({ ease: value })
})

// 渲染循环
function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}

animate()

